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 Robert Tome

HTML

<script src="https://www.google.com/jsapi"></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, 'Foo text'],
    ['Bar', 71, 'Bar text'],
    ['Baz', 36, 'Baz text'],
    ['Cad', 42, 'Cad text'],
    ['Qud', 87, 'Qud text'],
    ['Pif', 64, 'Pif text']
  ]);

  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,
    backgroundColor : 'yellow',
    colors: ['red','green',''],
    series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
        lineWidth: 0,
        pointSize: 0,
        visibleInLegend: false
      }
    },
    vAxis: {
      maxValue: 100
    }
  });
}