Highcharts doesn't display series with lots of data points

13
votes

I have a chart that I would like to display based on a date range from the user. This particular chart has a data point for every 15 minutes. So there can be a lot of data points for each series if a users selects a large date range. Here is a couple of examples:

In the first example the chart does display. In the second example the chart does not display. There is a Highstock demo (52,000 points with data grouping) that works with a lot of data points. I have tried to change the above charts to a highstock chart and still have the same results.

What can I do to fix this?

2
highchartshighstock
Have you tried to change dataGrouping's units ? – Ricardo Alvaro Lohmann
I have actually. But if the user zooms in, I would want the grouping to be applicable to the scope. I.e. If the chart is showing a lot of data and grouped at daily intervals. If the users zooms into a day, I want the grouping to change to 15 minute intervals. Looking at the highstock example above, they are using server calls to populate the graph based on the timespan. I may have to figure out how to get Loading working in an ASP.NET MVC 3 environment. – Linger

2 Answers

25
votes

This is due to the turbo threshold option:

"When a series contains a data array that is longer than this, only one dimensional arrays of numbers, or two dimensional arrays with x and y values are allowed. Also, only the first point is tested, and the rest are assumed to be the same format. This saves expensive data checking and indexing in long series."

It is set to 1000 points by default. Your chart is not rendering because each point in your series is an object and their number is greater than the threshold.

Here's a jfFiddle demonstrating your plot working with the threshold set to 2000.

Here's the modified section of code: 

plotOptions: {
     spline: {
     turboThreshold: 2000,
    ...

Another solution would be to encode your series data in a 2-d array instead of having each point represented by and object with x-y properties.

0
votes

a workaround for turboThreshhold is something like this if you generation your response with PHP:

                    if(count($responseObj) > 1000){
                    $modolo = round(count($responseObj) / 1000);
                    for($i = count($responseObj)-1; $i >= 0 ; $i--){
                        if(($i % $modolo) != 0){
                            unset ($responseObj[$i]);
                        }
                    }
                    $responseObj = array_merge($responseObj);
                }