Adding annotations to a ColumnChart

This code uses a ComboChart to emulate a ColumnChart, and applies annotations to a hidden line within the ComboChart which shares the same data as the columns. This code was inspired by a post by Dezső Róbert on the Google Visualization API forum: https://groups.google.com/d/msg/google-visualization-api/1yWwsXV-Ysk/PMJsxe7tzjgJ

by cs3vigny

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
<br />
<br />
<div id="creativeCommons" style="text-align: center; width: 400px;"> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a>
    <br/><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add annotations to a ColumnChart</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Andrew Gallant</span> and inspired by Google Visualization API user Dezső Róbert is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>.</div>

JavaScript

google.load("visualization", "1", {
    packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({
        type: 'string',
        role: 'annotation'
    });

    data.addRows([
        ['Foo', 53, '53'],
        ['Bar', 71, '71'],
        ['Baz', 36, '36'],
        ['Cad', 42, '42'],
        ['Qud', 87, '87'],
        ['Pif', 64, '64']
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, 1, 2]);

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(view, {
        height: 400,
        width: 600,
        series: {
            0: {
                type: 'bars'
            },
            1: {
                type: 'line',
                color: 'grey',
                lineWidth: 0,
                pointSize: 0,
                visibleInLegend: false
            }
        },
        vAxis: {
            maxValue: 100
        },
        enableInteractivity: false
    });
}