Highcharts Date/Time and X-Axis

Question

I am looking for a simple example of how to make the time display in one hour increments for a 24 hour period, a la: 8 AM, 9 AM, etc... along the x-axis. The data to be charted will be as follows [time, meter-reading]. All of my attempts to date have not worked.

Please advise if further details need to be provided.

Answer 1

After playing with an official example and the documentation, I found a way to get intervals every two hours but you can get easily intervals every hour.

Here are the options you have to define in your Highcharts creation:

$(function () {
    $('#container').highcharts({
        chart: { ... },
        title: { ... },
        subtitle: { ... },
        xAxis: {
            type: 'datetime',
            tickInterval: 3600 * 1000,
            ...
        },
        yAxis: { ... },
        tooltip: { ... },
        legend: { ... },
        plotOptions: { ... },
        series: [{
            ...
            pointInterval:  3600 * 1000,
            pointStart: Date.UTC(2006, 0, 01, 0, 0, 0, 0),
            data: [
                ...
            ]
        }]
    });
});

Playing with the tickInterval, pointInterval and pointStart options, you can obtain what you want.

Here is a live example of what I am talking about: http://jsfiddle.net/FxD58/1/

It works very well if you have 24 values in series (like the 24 hours in a day...)