A customised and adjustable Horizontal Bar 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>
// Create the Horizontal Bar chart
hbar = new RGraph.HBar({
id: 'cvs',
data: [75,25],
options: {
yaxisLabels: ['Johnny','Meredith'],
adjustable: true,
marginLeft: 150,
xaxisScaleMax: 100,
labelsAbove: true,
labelsAboveSize: 18,
labelsAboveUnitsPost: '%',
labelsAboveDecimals: 1,
textSize: 14,
textAccessiblePointerevents: false,
xaxis: false
}
}).draw().on('adjust', function (obj)
{
var shape = RGraph.Registry.get('chart.adjusting.shape');
// Get the value of the bar that's just been adjusted
var index = shape.index,
value = hbar.data[index],
other = 100 - value;
// Now adjust the other value
hbar.data[index ? 0 : 1] = other;
RGraph.redraw();
});
</script>