Stock chart in ExtJS 4

Question

How can I draw an stock chart or a line chart with hundreds points? I disabled animation in regular line chart, but not successful and still too heavy and slow.

Answer 1

I've recently written a blog post on creating stock charts in Ext JS 4 - http://www.scottlogic.co.uk/2011/12/ext-js-4-stock-charts/. It uses a couple of hundred points and performs fine in modern browsers and isn't too bad in IE7-8.

This said however, even after messing with the Ext JS build system, the minimum Ext build required to run the charts is still something like .5MB which is too heavy weight for some applications. The CSS however can be chopped down to just a few rules - if you're willing to spend the time trying to figure out which ones you need out of the huge ext-all.css!

Answer 2

My app is completely Ext-JS based. However, when performance is a problem, I use flot. The API is much better designed (and I'm an Ext-JS fan boy) and it performs much better. This is at the expense of working with raw pixel data (canvas, which is pixel based) if you need to interact with the chart. Since in Ext-JS, everything is an SVG object, you can simply attach event handlers to the lines, or anything else you draw yourself.

For example. For a wave monitor, we use flot. For another chart where we let the user drag and drop some lines on the screen, we use Ext-JS charts.

Here's a simplistic wrapper to use flot as an Ext.Component

Ext.define('cci.view.wavemon.Flot',  {
    extend: 'Ext.Component',
    alias: 'widget.cci-flot',

    /**
     * @cfg {number[][]} data The data to be drawn when it gets rendered
     */
    data: null,

    /**
     * @cfg {object} flotOptions
     * The options to be passed in to $.plot
     */
    flotOptions: null,

    /**
     * @property
     * The Flot object used to render the chart and to manipulate it in the future. It will only
     * be available after the first resize event
     * You may not set this property but you are free to call methods on it
     */
    flot: null,

    initComponent: function() {
        this.callParent(arguments);
        // The only time that we're guaranteed to have dimensions is after the first resize event
        this.on('resize',  function(comp) {
            if (!this.flot) {
                this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
            } else {
                // Flot knows to look at the containers size and resize itself
                this.flot.resize();
            }
        }, this);
    }
});