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']});
       </script>
<button id="click">Click</button>
<button id="clear">Clear</button>
<div id="chart_div"></div>

JavaScript

var JSONObject = {
    cols: [
        {
        id: 'timestamp',
        label: 'TimeStamp',
        type: 'timeofday'},
    {
        id: 'cpuUse1',
        label: 'CPU1 Usage',
        type: 'number'},
    {
        id: 'cpuUse2',
        label: 'CPU2 Usage',
        type: 'number'}],
    rows: []
},
    it, options = {
        title: 'CPU Performance',
        width: 1000,
        height: 400,
        hAxis: {gridlines:{count: 10}}
    };

$(function() {

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


        // Create and draw the visualization.
        visualization = new google.visualization.LineChart(document.getElementById('chart_div'));
        visualization.draw(data, options);

    };

    var updateRows = function() {
        var currentTime = new Date(),
            hours = currentTime.getHours(),
            minutes = currentTime.getMinutes(),
            seconds = currentTime.getSeconds(),
            rand1 = Math.floor(Math.random() * 101),
        rand2 = Math.floor(Math.random() * 101);
        JSONObject.rows.push({
            "c": [{
                "v": [hours, minutes, seconds, 0]},
            {
                "v": rand1},
                 {
                "v": rand2}]
        });
        if(JSONObject.rows.length > 10)
        JSONObject.rows.splice(0,1);
        
       // 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);
    });

});