This demonstration shows how you can use the YAxis drawing API object to draw multiple axes on your chart.
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.drawing.yaxis.js"></script> <script src="RGraph.bar.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
window.onload = function ()
{
var colors = [
'Gradient(white:red)',
'Gradient(white:brown)',
'Gradient(white:blue)'
];
var bar1 = new RGraph.Bar({
id: 'cvs',
data: [[2,0,0],[4,0,0],[6,0,0]],
options: {
strokestyle: 'rgba(0,0,0,0)',
noaxes: true,
ylabels: false,
gutterLeft: 150,
colors: colors,
backgroundGridAutofitNumvlines: 3,
hmargin: 25,
hmarginGrouped: 3,
shadowColor: '#666',
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 2,
textSize: 14
}
}).draw()
var bar2 = new RGraph.Bar({
id: 'cvs',
data: [[0,20,0],[0,30,0],[0,40,0]],
options: {
strokestyle: 'rgba(0,0,0,0)',
noaxes: true,
ylabels: false,
gutterLeft: 150,
colors: colors,
backgroundGrid: false,
hmargin: 25,
hmarginGrouped: 3,
shadowColor: '#666',
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 2,
ymax: 50,
textSize: 14
}
}).draw()
var bar3 = new RGraph.Bar({
id: 'cvs',
data: [[0,0,70],[0,0,80],[0,0,90]],
options: {
strokestyle: 'rgba(0,0,0,0)',
labels: ['Monday','Tuesday','Wednesday'],
noyaxis: true,
ylabels: false,
gutterLeft: 150,
colors: colors,
backgroundGrid: false,
hmargin: 25,
hmarginGrouped: 3,
shadowColor: '#666',
shadowOffsetx: 2,
shadowOffsety: 2,
shadowBlur: 2,
ymax: 100,
textSize: 14
}
}).draw()
var yaxis1 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 25,
options: {
max: 10,
colors: ['red'],
textSize: 14,
textAccessible: true
}
}).draw()
var yaxis2 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 75,
options: {
max: 50,
colors: ['brown'],
textSize: 14,
textAccessible: true
}
}).draw()
var yaxis3 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 125,
options: {
max: 100,
colors: ['blue'],
textSize: 14,
textAccessible: true
}
}).draw()
};
</script>