StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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.</p> <p>Here's a simplistic wrapper to use flot as an Ext.Component</p> <pre><code>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); } }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload