JSFiddle - React, Tailwind, and code Playground
by Joviano Dias
HTML
<script src="https://www.google.com/jsapi"></script>
<body>
<div id="linechart_material"></div>
</body>
JavaScript
function drawVisualization() {
var session_data = [["Date",{"role":"annotation"},"Value"],["2015-06-07",null,861],["2015-06-08",null,1381],["2015-06-09",null,2351],["2015-06-10",null,2125],["2015-06-11",null,1970],["2015-06-12",null,1745],["2015-06-13",null,1079],["2015-06-14",null,1087],["2015-06-15",null,2221],["2015-06-16",null,2176],["2015-06-17","Test ",1918],["2015-06-18",null,1826],["2015-06-19",null,1720],["2015-06-20",null,937],["2015-06-21",null,1094],["2015-06-22",null,2170],["2015-06-23",null,2085],["2015-06-24",null,1952],["2015-06-25",null,1865],["2015-06-26",null,1674],["2015-06-27",null,977],["2015-06-28",null,1005],["2015-06-29",null,2130],["2015-06-30",null,1913],["2015-07-01",null,1774],["2015-07-02",null,1891],["2015-07-03",null,1572],["2015-07-04",null,979],["2015-07-05",null,1024],["2015-07-06",null,2163],["2015-07-07",null,2041]];
for (var index = 0; index < session_data.length; index++) {
session_data[index][0] = new Date(session_data[index][0]);
}
var data = google.visualization.arrayToDataTable(session_data);
var chart = new google.visualization.ColumnChart(document.querySelector('#linechart_material'));
chart.draw(data, {
width: 1600,
height: 600,
annotations: {
stemColor: 'red'
},
annotation: {
1: {
style: 'line',
color: 'black'
},
2:{
style: 'line',
color: 'blue'
}
},
vAxis: {
gridlines: {
color: 'none'
},
baselineColor:...