Appending Data with Highcharts (real time updating chart)

Question

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

• option 1:

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

• option 2:

oldData = oldData.concat(newData)

Do Highcharts re-render the all the points or just the new portion?

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 ran the same data size for a couple of times to get an average.

Option 1 (addPoint)

Code looks like:

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

And the results are:

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

Option 2 (setData / concat)

Code looks like:

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

And the results are:

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

Conclusion

So clearly, when the size of the data is getting larger than 10k per chunk of data, the addPoint method is getting significantly slower.