Adjusting charts: Semi-circular Progress

Information about adjusting the Semi-circular Progress bar. It can be used to highlight values or control something via a webpage.

The Semi-circular Progress can be adjusted by clicking on it. When adjusting is finished the adjustend event fires. If you attach a function to the adjustend event (as below) you can get the new value by looking at the value property (eg obj.value). The events log the value to the console.

[No canvas support]
<script>
    scp = new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10,
            adjustable: true,
            scaleUnitsPost: '%',
            colors: ['Gradient(white:#0a0)']
        }
    }).draw().on('adjustbegin', function ()
    {
        console.log('The adjustbegin event has fired. Value: ' + scp.value);
    }).on('adjust', function ()
    {
        console.log('The adjust event has fired. Value: ' + scp.value);
    }).on('adjustend', function ()
    {
        console.log('The adjustend event has fired. Value: ' + scp.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.