Adding data using Highcharts (real-time update schedule)

Question

In terms of efficiency using Highcharts. If the server sends arrays of points (about 5000 at a time). Is it more efficient to use the addPoint method and add each point? Or contact the previous array with a new cartridge and call redraw ()

• option 1:

for(let point in newData) series.addPoint(point, redraw = false)

• option 2:

oldData = oldData.concat(newData)

Do Highcharts display all points or only a new part?

Answer 1

As @wergeld suggested, I tried both options.

The data looks like this: [{x:1, y:2, step: 1}, {x:2, y:3, step: 2}...] , and I’ve earned the same data size a couple of times, to get the average value.

Option 1 (addPoint)

The code looks like this:

newData.forEach(el=> chart.series[0].addPoint(el, false, false, true)) chart.redraw();

And the results:

  DataSize | Seconds ------------------- 877 | 0.5 8770 | 1.5 17540 | 8.5 87700 | 563 

Option 2 (setData / concat)

The code looks like this:

chart.series[0].setData(oldData.concat(newData))

And the results:

  DataSize | Seconds ------------------- 877 | 0.5 8770 | 1.85 17540 | 3.4 87700 | 15 175400 | 25 877000 | 190 

Conclusion

Thus, when the data size becomes more than 10 thousand per piece of data, the addPoint method becomes much slower.