Change to a 24 hour format for datetime data in Google Charts

Question

Im plotting data with javascript using the Google Charts API. The default format for datetime data view is the 12 hour am/pm format. How can I change the view to show a 24 hour format? An example of code is shown below, where the default datetime format is used:

var price_data = new google.visualization.DataTable();
         price_data.addColumn('datetime','Time');
         price_data.addColumn('number','Price [øre/KWh]');

price_data.add_row([new Date(2013,23,3,4,5),3])
price_data.add_row([new Date(2013,1,5,4,5),9])

var options = {
      title: 'Price'
    };

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);

Answer 1

You need to format the datetimes using a DateFormatter.

// format dates
// ex: "August 5, 2013 1:45 PM" formatted as "05/08/2013 13:45"
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);

You can format the axis labels by setting the hAxis.format option:

var options = {
    hAxis: {
        format: 'dd/MM/yyyy HH:mm'
    }
    title: 'price'
};

The date formats support most of the ISO date formatting patterns.