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 Kamal Kumawat

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: ["annotationchart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Name');
  data.addColumn('number', 'Value');
  
  data.addRows([
                        [new Date("2019-11-04T11:43:06.000Z"), 11],
                        [new Date("2019-11-04T11:44:06.000Z"), 10],
                        [new Date("2019-11-04T11:45:06.000Z"), 10],
                        [new Date("2019-11-04T11:46:06.000Z"), 15],
                        [new Date("2019-11-04T11:47:06.000Z"), 14],
                        [new Date("2019-11-04T11:48:06.000Z"), 12],
                        [new Date("2019-11-04T11:49:06.000Z"), 9],
                        [new Date("2019-11-04T11:50:06.000Z"), 7],
                        [new Date("2019-11-04T11:51:06.000Z"), 6],
                        [new Date("2019-11-04T11:52:06.000Z"), 8],
                        [new Date("2019-11-04T11:53:07.000Z"), 6],
                        [new Date("2019-11-04T11:54:06.000Z"), 15],
                        [new Date("2019-11-04T11:55:06.000Z"), 15],
                        [new Date("2019-11-04T11:56:06.000Z"), 12],
                        [new Date("2019-11-04T11:57:06.000Z"), 12],
                        [new Date("2019-11-04T11:58:06.000Z"), 12],
                        [new Date("2019-11-04T11:59:06.000Z"), 10],
                        [new Date("2019-11-04T12:00:06.000Z"), 12],
                        [new Date("2019-11-04T12:01:06.000Z"), 6],
                        [new Date("2019-11-04T12:02:07.000Z"), 8]]);

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

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

  chart.draw(data, {
    height: 400,
    width: 600,
    /* series: {
      0: {
        type: 'bars'
      },
      1: {
        type: 'line',
        color: 'grey',
       ...