HOWTO: Create a bank of Gauge charts

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>
    var myGauge1 = new RGraph.Gauge('cvs', 0,100,67);
    myGauge1.Set('chart.centerx', 100);
    myGauge1.Draw();

    var myGauge2 = new RGraph.Gauge('cvs', 0,100,45);
    myGauge2.Set('chart.centerx', 300);
    myGauge2.Draw();

    var myGauge3 = new RGraph.Gauge('cvs', 0,100,13);
    myGauge3.Set('chart.centerx', 500);
    myGauge3.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>
    var myGauge1 = new RGraph.Gauge('cvs', 0,100,67);
    myGauge1.Set('chart.centerx', 100);
    myGauge1.Set('chart.adjustable', true);
    myGauge1.Draw();

    var myGauge2 = new RGraph.Gauge('cvs', 0,100,45);
    myGauge2.Set('chart.centerx', 300);
    myGauge2.Set('chart.adjustable', true);
    myGauge2.Draw();

    var myGauge3 = new RGraph.Gauge('cvs', 0,100,13);
    myGauge3.Set('chart.centerx', 500);
    myGauge3.Set('chart.adjustable', true);
    myGauge3.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>
    var myGauge1 = new RGraph.Gauge('cvs', 0,100,67);
    myGauge1.Set('chart.centerx', 100);
    myGauge1.Draw();

    var myGauge2 = new RGraph.Gauge('cvs', 0,100,45);
    myGauge2.Set('chart.centerx', 300);
    myGauge2.Draw();

    var myGauge3 = new RGraph.Gauge('cvs', 0,100,13);
    myGauge3.Set('chart.centerx', 500);
    myGauge3.Draw();
    
    
    /**
    * Only need to add the custom event listener once
    */
    myGauge1.canvas.onmousedown_rgraph = function (e)
    {
        var obj = RGraph.ObjectRegistry.getFirstObjectByXY(e);
        
        if (obj) {
            obj.value = obj.getValue(e);
            RGraph.Effects.Gauge.Grow(obj);
        }
    }
</script>