Back

Gauge with live data

Using PieChart you can create a gauge chart by simply specifying some settings. The example also demonstrates how chart responds to live data.

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