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: {
labels: ['Bob','Fred','Lucy','Jim','Pob','Lou','Joe','Fred','Hal','Gaz','Ken','Kev','Will','Ray','Jay','Fliss','Gary'],
gutterLeftAutosize: true,
grouping: 'stacked',
colors: ['red','rgba(0,0,255,0.25)'],
key: ['1997','2007'],
keyPosition: 'gutter',
title: '10 year difference of Cochlea implant rates (%)',
gutterTop: 50,
unitsPost: '%',
noxaxis: true,
backgroundGridHlines: false,
backgroundGridBorder: false,
textAccessible: false
}
}).draw();
</script>