Live Stacked Bar 100 Chart - CanvasJS JavaScript Charts

Live Stacked Bar 100 Chart - CanvasJS JavaScript Charts

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

var data = [];
var chart = new CanvasJS.Chart("chartContainer",{
	theme: "theme2",
	title :{
		text: "Live Chart"
	},
	axisY:{
		interval: 10,
		labelFormatter: function(e){          	
			return (e.value/10)+8 + ":00";
		}
	},
	data: data
});

chart.render();


var xVal = 0;
var yVal = 15;	
var updateInterval = 1000;
var updateChart = function () {
	var dps = [];
	for(var i = 1;i <= 8; i++){
		xVal = i;
		yVal = Math.floor(Math.random() * (10 - 1 + 1)) + 1; //Math.floor(Math.random() * (max - min + 1)) + min;

		dps.push({x: xVal,y: yVal, label: "person "+i});
	}
	data.push({type: "stackedBar100", showInLegend: true, dataPoints: dps})
	if (data.length >  11)
	{
		data.shift();				
	}
	chart.render();
};
setInterval(function(){updateChart()}, updateInterval);