Show time of day on Google annotated time line chart - google-visualization

Question

I am trying to use the Google charts api to create line charts that have datetimes on the x axis and values on the other. Generally these will only be for a 48 hour period, so I really need to show the times of day on the x axis as well as the days.
Does anyone know how to achieve this please?
Alternatively can anyone suggest another Javascript chart api that would allow this please?

Answer 1

The AnnotatedTimeline charts are old and outdated; you can replicate 95% of the functionality using a LineChart with "annotation" and "annotationText" column roles and a ChartRangeFilter. The LineCharts support using datetimes.

Answer 2

I'm using morris.js on a temperature time series.
Would like to see other suggestions.

Answer 3

#asgallant is right. A sample of what it would look like can but seen in Google Code Playground and pasting this script:
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Time');
data.addColumn('number', 'Count');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addRows([
[new Date(2013, 0, 31, 19, 30), 1, 'A', 'Event 1'],
[new Date(2013, 1, 2, 20, 30), 2, 'B', 'No event'],
[new Date(2013, 1, 7, 18, 30), 2.5, 'C', 'No event'],
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10}}
);
}