JSFiddle - React, Tailwind, and code Playground

by ken tsai

HTML

<script src="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqplot/1.0.4/jquery.jqplot.min.css">
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button>Start Updates</button>

JavaScript

/* store empty array or array of original data to plot on page load */

var storedData = [3, 7];

/* initialize plot*/

var plot1;
renderGraph();

$('button').click( function(){
    doUpdate();
    //$(this).hide();
});

function renderGraph() {
    if (plot1) {
        plot1.destroy();
    }
    plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {showMarker:false}, axes: {
        xaxis: {min:(storedData.length-30), max:(storedData.length+5)}, yaxis: {min:0, max:10}}});
}

var newData = [];
 for(var i=0; i<300;i++){
    newData[newData.length] = new Number(5+5*Math.cos(i/5));
}

function doUpdate() {
    if (newData.length) {
        var val = newData.shift();
        
            var newVal = new Number(val); /* update storedData array*/
            storedData.push(newVal);
            renderGraph();
            
            setTimeout(doUpdate, 1)

    } else {
        log("All Done")
    }
}

function log(msg) {
$('body').append('<div>'+msg+'</div>')
}