Annotation Chart Example

An example of a Google Annotation Chart.

by Kamal Kumawat

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id='chart_div' style='width: 900px; height: 500px;'></div>

JavaScript

google.charts.load('current', {'packages':['annotationchart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
      var jsonData = JSON.parse('[["Date","element 1 "],["2019-01-01T07:02:00.000Z",1],["2019-01-11T18:30:00.000Z",6],["2019-01-12T18:30:00.000Z",8],["2019-01-13T18:30:00.000Z",10],["2019-01-14T21:55:00.000Z",15],["2019-01-15T19:30:00.000Z",18],["2019-02-06T07:33:00.000Z",20],["2019-02-14T07:33:00.000Z",31],["2019-02-25T03:11:00.000Z",45],["2019-02-26T20:28:00.000Z",66],["2019-03-25T03:10:00.000Z",45]]')
       dataTable = new google.visualization.DataTable();
       dataTable.addColumn("date", jsonData[0][0]);
       dataTable.addColumn("number", jsonData[0][1]);
       jsonData.forEach((element,key) => {
       	if(key>0){
        	jsonData[key][0] = new Date(element[0]);
        	dataTable.addRows(jsonData[key]);
        	
        }
       });

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

        var options = {
          displayAnnotations: true
        };

        chart.draw(dataTable, options);
      }