JSFiddle - React, Tailwind, and code Playground

by dekkard

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">
<script src="http://trainingandfitnessblog.com/assets/js/jqplot.donutRenderer.js"></script>
<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div>
<button class="change1">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();

$('.change1').click( function(){
    doUpdate();
});
$('.change2').click( function(){
    doUpdate2();
});

function renderGraph() {
    if (plot1) {
        plot1.destroy();
    }
   
  var plot1 = $.jqplot('chart1', [storedData], {seriesDefaults: {
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
      sliceMargin: 3,
      startAngle: -90,
      showDataLabels: true,
      dataLabels: 'value'
      }
    }
  });
   }

var newData = [9, 1, 4, 6, 8, 2, 5];
var wasCleared = false;
function doUpdate() {
    // Empty existing data
    if (!wasCleared) {
        storedData.length = 0;
        wasCleared = true;
    }
    
    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>')
}