CODEWITHSUNDEEP
javascripthighchartsreal-time
mg1075
mg1075

Reputation: 18155

Highcharts: rapid, real-time data updates in high volume line charts using boost

Scenario:

  1. Using Highcharts normal charts, not Highstock
  2. At least 4 separate charts that are each line charts
  3. Each chart displays a maximum of 5,000 points in a 10 second window
  4. Data comes via websocket at 250 points per second, although rate and volume of how the data comes (e.g., 50 points per 200 milliseconds vs 1 point per 4 milliseconds) can be optimized to fit how best to work with Highcharts
  5. Old points get shoved out after getting outside of the 10 second window

Questions:

  1. Is it correct to assume this is an ideal scenario for using the Highcharts boost module to improve performance? Or would the rapidity of data updates not play well with boost?
  2. Is there an existing Highcharts example fiddle or pen that approximates the scenario I've described (e.g., using mock data generated on the client-side) and uses the boost module?
  3. Are there any other recommendations you can make for implementing here with Highcharts?

Upvotes: 1

Views: 1168

Answers (1)

Kamil Kulig
Kamil Kulig

Reputation: 5826

I've prepared a simple performance test. I update a chart with 5000 random generated points by using setData function every 3 seconds. You can find the explanation of the arguments passed to this function here: http://api.highcharts.com/highcharts/Series.setData

Performance with boost module: http://jsfiddle.net/kkulig/7u6ozqg8/

Output on my PC:

time with boost: 189.785888671875ms
time with boost: 109.576904296875ms
time with boost: 159.59326171875ms
time with boost: 75.766845703125ms
time with boost: 132.65625ms
time with boost: 174.887939453125ms
time with boost: 41.648193359375ms
time with boost: 54.340087890625ms
time with boost: 72.6669921875ms

Performance without boost module: http://jsfiddle.net/kkulig/gLehoqp5/

Output on my PC:

time without boost: 211.60595703125ms
time without boost: 146.89501953125ms
time without boost: 180.163818359375ms
time without boost: 156.8388671875ms
time without boost: 248.77197265625ms
time without boost: 149.34130859375ms
time without boost: 142.1357421875ms
time without boost: 189.8759765625ms
time without boost: 203.60009765625ms

Answers

  • Question 1 & 2 - as the above examples show the boost modules seems to work well for this scenario.
  • Question 3 - always be aware of how the function that you use for updating your chart works (read the description from the API).

Upvotes: 1

Related Questions