This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.common.dynamic.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.drawing.xaxis.js"></script> <script src="RGraph.hbar.js"></script>Put this where you want the chart to show up:
<div style="position: relative">
<div style="width: 600px; height: 400px;overflow: auto; overflow-x: hidden">
<canvas id="cvs" width="600" height="1000"></canvas>
</div>
<canvas id="axes" width="600" height="50" style="position: absolute; bottom: 5px; left: 0; z-index: 3"></canvas>
</div>
This is the code that generates the chart:
<script>
var hbar = new RGraph.HBar({
id: 'cvs',
data: [4,6,8,5,9,6,4,8,4,6,12,2,8,6,4,3,2,5,9],
options: {
gutterBottom: 35,
noxaxis: true,
xlabels: false,
labels: ['Rob','Jason','Louise','Pob','Kevin','Jerry','Inga','Hoolio','Fliss','Matt','Gary','Doug','Mark','Lucy','Lynn','Olga','Kris','Harry','Dave'],
textAccessiblePointerevents: true,
gutterBottom: 2,
vmargin: 20,
noyaxis: true
}
}).draw().exec(function (obj)
{
obj.coords.forEach(function (v, k, arr)
{
RGraph.path2(
obj.context,
'b a % % % 0 7 false f red',
v[0] + v[2],
v[1] + (v[3] / 2),
11
);
});
});
var xaxis = new RGraph.Drawing.XAxis({
id: 'axes',
y: 2,
options: {
max: hbar.max,
colors: ['black'],
textAccessiblePointerevents: true,
gutterLeft: hbar.get('gutterLeft')
}
}).draw();
</script>