We're currently using Highcharts to display a high volume of data in a real-time line chart (a time series chart), and it's causing issues with the Chrome browser tab crashing after a relatively short period of time displaying data (about 20 mins). My question is what approach would be be best to use to ensure that the chart performs well and is reliable?
We poll data from various technical instruments. We then use a Highchart that displays new data every second, for a number of instruments, and the chart can span a period of up to a maximum 24 hrs. After about 20 minutes, the browser tab in Chrome that's displaying the line chart hangs. There are no error messages, although at some stages we have seen the message "Error 'Paused before potential out-of-memory-crash'". It seems to be due to the CPU maxing out, and memory use of the browser tab is continually increasing over the timescale of the time series (presumably until a maximum is reached, as we discard 'expired' data that's now beyond the current timescale of the chart).
The way we're implementing the real-time chart is by continuously updating the options I've tried a couple of different approaches to optimise the real-time chart however that hasn't fixed the problem. The way we update the x-axis is like this (passing in the minimum and maximum values for the current time period to be displayed on the x-axis, so that the chart is always animating to show a moving time window). For example, the chart may continuously display a current 24hr window up to the present moment:
chartObject.xAxis[0].setExtremes( ... )
The way we set the chart data is by initialising the chart with a buffered set of data and using something like this to set the data for each series:
chartObject.series.setData(data, false);
And then when new data is received, we delete any expired data (data readings for a time that's below the chart minimum), and append new data like this:
Append: this.chartObject.series.addPoint(latestDataPoint, false);
Remove: this.chartObject.series.removePoint(0, false);
This way this is being implemented, we are successfully appending and removing data (the data size isn't growing). Everything else in our implementation is optimised (there are no expensive redundant loops or anything else that's sub-optimal). For a chart that displays a 24hr time period with new data every second, the browser tab in Chrome fails after about 20 minutes.
Should we be implementing the chart as described or do we need a different approach for displaying this volume of data? Will the boost module guarantee that the chart performs reliably? Or do we need to use a Highstock chart instead of a Highchart? This is taking up a lot of time and we need an approach that will guarantee a successful outcome.