Doughnut Dynamic update - Javascript CanvasJS

Doughnut Dynamic update - Javascript CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

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

JavaScript

//initial value of dataPoints 
var dps = [
    {label: "boiler1", y: 206},
    {label: "boiler2", y: 163},
    {label: "boiler3", y: 154},
    {label: "boiler4", y: 176},
    {label: "boiler5", y: 184},
    {label: "boiler6", y: 122}
];	

var chart = new CanvasJS.Chart("chartContainer",{			
    title: {
        text: "Temperature of Each Boiler"		
    },
    data: [
        {
            type: "doughnut",			
            indexLabel: "{y} C",
            dataPoints: dps					
        }
    ]
});


var updateInterval = 1000;	

var updateChart = function () {

    for (var i = 0; i < dps.length; i++) {

        // generating random variation deltaY
        var deltaY = Math.round(2 + Math.random() *(-2-2));				
        var yVal = deltaY + dps[i].y > 0 ? dps[i].y + deltaY : 0;
        var boilerColor;

        // updating the dataPoint
        dps[i] = {label: "boiler"+(i+1) , y: yVal, color: boilerColor};
    };
    chart.render();
};

updateChart();		

// update chart after specified interval 
setInterval(function(){updateChart()}, updateInterval);