JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<input type="button" onclick="drawDerp()" value="draw chart" />
<div id="chart" style="height:600px;"></div>

JavaScript

google.load("visualization", "1.1", {packages: ["corechart"]});
var x = 0
var max = 0
function drawChart(a) {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        ['January', 200, 150],
        ['February', 1170, 460],
        ['March', 660, 1120],
        ['April', 1030, 540],
        ['May', 1030, 540],
        ['June', 1030, 540]
    ]);
	max = data.getNumberOfRows()
    var options = {
            focusTarget:'category',
			tooltip:{
             	trigger:'selection'   
            }
        };

    var derp=[]
    derp[0] = {row:a, column:null}
    var chart = new google.visualization.LineChart(document.getElementById('chart'));
    
    chart.draw(data, options);
    
    chart.setSelection(derp);
    console.log(chart.getChartLayoutInterface().getYLocation(data.getValue(0,1)));
}
function drawDerp(){
	   drawChart(x);
    if(x == max){
        x = 0;
    }else{
    	x++;
    }
}