Ok, so I have a Highcharts chart displaying data correctly from a database; but the moment I zoom in, the chart goes blank?

Here is the chart HTML:

<div class="content" id="content"></div>

Here is the Javascript code for the chart:

$(function () {
        $('#content').highcharts({
            chart: {
                zoomType: 'x',
                backgroundColor:'transparent'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Players Online'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Drag your finger over the plot to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 3600000, // 1 hour
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Players Online'
                }
            },
            tooltip: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    allowPointSelect: false,
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1,
                            enabled: false
                        }
                    }
                }
            },
            series: [{
                type: 'area',
                data: [<?php echo join($data, ',') ?>]
                //This is displayed correctly in Javascript, so the issue isn't in my PHP
            }]
        });
    });

Am I doing something stupid here? Can't seem to find the cause of the chart going blank. :/

Ok, so I have a Highcharts chart displaying data correctly from a database; but the moment I zoom in, the chart goes blank?

Here is the chart HTML:

<div class="content" id="content"></div>

Here is the Javascript code for the chart:

$(function () {
        $('#content').highcharts({
            chart: {
                zoomType: 'x',
                backgroundColor:'transparent'
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Players Online'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Drag your finger over the plot to zoom in'
            },
            xAxis: {
                type: 'datetime',
                maxZoom: 3600000, // 1 hour
                title: {
                    text: null
                }
            },
            yAxis: {
                title: {
                    text: 'Players Online'
                }
            },
            tooltip: {
                enabled: false
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    allowPointSelect: false,
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1,
                            enabled: false
                        }
                    }
                }
            },
            series: [{
                type: 'area',
                data: [<?php echo join($data, ',') ?>]
                //This is displayed correctly in Javascript, so the issue isn't in my PHP
            }]
        });
    });

Am I doing something stupid here? Can't seem to find the cause of the chart going blank. :/

• javascript
• html
• charts
• highcharts

Share Improve this question Follow edited Jul 29, 2013 at 12:46 asked Jul 25, 2013 at 17:13 user2284433user2284433 5

• 1 possible duplicate stackoverflow./questions/11231398/… – svillamayor Commented Jul 25, 2013 at 17:24
• Have you sorted data by x ascending? Can you attach your Data object? – Sebastian Bochan Commented Jul 26, 2013 at 11:23
• @SebastianBochan I linked the website where the chart is used so you can see the data in it live. – user2284433 Commented Jul 27, 2013 at 20:30
• I opened your example and zoom via x works properly, which browsre do you use? – Sebastian Bochan Commented Jul 29, 2013 at 8:59
• @SebastianBochan Ah, I actually found the solution to it myself after hunting through the Highcharts API documentation. I've added the answer. – user2284433 Commented Jul 29, 2013 at 12:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I worked out what the issue was after hunting through the Highcharts API documentation.

There is a property of all chart types that I'm aware of called 'cropThreshold', here is the link to the Highcharts API explaining what this is in detail: http://api.highcharts./highcharts#plotOptions.area.cropThreshold

But in summary; if you display more than 300 points (cropThreshold defaults to 300), then when zooming in, your chart will go blank. To correct this, you can add the following to your chart configuration:

area: {
           cropThreshold: 500 <- //Vary this. I display 500 points on my chart in
                                 //total and so a value of 500 allows zooming to
                                 //work at all levels. This will vary for you
                                 //depending on how many points you plot.
      }