CODEWITHSUNDEEP
google-visualizationlinechart
AnthonyVader
AnthonyVader

Reputation: 49

Show time of day on Google annotated time line chart

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?

Upvotes: 2

Views: 2288

Answers (3)

augustomen
augustomen

Reputation: 9739

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

Upvotes: 0

asgallant
asgallant

Reputation: 26340

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.

Upvotes: 4

hendry
hendry

Reputation: 10813

Morris.js drawing an annotated time chart

I'm using morris.js on a temperature time series.

Would like to see other suggestions.

Upvotes: 0

Related Questions