Displaying hours and minutes on x-axis with Highcharts

Question

I want to output the following data (time, battery level) in a area chart:

data: [
    [08.15, 14.8],
    [08.20, 13.9],
    [08.25, 12.8],
    [08.30, 11.8],
    [08.35, 13.9],
    [08.40, 14.1],
    [08.45, 13.9],
    [08.50, 14],
    [08.55, 14],
    [09.00, 14.1],
    [09.05, 14.4]
]

the x-axis should start at 00.00 am AM 00.00 PM, a whole day.

Unfortunately I do not understand which options to use, when I review the API. What I get now is an x-axis that goes from 8.00~8.55,8.60,8.65 ~ 9.00. So it uses a decimal system instead of a minute system.

How do I configure that the line should consist of 24 hours with 60 minutes?

With the current data, the chart would be kind of empty, only having points around 8.00am to 9.00 am.

I hope someone can help me on my way.

Thanks,

Mattijs

Answer 1

you can try this code to make x-axis in 12hour time format

xAxis: {
    title: {
        enabled: true,
        text: 'Hours of the Day'
    },
    type: 'datetime',

    dateTimeLabelFormats : {
        hour: '%I %p',
        minute: '%I:%M %p'
    }
},

Also for "tooltip" try this:

tooltip: {
    formatter: function() {
        return ''+
                "" +
                'Time: '+ Highcharts.dateFormat('%I:%M %p', this.x);
    }
},

And of course series would be:

series: [{
        data: [
            [Date.UTC(2013, 3, 22, 1, 15), 12.7], 
            [Date.UTC(2012, 3, 24, 3, 20), 13.5], 
            [Date.UTC(2012, 2, 22, 2, 25), 18.8]
        ]
    }]

Hope it could solve your problem. Thanks.

Answer 2

Highcharts has a built in way of plotting times or dates as the xaxis. Typically, in this case, your data would use a time value in milliseconds, and highcharts will plot it accordingly (see this example).

If you wanted to have a 24 hour day including your data, it might look something like this:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        type: 'datetime' //ensures that xAxis is treated as datetime values
    },

    series: [{
        data: [
            [Date.UTC(2012, 5, 22, 8, 15), 14.8], 
            [Date.UTC(2012, 5, 22, 8, 20), 13.9], 
            [Date.UTC(2012, 5, 22, 8, 25), 12.8]
            //and so on...
        ]
    }]
});

You could then do something like use a custom xAxis formatter or date formatter to display the labels however you want.