JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
            google.load('visualization', '1.0', {'packages':['corechart', 'gauge']});
       </script>
<button id="click">Click</button>
<button id="clear">Clear</button>
<div id="chart_div"></div>

JavaScript

var JSONObject = {
    cols: [
        {
        id: 'memory',
        label: 'Memory',
        type: 'number'},
    {
        id: 'cpu',
        label: 'CPU Usage',
        type: 'number'}],
    rows: []
}, it;
$(function() {

    function drawChart() {
        var data = new google.visualization.DataTable(JSONObject);

/*    var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 60],
          ['CPU', 55],
          ['Network', 68]
        ]);
*/
        var options = {
            width: 400,
            height: 200,
            redFrom: 90,
            redTo: 100,
            yellowFrom: 75,
            yellowTo: 90,
            minorTicks: 10
        };

        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        chart.draw(data, options);
    }

    var updateRows = function() {
        var rand1 = Math.floor(Math.random() * 101),
            rand2 = Math.floor(Math.random() * 101);
        JSONObject.rows.splice(0,1);
        JSONObject.rows.push({
            "c": [{
                "v": rand1},
            {
                "v": rand2}]
        });
       
        // console.log(seconds + ' ' + rand);
        drawChart();
    };

    $('#click').click(function() {
        //google.setOnLoadCallback(drawChart);
        it = setInterval(updateRows, 1000);
        event.preventDefault();

    });
    $('#clear').click(function() {
        $('#chart_div').empty();
        clearInterval(it);
    });

});