How to use the drawing API Y axis object
A guide for using the drawing API Y axis object. By using this object you can have multiple Y axes on your chart (which can also be clickable or have their own tooltips).
Formerly an API function - the RGraph drawing API now supports a Y axis
object by which you can have multiple Y axes. Now
that it's a drawing API object you can now also give the Y axis tooltips
and it supports the eventsClick
and
eventsMousemove
properties. It uses the same
get()
and set()
methods for configuration as
other drawing API
objects and the chart types and is automatically redrawn as necessary
so you don't need to worry about this. The full list
of options is shown below.
<script> marginLeft = 90; marginRight = 25; line1 = new RGraph.Line({ id: 'cvs', data: [1,3,5,2,5,6,8,4,4,5,3,6], options: { yaxisScaleMax: 10, yaxisLabels: false, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], hmargin: 5, marginRight: marginRight, marginLeft: marginLeft, tooltips: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], colors: ['red', '#0f0', 'blue'], key: ['Flow rate', 'Speed', 'Pressure'], keyPosition: 'margin', keyPositionX: ( (document.getElementById('cvs').width - marginLeft - marginRight) / 2 ) + marginLeft - 115, keyPositionMarginboxed: false, axes: false, textSize: 14, shadow: false } }).draw(); line2 = new RGraph.Line({ id: 'cvs', data: [54,53,56,58,57,53,49,52,53,56,61,58], options: { yaxisScaleMax: 100, hmargin: 5, marginRight: marginRight, marginLeft: marginLeft, tooltips: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], axes: false, yaxisLabels: false, backgroundGrid: false, textSize: 14, shadow: false } }).draw(); line3 = new RGraph.Line({ id: 'cvs', data: [31,35,32,36,34,32,33,35,28,17,18,18], options: { yaxisScaleMax: 50, hmargin: 5, marginRight: marginRight, marginLeft: marginLeft, tooltips: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ], colors: ['blue'], axes: false, yaxisLabels: false, backgroundGrid: false, textSize: 14, shadow: false } }).draw(); yaxis1 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 30, options: { colors: ['red'], textColor: 'red', yaxisScaleMax: 10, tooltips: ['This Y axis shows the flow rate of the water'], tooltipsEvent: 'mousemove', textSize: 14 } }).draw(); yaxis2 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 60, options: { colors: ['green'], textColor: 'green', yaxisScaleMax: 100, tooltips: ['This Y axis shows the water speed'], tooltipsEvent: 'mousemove', textSize: 14 } }).draw(); yaxis3 = new RGraph.Drawing.YAxis({ id: 'cvs', x: 90, options: { colors: ['blue'], textColor: 'blue', yaxisScaleMax: 50, tooltips: ['This axis shows the pressure scale'], tooltipsEvent: 'mousemove', textSize: 14 } }).draw(); </script>