A Horizontal Bar chart example showing the XAxis 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>
window.onload = function ()
{
var hbar = new RGraph.HBar({
id: 'cvs',
data: [[80,64],[1,2],[11,12],[3,12],[5,7]],
options: {
gutterLeft: 165,
gutterRight: 20,
gutterTop: 35,
labels: ['Improved','Worsened', 'No change - \r\npeoples perceptions\r\nare generally positive','No change - \r\n peoples perceptions\r\nare generally negative',"Don't know"],
colors: ['#F68B23','#164366'],
xmax: 100,
backgroundGrid: false,
noxaxis: true,
noyaxis: true,
xlabels: false,
key: ['Non-disabled','Disabled'],
keyPosition: 'gutter',
keyPositionGutterBoxed: false,
keyPositionY: 0,
tooltips: ['A','B','C','D','E','F','G','H','I','J'],
gutterLeft: 175
}
})
.on('beforedraw', function (obj)
{
obj.context.fillStyle = '#eee';
obj.context.fillRect(obj.gutterLeft, obj.gutterTop, obj.canvas.width - obj.gutterLeft - obj.gutterRight, obj.canvas.height - obj.gutterTop - obj.gutterBottom);
})
.on('draw', function (obj)
{
obj.context.strokeStyle = '#aaa';
obj.context.strokeRect(obj.gutterLeft, obj.gutterTop, obj.canvas.width - obj.gutterLeft - obj.gutterRight, obj.canvas.height - obj.gutterTop - obj.gutterBottom);
}).grow();
var xaxis = new RGraph.Drawing.XAxis({
id: 'cvs',
y: 35,
options: {
gutterLeft: hbar.get('gutterLeft'),
gutterRight: hbar.get('gutterRight'),
max: 100,
align: 'top',
clearto: 'white',
textAccessible: true
}
}).draw();
};
</script>
« Back