Highstock is only showing series when user zooms in

Question

I'm coming accross an unusual problem with highcharts. I'm using stockcharts to render a chart with multiple series. Each series has a lot of points 100 or more. This is the code that generates the chart.

$('#chart').highcharts('StockChart', {
    chart: {
        zoomType: 'x',
        alignTicks: false,
        backgroundColor: 'rgba(255, 255, 255, 0.1)'
    },
    title: {
        text: 'Google SERP Chart'
    },
    credits: {
        enabled: false
    },
    rangeSelector: {
        buttons: [{
            type: 'hour',
            count: 1,
            text: '1h'
        }, {
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'month',
            count: 1,
            text: '1m'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false, // it supports only days
        selected: 4 // all
    },

    xAxis: {
        type: 'datetime',
        title: {
            text: null
        },
        lineWidth: 2,
        minRange: 3600 * 1000,
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%a %d %b', this.value);
            }
        }
    },
    yAxis: {
        tickInterval: 1,
        title: {
            text: 'Ranking Position'
        }

    },
    series: series
});

This is the graph that I'm getting. Notice that only 1 series is graphed and the other series are not graphed. I have been trying to do something like this http://www.highcharts.com/stock/demo/compare Could it be because there are to many points on the graph? I tried doing dataGrouping but that didn't work.

Any ideas what might be causing this?

Here is a JSFiddle replicating the problem

http://jsfiddle.net/4kz7r/

Answer 1

Ok i figured it out. I had to set the groupingWidthPixels higher. Here is the fiddle fix.

series: {
    dataGrouping: {
        groupPixelWidth: 50
    }
}
}

http://jsfiddle.net/rHC8h/ :)