PDA

View Full Version : Charts with Large Number of Data Points Render Slowly



xjscrafter
3 Dec 2013, 8:37 PM
ExtJS 4.2.2

I have some charts displaying slowly when the number of data points is large (480+).

Just wondering if there are any strategies for making chart rendering more efficient in this case.

I'm tempted to consider if some other, more lightweight charting technology, embedded in my ExtJS app might be an option, but I would rather stay with the great ExtJS charts, hence my question. :)

scottmartin
3 Dec 2013, 9:34 PM
Here are some quick tips that may help:



// suspend store events
chartStore.suspendEvents(false);
chartStore.loadData(data);
chartStore.resumeEvents();





// turn off shadows in charts
var chart1 = Ext.create('Ext.chart.Chart',{
xtype: 'chart',
animate: false,
shadow : false,
..
});





// turn off markers in each series
showMarkers: false,





// use compress ext for testing (not debug version)
ext-all.js // instead of ext-all-debug.js

xjscrafter
4 Dec 2013, 7:04 PM
Thanks for your reply. I tried your tips but performance did not improve.

When I compare the ExtJS 4.2.2 line chart example with the following app I see a big difference in performance and I don't know why:

C:\xampp\htdocs\ext-4.2.2.1144\examples\charts\Line.js

http://www.scottlogic.com/blog/2011/12/01/ext-js-4-stock-charts.html

Bascially, if you edit Line.js in the ExtJS 4.2.2 line chart example to generate 200 data points, the performance is at best equal with the above stock app set to 1000 data points. You can set the stock app datapoints to 4000 and performance is not too bad.

So why the differences?

scottmartin
4 Dec 2013, 7:13 PM
We are researching several options to increase the speed in this area. I can check with dev to see if there has been any progress. If you do no hear back in a day or 2, please ping this thread.

xjscrafter
4 Dec 2013, 7:49 PM
Great. Thanks for your attention to this. For now I am going to try to find a way to aggregate the datapoints to a degree, possibly in a server side Python script. But it would be great if XJS could simply handle it.

scottmartin
5 Dec 2013, 10:44 AM
A bug report has been created for this: EXTJSIV-11801

This was created to correct the issue of having obviously too many executions in the chart.

xjscrafter
6 Dec 2013, 6:57 AM
As it turns out, for now the Graphite charting library, configured to deliver SVG charts, is the best choice for large data sets:

http://graphite.readthedocs.org/en/latest/
(http://graphite.readthedocs.org/en/latest/)
As I've starting to absolutely love ExtJS, it would be great if in the future Sencha achieves something as fast as Graphite.

Thanks for your help!