Adjusting your charts interactively - Thermometer charts

Summary: Information about adjusting the Thermometer chart interactively. It can be used to highlight values or control something via a webpage.

[No canvas support]

Nothing pertinent is kept in the registry. If you wish to get the new value of the Thermometer you can check obj.value. If you want the value before the adjustment, you can check the value with the adjustbegin event (instead of the adjustend event).


<script>
    textarea = document.getElementById('output');

    thermometer = new RGraph.Thermometer({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            marginBottom: 20,
            colors: ['Gradient(orange:white)'],
            titleSide: 'An adj. thermometer',
            textAccessible: false,
            adjustable: true
        }
    }).draw().on('adjustbegin', function ()
    {
        console.log(textarea.value = textarea.value + '\r\nThe adjustbegin event has fired. Value: ' + thermometer.value);
    }).on('adjust', function ()
    {
        console.log(textarea.value = textarea.value + '\r\nThe adjust event has fired. Value: ' + thermometer.value);
    }).on('adjustend', function ()
    {
        console.log(textarea.value = textarea.value + '\r\nThe adjustend event has fired. Value: ' + thermometer.value);
    });
</script>

The RGraph adjusting events

There are three RGraph events associated with adjusting. The adjustbegin event fires when adjusting begins. Much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.