How to create a bank of Gauge charts

Summary: A guide for making a bank of Gauge charts. This can be used to create a control panel or dashboard, either interactive or not.

• The original Gauge charts
• The Gauge charts now that they're adjustable
• Making the Gauge charts animated

Now that RGraph supports multiple charts on a single canvas creating a bank of Gauge charts or other meters is a simple matter and allows you to create powerful responsive control panels.

This example uses the Gauge chart though the principle is the same for all types of RGraph meter.

The original Gauge charts

These are the original Gauge charts before they have been made adjustable.

[No canvas support]

<script>
    myGauge1 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:67,
        options: {
            centerx: 100,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()

    myGauge2 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:45,
        options: {
            centerx: 300
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15

        }
    }).draw()

    myGauge3 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:13,
        options: {
            centerx: 500
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()
</script>

The Gauge charts now that they're adjustable

These are the Gauge charts now that they have been made adjustable.

[No canvas support]

<script>
    myGauge1 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:67,
        options: {
            centerx: 100,
            adjustable: true,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15,

        }
    }).draw()

    myGauge2 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:45,
        options: {
            centerx: 300,
            adjustable: true,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()


    myGauge1 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:13,
        options: {
            centerx: 500,
            adjustable: true,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()
</script>

Making the Gauge charts animated

By default the gauge charts aren't animated when they're adjustable, however this is a simple addition and involves handling the adjusting yourself.

[No canvas support]

<script>
    myGauge1 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:67,
        options: {
            centerx: 100,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()

    myGauge2 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:45,
        options: {
            centerx: 300,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()

    myGauge3 = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value:13,
        options: {
            centerx: 500,
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15
        }
    }).draw()

    
    
    // Only need to add the custom event listener once
    myGauge1.canvas.onmousedown = function (e)
    {
        var obj = RGraph.ObjectRegistry.getFirstObjectByXY(e);
        
        if (obj) {
            obj.value = obj.getValue(e);
            obj.grow();
        }
    }
</script>