A bank of adjustable Gauge charts

These Gauge charts are adjustable and are brought to the "front" of the stacking order when mouseover'ed. Note that because of the use of the overlap the textAccessible option won't work and thus is disabled.



[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.gauge.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="500" height="250" style="border: 1px solid #ccc">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    window.onload = function ()
    {
        // These are intentionally globals
        gauge1 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 10,
            value: 18,
            options: {
                title: 'Pressure',
                titleBottom: 'Pa',
                titleBottomColor: '#aaa',
                centerx: 125,
                radius: 100,
                adjustable: true
            }
        }).draw();




        gauge2 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 100,
            value: 78,
            options: {
                centerx: 250,
                radius: 100,
                adjustable: true,
                title: 'Volume',
                titleBottom: 'm',
                titleBottomColor: '#aaa'
            }
        }).draw();

        gauge3 = new RGraph.Gauge({
            id: 'cvs',
            min:0,
            max: 100,
            value: 78,
            options: {
                centerx: 375,
                radius: 100,
                adjustable: true,
                title: 'Flow rate',
                titleBottom: 'm/s',
                titleBottomColor: '#aaa'
            }
        }).draw();
        
        gauge3.canvas.onmousemove = function (e)
        {
            var mouseXY = RGraph.getMouseXY(e);
            var obj     = RGraph.ObjectRegistry.getObjectByXY(e);
            
            if (obj) {
                RGraph.ObjectRegistry.bringToFront (obj);
            }
        }
    };
</script>

Share on Facebook Share on Twitter