Gauge with live data
JavaScript gauge chart with real-time data updates. This example showcases how the PieChart visualizes changes in data as they happen. The gauge chart was created by providing custom radian values to 'startAngle' and 'endAngle', but the 3D effect was applied using "theme: PieChart.themes.raised".
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
var pauseUpdate = false;
var count = 0;
// the two top-level data points
var busy = { value: 0, name: "A", subvalues: [] };
var free = { value: 0, name: "B", subvalues: [] };
// generate some data for the drilldown
for (var j = 0; j < 5; j++) {
busy.subvalues.push({ name: "a-" + j, value: j * 10 });
free.subvalues.push({ name: "b-" + j, value: j * 15 });
}
var pc = new PieChart({
container: document.getElementById("demo"),
theme: PieChart.themes.raised,
data: { preloaded: { subvalues: [busy, free] } },
pie: {
startAngle: -Math.PI,
endAngle: 0,
innerRadius: 0.6
},
events: {
onHoverChange: function (event, args) {
// pause the chart updates while it is hovered so that the user can interact with
// it without the movement.
pauseUpdate = args.hoverSlice;
}
},
interaction: { others: { enabled: false } }
});
function updateData() {
if (pauseUpdate) {
return;
}
if (count++ > 200) {
window.clearInterval(intervalHandle);
intervalHandle = null;
}
// generate new random data - this could be replaced with a call to a webservice
busy.value = 0;
free.value = 0;
for (var j = 0; j < 5; j++) {
busy.value += (busy.subvalues[j].value += Math.max(0, Math.random() * 30 - j * 3));
free.value += (free.subvalues[j].value += Math.max(0, Math.random() * 30 - j * 3));
}
// update the chart to display the new data
pc.replaceData({ subvalues: [busy, free] });
}
updateData();
var intervalHandle = setInterval(updateData, 100);
function disposeDemo() {
if (intervalHandle) window.clearInterval(intervalHandle);
disposeDemo = null;
intervalHandle = null;
}
Data
Data
//No separate data for this example