How to create a Gauge that updates a form

• The adjust event
• The official DOM1 events
• DOM2 event listeners
• Using animation effects

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

The adjust event

By using the custom RGraph event adjust 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.

<script>
    gauge = new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 67,
        options: 
            adjustable: true,
            textSize: 14,
            events: {
                adjust: 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);
                }
            }
        }
    }).draw();
</script>

The official DOM1 events

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 straightforward for you to use. The *_rgraph events are still supported.

<script>
    gauge2 = new RGraph.Gauge({
        id: 'cvs_dom1_event',
        min: 0,
        max: 100,
        value: 67,
        options: {
            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.

<script>
    gauge3 = new RGraph.Gauge({
        id: 'cvs_dom2',
        min: 0,
        max: 100,
        value: 67,
        options: {
            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

Instead of using the regular draw function 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 then 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 element.

<script>
    gauge4 = new RGraph.Gauge({
        id: 'cvs_effect',
        min: 0,
        max: 100,
        value: 67,
        options: {
            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>