A customised adjustable HBar chart

[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.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="800" height="200">[No canvas support]</canvas>
This is the code that generates the chart:
<script>
    hbar = new RGraph.HBar({
        id: 'cvs',
        data: [75,25],
        options: {
            labels: ['Johnny','Meredith'],
            adjustable: true,
            gutterLeft: 150,
            xmax: 100,
            labelsAbove: true,
            labelsAboveSize: 18,
            labelsAboveUnitsPost: '%',
            labelsAboveDecimals: 1,
            textSize: 14,
            textAccessiblePointerevents: false,
            noxaxis: true
        }
    }).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 = hbar.data[index];
        var other = (100 - value) / (hbar.data.length - 1);
        
        // Now adjust all of the other values
        for (var i=0; i<hbar.data.length; ++i) {
            if (i != index) {
                hbar.data[i] = other;
            }
        }
        
        RGraph.redraw();
    });
</script>