A customised adjustable HBar chart
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>