grouping date in Highcharts if the date range is too big

Question

I am using Highcharts to show some statistic for my customer but I have problem when the customer select long data range

here is the first image for my highchart in the default view

and if I select too long date range here is the result

here is my code

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 50,
                marginBottom: 80,
                dataGrouping: {
                    enabled: true
                }
            },                  
            title: {
                text: 'Visits Statistics',
                x: -20 //center
            },
            credits: {
                text: '',
                href: ''
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: [<?php print $categories; ?>],
                labels: {
                    rotation: -45,
                    align: 'right',
                    style: {
                        fontSize: '10px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Visits'
                },
                min: 0,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +' '+'</b><br/>'+ this.y +'Hit';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 10,
                borderWidth: 0
            },
            series: [{name:'from 2011-09-1',data: [<?php print $visits; ?>]}]
        });
    });
});

Answer 1

Highcharts can automatically manage time values in the x-Axis, provided that your chart is configured correctly. The problem in your case is that you've told Highcharts to use your categories, and it shows all of the categories.

To set up your chart to avoid this, you'll need to do two things:

• Set the x-Axis type to datetime
• Make sure that your data is formatted correctly
  • Or, use pointStart and pointInterval if you can't mess around with the data.

Using your example:

// ...
xAxis: {
    //remove categories and set type as 'datetime'
    type: 'datetime',
    labels: {
        rotation: -45,
        align: 'right',
        style: {
            fontSize: '10px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
},
// ...
series: [{
    name:'from 2011-09-1',
    // since you probably don't want to change your data, we leave it alone...
    data: [<?php print $visits; ?>],
    // ... and instead, set `pointStart` and `pointInterval`
    pointStart: Date.UTC(2011, 8, 1), // September 1, 2011
    pointInterval: 24 * 3600 * 1000 // each point is 1 day (measured in milliseconds)
}]