Results 1 to 7 of 7

Thread: Charts with Large Number of Data Points Render Slowly

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default Charts with Large Number of Data Points Render Slowly

    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    Here are some quick tips that may help:

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

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

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

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

  3. #3
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    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/...ck-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?

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  5. #5
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    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.

  6. #6
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    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.

  7. #7
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    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/

    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!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •