JSFiddle - React, Tailwind, and code Playground

by Ramakrishna P

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="mouseoverdiv" style="height: 400px;"></div>

JavaScript

google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
	  data.addColumn('string','Date');
	  data.addColumn('number','Messages');
	  data.addRows([
      ['01-29-15', 3],
		 ['01-30-15', 3],
		 ['01-31-15', 6],
		  ['02-01-15', 3],
		 ['02-02-15', 3],
		 ['02-03-15', 4],
		 ['02-04-15', 6],
		  ['02-05-15', 6],
		 ['02-06-15', 47079],
		 ['02-07-15', 8],
		 ['02-08-15', 11],
		  ['02-09-15', 5],
		 ['02-10-15', 3],
		 ['02-11-15', 543],
		 ['02-12-15', 1000]
    ]);

  
      var options = {
        title: "Total Messages sent",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
	  
      var chart = new google.visualization.ColumnChart(document.getElementById("mouseoverdiv"));
      chart.draw(data, options);
  }