Adjusting your charts interactively - SemiCircular Progress

Share RGraph:   

The SemiCircular Progress can be adjusted by clicking on it. When adjusting is finished the onadjustend event fires. If you attach a function to the onadjustend event (as below) you can get the new value by looking at the .value property (eg scp.value). The onadjust* events log the value to the console.

[No canvas support]
<script>
    var scp = new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            gutterTop: 10,
            gutterLeft: 10,
            gutterRight: 10,
            adjustable: true,
            unitsPost: '%',
            textAccessiblePointerevents: false,
            colors: ['Gradient(white:#0a0)']
        }
    }).draw().on('adjustbegin', function ()
    {
        console.log('Old value: ' + scp.value  );
    }).on('adjust', function ()
    {
        console.log('Value during adjustment: ' + scp.value  );
    }).on('adjustend', function ()
    {
        console.log('New value: ' + scp.value  );
    });
</script>

Comments

Add a new comment...