A customised adjustable Bar chart

This demo shows how you can make use of the onadjust RGraph event so that when you adjust one bar on the chart the others are updated with the remainder (so that they all add up to 300).

[No canvas support]

This goes in the documents header: 
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.bar.js"></script>
Put this where you want the chart to show up: 
<canvas id="cvs" width="800" height="300">[No canvas support]</canvas>
This is the code that generates the chart: 
<script>
    combinedMax = 300;

    bar = new RGraph.Bar({
        id: 'cvs',
        data: [180,20,20,20,20,20,20],
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            adjustable: true,
            gutterLeft: 50,
            ymax: combinedMax,
            labelsAbove: true,
            labelsAboveSize: 18,
            labelsAboveDecimals: 1,
            textSize: 14,
            textAccessiblePointerevents: false
        }
    }).draw().on('adjust', function (obj)
    {
        var shape = RGraph.Registry.get('chart.adjusting.shape');

        // Get the value of the bar thats just been adjusted
        var index = shape.index;
        var value = bar.data[index];
        var other = (combinedMax - value) / (bar.data.length - 1);
        
        // Now adjust all of the other values
        for (var i=0; i<bar.data.length; ++i) {
            if (i != index) {
                bar.data[i] = other;
            }
        }
        
        RGraph.redraw();
    });
</script>

« Back