Adjusting charts: Segmented donut chart

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

• The RGraph adjusting events

The Segmented Donut chart has the facility to be adjusted. There are three custom RGraph events associated with it:

• adjustbegin
• adjust
• adjustend

<script>
    segmented = new RGraph.Segmented({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true,
            textAccessible: false
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired. Value: ' + obj.value.toFixed(2));
    });
</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.