A Horizontal Bar chart example showing the X axis drawing API object
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.drawing.xaxis.js"></script>
<script src="RGraph.hbar.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="400">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
marginTop = 55;
hbar = new RGraph.HBar({
id: 'cvs',
data: [[80,64],[1,2],[11,12],[3,12],[5,7]],
options: {
marginLeft: 165,
marginRight: 20,
marginTop: 35,
yaxisLabels: [
'Improved',
'Worsened',
'No change - \r\npeoples perceptions\r\nare generally positive',
'No change - \r\npeoples perceptions\r\nare generally negative',
"Don't know"
],
colors: ['#F68B23','#164366'],
xaxisScaleMax: 100,
backgroundGrid: false,
xaxis: false,
yaxis: false,
xaxisLabels: false,
key: ['Non-disabled','Disabled'],
keyPosition: 'margin',
keyPositionY: 0,
tooltips: ['Improved','Improved','Worsened','Worsened', 'No change - \r\npeoples perceptions\r\nare generally positive','No change - \r\npeoples perceptions\r\nare generally positive','No change - \r\npeoples perceptions\r\nare generally negative','No change -\r\npeoples perceptions\r\nare generally negative',"Don't know", "Don't know"],
marginLeft: 175,
marginTop: marginTop
}
}).on('beforedraw', function (obj)
{
obj.context.fillStyle = '#eee';
obj.context.fillRect(obj.marginLeft, obj.marginTop, obj.canvas.width - obj.marginLeft - obj.marginRight, obj.canvas.height - obj.marginTop - obj.marginBottom);
}).on('draw', function (obj)
{
obj.context.strokeStyle = '#aaa';
obj.context.strokeRect(
obj.marginLeft,
obj.marginTop,
obj.canvas.width - obj.marginLeft - obj.marginRight,
obj.canvas.height - obj.marginTop - obj.marginBottom
);
}).grow();
new RGraph.Drawing.XAxis({
id: 'cvs',
y: marginTop,
options: {
marginLeft: hbar.get('marginLeft'),
marginRight: hbar.get('marginRight'),
xaxisScaleMax: 100,
align: 'top',
clearto: 'white'
}
}).draw();
</script>