As stated in my comment you can use the annotation role to do this.
Your original code:
var data = google.visualization.arrayToDataTable([
['time', 'value'],
['12:00', 1],
['13:00', 5],
['14:00', 8],
['15:00', 12],
['16:00', 11],
['17:00', 15],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {});
You need to add two columns -- one for the annotation marker, one for the annotation text. Assuming you want two comments at 14:00 and 16:00 for the sake of example:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'time');
data.addColumn('number', 'value');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
['12:00', 1, null, null],
['13:00', 5, null, null],
['14:00', 8, 'A', 'This is Point A'],
['15:00', 12, null, null],
['16:00', 11, 'B', 'This is Point B'],
['17:00', 15, null, null],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {});
}
This is the result:
![Sample Annotation](https://cdn.statically.io/img/i.sstatic.net/jFArk.png)
To add asgallant's solution for adding points to the chart, you can do as follows:
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'time');
data.addColumn('number', 'value');
data.addColumn('number', 'points');
data.addColumn({type: 'string', role:'annotation'});
data.addColumn({type: 'string', role:'annotationText'});
data.addRows([
['12:00', 1, null, null, null],
['13:00', 5, null, null, null],
['14:00', 8, 8, 'A', 'This is Point A'],
['15:00', 12, null, null, null],
['16:00', 11, 11, 'B', 'This is Point B'],
['17:00', 15, null, null, null],
]);
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
series: {
0: {
// set any applicable options on the first series
},
1: {
// set the options on the second series
lineWidth: 0,
pointSize: 5,
visibleInLegend: false
}
}
});
}
Here is the result of that:
![asgallant sample](https://cdn.statically.io/img/i.sstatic.net/28UVU.png)