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);

Jamboree

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.

Misguided

I guess, the answer works for the code in question, however both approaches don't work for JSON-tables: the format change is just ignored... – Mcduffie

Answer 2

You can simply pass this in your options,

hAxis: {
        title: 'Time of day',
        format: 'hh:mm a'
    }

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450,
        hAxis: {format:'hh:mm a'}
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   
 <div id="chart_div"></div>

   

Aime