How to create a Gauge that updates a form

  Read comments...

Summary
A guide for creating a Gauge chart that updates a form. Another form of interaction is for your charts to update forms.

There a few methods of doing this. You could use the in-built RGraph event onadjust to have some code run that updates a form withe new value of the Gauge or you could use the RGraph specific .onmousedown event to animate the chart and then update your form. Both methods are shown below.

The onadjust event

[No canvas support]

By using the custom RGraph event onadjust you can have a function run when the chart is adjusted. This function can then get the new value from the chart and update the form.

Value:


<script>
    var gauge = new RGraph.Gauge({
        id: 'cvs_onadjust',
        min: 0,
        max: 100,
        value: 67,
        options: 
            adjustable: true
            textAccessible: true,
            textSize: 14
        }
    }).draw()
    
    // You could also use the more recent .on() function here, for example:
    // .on('adjust', function (obj)
    // {
    // })
    
    RGraph.addCustomEventListener(gauge, 'onadjust', function (obj)
    {
        // Get the value from the chart
        var value = obj.value;
        
        // Update the text input with the new reading (formatted to have 1 decimal)
        document.getElementById("gauge_readout").value = value.toFixed(1);;
    });
</script>

The official DOM1 events

[No canvas support]

Now (October 2012) that RGraph has reverted to DOM2 events the official DOM1 events are freed up for you to use. These are simple and straight-forward for you to use. The _rgraph events are still supported.

Value:


<script>
    var gauge2 = new RGraph.Gauge({
        id: 'cvs_dom1_event',
        min: 0,
        max: 100,
        value: 67,
        options: {
            textAccessible: true,
            textSize: 14
        }
    }).draw()
    
    var state = {}
    
        
    gauge2.canvas.onmousedown = function (e)
    {
        state.mousedown = true;
        
        // Fire the onmousemove function so that a single click updates the chart
        gauge2.canvas.onmousemove(e);
    }
    
    window.onmouseup = function (e)
    {
        state.mousedown = false;
    }
    
    gauge2.canvas.onmousemove = function (e)
    {
        if (state.mousedown) {
            gauge2.value = gauge2.getValue(e);
            RGraph.clear(gauge2.canvas);
            gauge2.draw();
            
            document.getElementById("gauge2_readout").value = gauge2.value.toFixed(1);
        }
    }
</script>

DOM2 event listeners

When you use the DOM2 event listeners to add events to your canvas it doesn't have the effect of clearing the other event listeners - including any DOM1 event listeners. This means that you can add event listeners using the DOM2 function addEventListener() without fear of it affecting other dynamic features.

Value:

[No canvas support]
<script>
    var gauge3 = new RGraph.Gauge({
        id: 'cvs_dom2',
        min: 0,
        max: 100,
        value: 67,
        options: {
            textAccessible: true,
            textSize: 14
        }
    }).draw()
    
    var state = {}
    
    gauge3.canvas.addEventListener('mousedown', function (e)
    {
        state.mousedown = true;
        
        dom2_mousemove(e)
    }, false);
    
    window.addEventListener('mouseup', function (e)
    {
        state.mousedown = false;
    }, false);
    
    function dom2_mousemove (e)
    {
        if (state.mousedown) {
            var obj = e.target.__object__;
            
            obj.value = obj.getValue(e);
            RGraph.clear(obj.canvas);
            obj.draw();
            
            document.getElementById("gauge3_readout").value = gauge3.value.toFixed(1);
        }
    }
    gauge3.canvas.addEventListener('mousemove', dom2_mousemove, false);
</script>

Using animation effects

[No canvas support]

Instead of using the regular Draw() method to update your charts you can also use the RGraph effects. This allows you to create animated, adjustable Gauges and meters.

Note: If you use this method that the Gauge will not be reading the desired value until the end of the animation. Therefore it is necessary to use the callback function to update the form input.

Value:


<script>
    var gauge4 = new RGraph.Gauge({
        id: 'cvs_effect',
        min: 0,
        max: 100,
        value: 67,
        options: {
            textAccessible: true,
            textSize: 14
        }
    }).grow()
    
    gauge4.canvas.addEventListener('mousedown', function (e)
    {
        var obj = e.target.__object__;
        
        obj.value = obj.getValue(e);
        RGraph.clear(obj.canvas);
        obj.grow(null, function ()
        {
            document.getElementById("gauge4_readout").value = gauge4.value.toFixed(1);
        });
    }, false);
</script>
Share RGraph
X

Comments