This demonstration shows how you can use the drawing API Y axis object to draw multiple axes on your chart.
<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 marginLeft = 180, marginRight = 40, marginTop = 25; // This draws the extra axes. It's run whenever the line3 object is drawn yaxis1 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 179, options: { colors: 'red', textColor: 'red', yaxisScaleMax: 10, yaxisTitle: 'Density', yaxisTitleBold: true, yaxisTitleSize: 14 } }).draw() yaxis2 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 120, options: { colors: 'green', textColor: 'green', yaxisScaleMax: 100, yaxisTitle: 'Speed', yaxisTitleBold: true, yaxisTitleSize: 14 } }).draw(); yaxis3 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 50, options: { colors: 'blue', textColor: 'blue', yaxisScaleMax: 30, yaxisTitle: 'Pressure', yaxisTitleBold: true, yaxisTitleSize: 14 } }).draw(); var line1 = new RGraph.Line({ id: 'cvs', data: [1,3,5,2,5,6,8,4,4,5,3,6], options: { yaxisScaleMax: 10, marginInner: 5, marginRight: marginRight, marginLeft: marginLeft, marginTop: marginTop, xaxisLabels: ['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: 'margin', keyPositionMarginBoxed: false, keyPositionX: 275, axes: false, yaxisLabels: false, shadow: false } }).draw() var line2 = new RGraph.Line({ id: 'cvs', data: [54,53,56,58,57,53,49,52,53,56,61,58], options: { yaxisScaleMax: 100, backgroundGrid: false, colors: ['green'], marginInner: 5, marginRight: marginRight, marginLeft: marginLeft, marginTop: marginTop, tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], axes: false, yaxisLabels: false, shadow: false } }).draw() var line3 = new RGraph.Line({ id: 'cvs', data: [31,35,32,36,34,32,33,35,28,17,18,18], options: { yaxisScaleMax: 50, backgroundGrid: false, yaxisLabels: false, colors: ['blue'], marginInner: 5, marginRight: marginRight, marginLeft: marginLeft, marginTop: marginTop, tooltips: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], axes: false, shadow: false } }).draw(); </script>