Why doesnt the annotation or tooltip appear on this series

Question

I have setup a line chart using google visualization. In the chart data table, I have added an annotation and tooltip column as below.

data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});

For 4 of the data rows, I have specified a value for annotation, but it only seems to work for two of those four data rows.

The easiest way to see the issue would be to go here: https://code.google.com/apis/ajax/playground/?type=visualization#line_chart

Replace all of the code with the below and then hit "Run code"

function drawVisualization() {

// Create the data table.
var data = new google.visualization.DataTable();
//add columns
data.addColumn('datetime', 'TheDates');data.addColumn('number', 'Metric A');
data.addColumn('number', 'Metric B');data.addColumn('number', 'Metric C');
data.addColumn('number', 'Metric D');data.addColumn('number', 'Metric E');
data.addColumn('number', 'Metric F');data.addColumn('number', 'New Year');
data.addColumn('number', 'Term Start');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});

data.addRows([[new Date(2014,4,29), 1, 5, 7, 2, 2, 0, null, null, null, null], 
             [new Date(2014,4,14), 0, 4, 7, 2, 0, 0, null, null, null, null], 
             [new Date(2013,10,24), 0, 2, 0, 0, 0, 0, null, null, null, null], 
             [new Date(2013,4,23), 0, 0, 0, 0, 0, 0, null, null, null, null], 

             [new Date(2013,9,1), null, null, null, null, null, null, null, 0, null, 'Term Start (01/09/2013)'], 
             [new Date(2013,9,1), null, null, null, null, null, null, null, 10, 'Term Start', 'Term Start (01/09/2013)'], 

             [new Date(2014,1,1), null, null, null, null, null, null, 0, null, null, 'New Year (01/01/2014)'], 
             [new Date(2014,1,1), null, null, null, null, null, null, 10, null, 'New Year', 'New Year (01/01/2014)']
           ]);

// Set chart options
var options = {
  'title': '',
  'width': 800,
  'height': 500,
  'seriesType': "line",
  'vAxis.maxValue': 10,
  'vAxis.minValue': 0,
  'pointSize': 3,
  'tooltip.isHtml': true,
  series: {6:{'visibleInLegend': false, 'pointSize': 0, 'color': '#000000'}, 7:{'visibleInLegend': false, 'pointSize': 0, 'color': '#000000'}}
};

 // Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('visualization'));
chart.draw(data, options);

}

After running, you will see two vertical lines. These are two series made up of two data points each (from data rows 5, 6, 7 and 8). The four points should all have either a custom tooltip or a custom tooltip and an annotation, but it only works for the one marked "Term start" and not the one which should be marked "New Year".

Answer 1

Each data series that you want to annotate or change the tooltips for needs its own annotation column and/or tooltip column:

var data = new google.visualization.DataTable();
//add columns
data.addColumn('datetime', 'TheDates');
data.addColumn('number', 'Metric A');
data.addColumn('number', 'Metric B');
data.addColumn('number', 'Metric C');
data.addColumn('number', 'Metric D');
data.addColumn('number', 'Metric E');
data.addColumn('number', 'Metric F');
data.addColumn('number', 'New Year');
// annotation and tooltip columns for "New Year"
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Term Start');
// annotation and tooltip columns for "Term Start"
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'tooltip'});