Using Google's annotated timeline in the Visualizations API, can you insert annotations regardless of data set?

Question

I can insert annotations on specific datasets on the graph but I wish to have multiple lines on the graph without associating the annotation with a specific line, but with a date instead.

Here is an example of what I want to do. Notice the bubbles appended to the x-axis and not a specific line on the graph.

I've read through the API and can't see an option like this but wondering if someone knows a way.

Thanks.

Answer 1

No experience, but my instant reaction was that you might try a series with the annotations attached with all zeros as the data - and exclude it from the legend?

Answer 2

If you don't mind using an SVG Line Chart with Annotations you can recreate this as well with more flexibility. If you set the Annotation column to immediately follow the X-axis values, the annotations will appear at the very bottom of the chart (on the axis) and not be attached to any category. Here is a sample:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number','Day');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addColumn('number', '.DJI');
  data.addColumn('number', '.INX');
  data.addColumn('number', '.INIC');
  data.addRows([
    [1, null, null, 1000, 400, 300],
    [2, 'A', 'did stuff', 1170, 460, 400],
    [3, 'B', 'did more stuff', 660, 1120, 540],
    [4, null, null, 1030, 540, 620],
    [5, 'C', 'stopped stuff', 1070, 600, 700]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {focusTarget: 'category',
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},}
          );
}

This ends up looking like this: