I use highcharts to show dynamical line chart, my requirement is,

1. chart refreshes per second
2. need to append 250 new points to chart per second
3. keep the total number of points in chart fixed, such as keep 30 seconds, the total point is fixed as 250 * 30

I use addPoint in loop (250 times) when data generated per second, unfortunately, highcharts seems to be hang, no line showed, instead, the browse can't be clicked at all. For short loop, such as 10 times, it seems to be OK

for (var i = 0; i < 250; i  ) chart.series[0].addPoint(p, true, true);

How can I refresh the line chart with delta data (250 new point) per second? I think setData is better than addPoint, but how can I append the new data list to existing data list in chart and shift the old points over 250 * 30

Thanks very much for your kindly help !

CodePudding user response：

You don't need to redraw the chart after every add point operation. It is much better to do it after the whole set:

    for (let i = 0; i < 300; i  ) {
        chart.series[0].addPoint(data, false);
    }

    chart.redraw();

Live demo: http://jsfiddle.net/BlackLabel/n0x9sjz7/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#addPoint