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.
Best Answer
Here is detailed step-by-step guide: http://peltiertech.com/Excel/Charts/DummySeries.html#AddLine
My own sample file shared as an example: https://www.dropbox.com/s/8uyxqpiq2blv6t9/Charts_H-V_Lines.xlsx
Hope that's somehow helpful.