JSFiddle - React, Tailwind, and code Playground

by Marcelo Leiva

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart_div"></div>

JavaScript

function drawCharts () {
    var data = new google.visualization.DataTable();
    data.addColumn('datetime', 'Date and time');
    data.addColumn('number', 'Value');
    
    // add 100 rows of pseudo-random-walk data
    var val = 50, hour, minute;
    for (var i = 0; i < 100; i++) {
        val += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
        if (val < 0) {
            val += 5;
        }
        else if (val > 100) {
            val -= 5;
        }
        data.addRow([new Date(2013, 0, 1, i), val]);
    }
    
    // the time entered was supposed to be UTC time, but is entered as local time
    // this function updates the Date objects to the proper UTC time
    function localDateToUTCDate (d) {
        d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
    }
    for (var i = 0; i < data.getNumberOfRows(); i++) {
        data.setValue(i, 0, localDateToUTCDate(data.getValue(i, 0)));
    }
    
    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        dataTable: data,
        options: {
            height: 400,
            width: 600,
            vAxis: {
                minValue: 0,
                maxValue: 100
            }
        }
    });
    chart.draw();
}
google.load('visualization', '1', {packages:['controls'], callback: drawCharts});