javascript - Highcharts slow performance when adding more than 10 series - Stack Overflow

admin管理员组

文章数量:1429135

I am adding the series using the code below. Now we are talking of 10~20 series, the UI freezes while doing so and it bees increasingly slow. And this happens in a PC browser. My hope is to use these charts in a Android WebVIEW on a tablet (kitkat).

Any suggestions how to increase performance?

            for (var x in currentSerie) {
                chart.addSeries({
                    name: currentSerie[x].Name,
                    data: currentSerie[x].Data,
                    lineWidth: currentSerie[x].lineWidth || 1,
                    color: currentSerie[x].color || '',
                    dataGrouping: {
                        approximation: "average",
                        enabled: false,
                        forced: true,
                        units: [['hour', [1]]]
                    },
                    marker: {
                        enabled: true,
                        radius: 1
                    },
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: currentSerie[x].Unit || ''
                    },
                    shadow: false,
                }, false);

            }

            chart.redraw();

I am adding the series using the code below. Now we are talking of 10~20 series, the UI freezes while doing so and it bees increasingly slow. And this happens in a PC browser. My hope is to use these charts in a Android WebVIEW on a tablet (kitkat).

Any suggestions how to increase performance?

            for (var x in currentSerie) {
                chart.addSeries({
                    name: currentSerie[x].Name,
                    data: currentSerie[x].Data,
                    lineWidth: currentSerie[x].lineWidth || 1,
                    color: currentSerie[x].color || '',
                    dataGrouping: {
                        approximation: "average",
                        enabled: false,
                        forced: true,
                        units: [['hour', [1]]]
                    },
                    marker: {
                        enabled: true,
                        radius: 1
                    },
                    tooltip: {
                        valueDecimals: 1,
                        valueSuffix: currentSerie[x].Unit || ''
                    },
                    shadow: false,
                }, false);

            }

            chart.redraw();

• javascript
• jquery
• performance
• highcharts

Share Improve this question Follow edited Jul 31, 2014 at 22:39 Halvor Holsten Strand 20.6k1717 gold badges8888 silver badges102102 bronze badges asked Jul 31, 2014 at 22:22 terr4xterr4x 11333 silver badges1010 bronze badges 3

• Have you tried to get rid of webview and pare results? how huge is your data? Have you any example serie? – Sebastian Bochan Commented Aug 1, 2014 at 9:38
• Data at the moment is about 10-120 Series and 50 points per Serie. Same results in chrome browser directly. Within android how would i remove the webview? – terr4x Commented Aug 2, 2014 at 15:46
• Could you replicate your example as live demo? – Sebastian Bochan Commented Aug 4, 2014 at 11:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I had the same issue and found the following to be the culprit.

marker: {
    enabled: true,
    radius: 1
},

If you remove forcing the markers to be enabled and let the chart determine when to display the markers, the performance is much better.

As it looks like you are using Highstock (because of the dataGrouping), this is a clear point of performance gain. You've set it to be enabled: false. Setting it to true for large amounts of data can help immensely. From the datagrouping documentation:

Data grouping replaces a sequence of data points in a series with one grouped point...

Grouping is activated [if] there are many data points in the chart. As well as increasing performance it makes it easier to spot trends in a chart.

Some other general performance gains for Highcharts charts can be found from the FAQ:

When working with series with a high number of data points, there are a few things to consider.

1. For line plots, it is remended that you disable point markers, as these will add a performace overhead. See http://highcharts./demo/line-time-series.

2. Disabling shadows increases performance, as three shadow elements are created for each shape that includes a shadow.

3. For large column series, it is remended that you disable the initial animation, plotOptions.column.animation, at least for VML based browsers. The best way to distinguish between fast SVG browsers and slower VML browsers is to use the Highcharts.svg boolean property.

本文标签： javascriptHighcharts slow performance when adding more than 10 seriesStack Overflow