Back

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".

Documentation Open in JSFiddle
Start Free Trial Purchase

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