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".