Show time of day on Google annotated time line chart

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