A dynamic Pie Chart

by Amir Danish

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {

  var data=[
    { label: "apple",  y:5 },
    { label: "orange", y: 1 },
    { label: "banana", y: 10 },
    { label: "mango",  y:21 },
    { label: "grape",  y:100 }
  ];
  var chart = new CanvasJS.Chart("chartContainer", {

    data: [              
      {
        // Change type to "doughnut", "line", "splineArea", etc.
        type: "pie",
        indexLabel: "{label}: {y}",
        dataPoints: data,
      }
    ]
  });
  chart.render();

  var updateChart = function () {                
    var newdps = [
      { label: "apple",  y: ranData(5,20) },
      { label: "orange", y: ranData(40,20)},
      { label: "banana", y:ranData(10,50) },
      { label: "mango",  y:ranData(21,80) },
      { label: "grape",  y: ranData(2,20) }
    ];

    chart.options.data[0].dataPoints = newdps;

    if(newdps.length === 0){
      clearInterval(timerId); 
    }                
    chart.render();
  };
  var timerId =setInterval(function () {
    updateChart()
  }, 3000);
}

function ranData(min,max){
  return Math.floor((Math.random() * max) + min);
}