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

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>

JavaScript

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, 'Foo text'],
        ['Bar', 71, 'Bar text'],
        ['Baz', 36, 'Baz text'],
        ['Cad', 42, 'Cad text'],
        ['Qud', 87, 'Qud text'],
        ['Pif', 64, 'Pif text']
    ]);
    
    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    
    chart.draw(data, {
        height: 400,
        width: 600
    });
}
google.load("visualization", "1", {packages: ["corechart"], callback: drawChart});