How to handle HighCharts zooming with large data sets

Question

I have a HighCharts chart and am displaying a trend that has a value every minute. So in a given day I will have 1440 data points, because 24 hours = 1440 minutes.

This is fine when I am displaying one or two days of data. But if I am displaying 4 weeks I will have 40,000 data points. I can read this data from the server very quickly, but HighCharts takes several minutes to build the graph.

My proposed solution is to interpolate data on the server side so we will have 1000 points over a 4 week period, or one value every 43 minutes. Then, when the user zooms, use AJAX to read data from the server again.

Am I making a mess of this or is this what normally happens? Is there a way to make HighCharts do something like this for me (and quickly)? I have tried the HighCharts DownSample Plugin but the initial slowness (2-3 minutes to build the graph) remains.

Answer 1

In fact, you want to use Highstock, with dataGrouping . Demo here .

In case you can't use Highstock, then it may be hard. However, check this ticket - it's experimental plugin for Highcharts to use canvas for rendering huge amount of points. Of course IE6/7/8 is out of the discussion.

And regarding loading data on demand, check lazy loading article. Yes, it refers to Highstock, but should be possible to use the same solution in Highcharts. Demo here .