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.common.dynamic.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.common.tooltips.js"></script> <script src="RGraph.common.key.js"></script> <script src="RGraph.drawing.yaxis.js"></script> <script src="RGraph.line.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>
var gutterLeft = 160,
gutterRight = 40,
gutterTop = 25;
/**
* This draws the extra axes. It's run whenever the line3 object is drawn
*/
yaxis1 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 159,
options: {
colors: 'red',
textColor: 'red',
max: 10,
title: 'Density',
textAccessible: true
}
}).draw()
yaxis2 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 110,
options: {
colors: 'green',
textColor: 'green',
max: 100,
title: 'Speed',
textAccessible: true
}
}).draw()
yaxis3 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 50,
options: {
colors: 'blue',
textColor: 'blue',
max: 30,
title: 'Pressure',
textAccessible: true
}
}).draw();
var line1 = new RGraph.Line({
id: 'cvs',
data: [1,3,5,2,5,6,8,4,4,5,3,6],
options: {
ymax: 10,
hmargin: 5,
gutterRight: gutterRight,
gutterLeft: gutterLeft,
gutterTop: gutterTop,
labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
colors: ['red', 'green', 'blue'],
key: ['Density', 'Speed', 'Pressure'],
keyPosition: 'gutter',
keyPositionGutterBoxed: false,
keyPositionX: 275,
noaxes: true,
ylabels: false,
shadow: false,
textAccessible: true
}
}).draw()
var line2 = new RGraph.Line({
id: 'cvs',
data: [54,53,56,58,57,53,49,52,53,56,61,58],
options: {
ymax: 100,
backgroundGrid: false,
colors: ['green'],
hmargin: 5,
gutterRight: gutterRight,
gutterLeft: gutterLeft,
gutterTop: gutterTop,
tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
noaxes: true,
ylabels: false,
shadow: false,
textAccessible: true
}
}).draw()
var line3 = new RGraph.Line({
id: 'cvs',
data: [31,35,32,36,34,32,33,35,28,17,18,18],
options: {
ymax: 50,
backgroundGrid: false,
ylabels: false,
colors: ['blue'],
hmargin: 5,
gutterRight: gutterRight,
gutterLeft: gutterLeft,
gutterTop: gutterTop,
tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
noaxes: true,
shadow: false,
textAccessible: true
}
}).draw();
</script>