A basic horizontal bar chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="450">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
data1 = [1,3,2,4,5,6,8,9,5,2,6,3,4,3,2,2,1];
data2 = [9,5,5,5,5,5,3,2,1,3,3,8,8,6,9,9,10];
data1.forEach (function (v, k, arr)
{
arr[k] = [v, data2[k] ];
});
new RGraph.HBar({
id: 'cvs',
data: data1,
options: {
yaxisLabels: ['Bob','Fred','Lucy','Jim','Pob','Lou','Joe','Fred','Hal','Gaz','Ken','Kev','Will','Ray','Jay','Fliss','Gary'],
marginLeftAuto: true,
grouping: 'stacked',
colors: ['red','rgba(0,0,255,0.25)'],
key: ['1997','2007'],
keyPosition: 'margin',
title: '10 year difference of Cochlea implant rates (%)',
marginTop: 50,
xaxis: false,
xaxisScaleUnitsPost: '%',
backgroundGridHlines: false,
backgroundGridBorder: false,
textAccessible: false
}
}).draw();
</script>