Google Chart Line Chart hours and minutes

Question

I'm trying to use Google's chart API to show a line chart.
I have created a data table with two columns, a date and a numeric value. The line is displayed correctly but the labels on the X axis are missing. All the data are in the same day, but at different hours. If I edit the dates in order to spread them over different days everything works.
I need to focus my chart in one day only and show hours and minutes on the X axis.
How can I do that?

Thanks.

Answer 1

Usually comes down to how you pass the data. With arrayToDataTable your dates are just strings. If you instantiate a JS date object and build the dataTable you should get better results. This code works for me (see it live):

function drawVisualization() {

var data = new google.visualization.DataTable();

data.addColumn('datetime', 'Time of Day');
data.addColumn('number', 'Some Measurement');

data.addRows([
  [new Date(2012,10,3,11,30,0), 12],
  [new Date(2012,10,3,11,45,0), 2],
  [new Date(2012,10,3,12,1,0), 16],
  [new Date(2012,10,3,12,15,0), 3],
  [new Date(2012,10,3,12,30,0), 12],
  [new Date(2012,10,3,12,45,0), 7]
]);


new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {curveType: "function",
              width: 500, height: 400,
              vAxis: {maxValue: 10}}
      );
}

I used to be a fan of Google Visualization but have been burned too many times by their unannounced updates. It also has a lot of limitations. Check out Dygraph which handles time series very well.