yet
Posts: 36
Joined: Mon Oct 17, 2011 11:06 am

"Slow" performance wiuth 175 series

We have some very complex charts (see screenshot) generated with Highstocks V 1.2.5.
In consists of 175 series where the majority of series are month/quarter series with 31 or 92 values.
It takes pretty long (about 15-20 seconds - depending on browser (tested with latest Chrome/FF)) to render the chart.
I verify the majority of the time is spend after receiving the data from the application server while adding the series using addSeries() to the chart. The related code looks like this:

Code: Select all

    for (var i in einkaeufe_series) {
        var s = einkaeufe_series[i];
        var options = {
                name : s['name'],
                type : 'column',
                pointInterval: resolution * 3600 * 1000,
                pointStart: dict2date(s['start_dict']),
                data : s['data'],
                id: s['name'],
                legendIndex: s['index'],
                tooltip: {
                        yDecimals: 2
                }
            };
        if (s['id'] == 'projection') 
            options['color'] = 'rgba(16, 88, 41, 0.4)';
        window.chart.addSeries(options, false);
    }
Is there any way to improve the overall performance? Are newer versions of Highstocks possibly faster?
Attachments
Monitoring Portal Gas Beschaffung.png
Monitoring Portal Gas Beschaffung.png (236.17 KiB) Viewed 5781 times
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: "Slow" performance wiuth 175 series

It should be faster if you could create chart with all series, not to add them in real time. Have you tried this?
Paweł Fus
Highcharts Developer
yet
Posts: 36
Joined: Mon Oct 17, 2011 11:06 am

Re: "Slow" performance wiuth 175 series

Adding the series array directly to the chart upon initialization does not make a big difference.
However I found out that

chart.xAxis[0].setExtremes(
Date.UTC(date_lower.getFullYear(), date_lower.getMonth(), date_lower.getDate()),
Date.UTC(date_upper.getFullYear(), date_upper.getMonth(), date_upper.getDate())
);

takes roughly 15 seconds!

The chart displays one value per day over a range of five or six years and the customer requirement is that the
range selector is set to window of 12 or 15 month.

Why does this (simple?) operation takes so long?

Andreas
yet
Posts: 36
Joined: Mon Oct 17, 2011 11:06 am

Re: "Slow" performance wiuth 175 series

A (related) problem: adjusting the range selector a bit (see marked state) leads to a completely fragments display of the chart.
Attachments
after adjusting the range selector a bit
after adjusting the range selector a bit
hs2.png (206 KiB) Viewed 5753 times
original state
original state
hs1.png (222.16 KiB) Viewed 5753 times
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: "Slow" performance wiuth 175 series

First issue: try to disable animation in setExtremes: setExtremes(min, max, true, false)
Second: most probably caused by series.dataGrouping or xAxis.ordinal - try to disable one (or both) of them

If any of above solutions won't solve issues, then recreate them on jsFiddle - we will investigate this.
Paweł Fus
Highcharts Developer
yet
Posts: 36
Joined: Mon Oct 17, 2011 11:06 am

Re: "Slow" performance wiuth 175 series

>First issue: try to disable animation in setExtremes: setExtremes(min, max, true, false)

This helped!

>Second: most probably caused by series.dataGrouping or xAxis.ordinal - try to disable one (or both) of them

Both are set to false and no relief with the chart fragments. Could I provide you access to our test server (accessible through to the public) instead of JSFiddle since the application and data is too complete in order to strip it down for JSFiddle?
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: "Slow" performance wiuth 175 series

If disabling animations helped, then why do I need access to your app? :)

If recreating issue on jsFiddle is to hard for someone who work with it, do you think debugging for me, who don't know any part of it, would be easier? ;) Anyway, could you show how have you disabled dataGrouping and ordinal?
Paweł Fus
Highcharts Developer
yet
Posts: 36
Joined: Mon Oct 17, 2011 11:06 am

Re: "Slow" performance wiuth 175 series

ordinal and datagrouping disabled:

Code: Select all

        xAxis : {
                maxZoom : 1 * 24 * 3600000, // fourteen days
                ordinal: false,
                title: {text: 'Datum'},
//                min: 0
        },

        plotOptions : {
            line: {
                turboThreshold: 1,
                connectNulls: false
            },
            series: {
                marker: {
                    enabled: false
                },
                turboThreshold: 1
            },

            column: {
                gapSize:0,
                stacking: 'normal',
                pointPadding: 0,
                turboThreshold: 1,
                dataLabels: {
                      enabled: false,
                      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                },
                dataGrouping: {
                   enabled: false
                }
          }
        },
Fusher
Posts: 7912
Joined: Mon Jan 30, 2012 10:16 am

Re: "Slow" performance wiuth 175 series

Disable dataGrouping on series level:

Code: Select all

            series: {
                marker: {
                    enabled: false
                },
                dataGrouping: {
                   enabled: false
                },
                turboThreshold: 1
            },
Paweł Fus
Highcharts Developer

Return to “Highcharts Stock”