JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer"></div>
JavaScript
window.onload = function () {
var dps = [
{ y: 4181563, legendText: "PS 3", indexLabel: "PlayStation 3" },
{ y: 2175498, legendText: "Wii", indexLabel: "Wii" },
{ y: 3125844, legendText: "360", indexLabel: "Xbox 360" }
]
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
animationEnabled: true,
title: {
text: "Gaming Consoles Sold in 2012"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
data: [{
type: "pie",
showInLegend: true,
dataPoints: dps
}]
});
chart.render();
var updateInterval = 2000;
var newdps = [
{ y: getRandomInt(2000000,30000000), legendText: "New Device 1", indexLabel: "New Device 1" },
{ y: getRandomInt(2000000,30000000), legendText: "New Device 2", indexLabel: "New Device 2" },
{ y: getRandomInt(2000000,30000000), legendText: "New Device 3", indexLabel: "New Device 3" }
];
var updateChart = function () {
var newDP = newdps[0];
newdps.shift();
dps.push(newDP);
if(newdps.length === 0)
clearInterval(timerId);
chart.render();
// $.ajax({
//url: "/echo/json/",
// type: 'json',
//success: function (data) {
//dps.push(data);
//chart.render();
// update chart after specified time.
// }
//});
};
var timerId...