HOME
DOWNLOAD
EXAMPLES
SVG CHARTS
CANVAS CHARTS
SUPPORT
BLOG
DONATE
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 chart.events.click and chart.events.mousemove 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>
window.onload = (function ()
{
var gutterLeft = 90;
var gutterRight = 25;
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,
labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
tooltips: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
colors: ['red', '#0f0', 'blue'],
key: ['Flow rate', 'Speed', 'Pressure'],
keyPosition: 'gutter',
keyPositionX: (
(document.getElementById('cvs').width - gutterLeft - gutterRight) / 2
) + gutterLeft - 115,
keyPositionGutterboxed: false,
noaxes: true,
ylabels: false,
textAccessible: true,
textSize: 14
}
}).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,
labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
tooltips: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
colors: ['red', '#0f0', 'blue'],
key: ['Flow rate', 'Speed', 'Pressure'],
keyPosition: 'gutter',
keyPositionX: (
(document.getElementById('cvs').width - gutterLeft - gutterRight) / 2
) + gutterLeft - 115,
keyPositionGutterBoxed: false,
noaxes: true,
ylabels: false,
textAccessible: true,
textSize: 14
}
}).draw()
var line2 = new RGraph.Line({
id: 'cvs',
data: [54,53,56,58,57,53,49,52,53,56,61,58],
options: {
ymax: 100,
hmargin: 5,
gutterRight: gutterRight,
gutterLeft: gutterLeft,
tooltips: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
noaxes: true,
ylabels: false,
backgroundGrid: false,
textAccessible: true,
textSize: 14
}
}).draw();
var line3 = new RGraph.Line({
id: 'cvs',
data: [31,35,32,36,34,32,33,35,28,17,18,18],
options: {
ymax: 50,
hmargin: 5,
gutterRight: gutterRight,
gutterLeft: gutterLeft,
tooltips: [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
],
colors: ['blue'],
noaxes: true,
ylabels: false,
backgroundGrid: false,
textAccessible: true,
textSize: 14
}
}).draw();
var yaxis1 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 30,
options: {
colors: ['red'],
textColor: 'red',
max: 10,
tooltips: ['This Y axis shows the flow rate of the water'],
tooltipsEvent: 'mousemove',
textAccessible: true,
textAccessiblePointerevents: false,
textSize: 14
}
}).draw();
var yaxis2 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 60,
options: {
colors: ['green'],
textColor: 'green',
max: 100,
tooltips: ['This Y axis shows the water speed'],
tooltipsEvent: 'mousemove',
textAccessible: true,
textAccessiblePointerevents: false,
textSize: 14
}
}).draw();
var yaxis3 = new RGraph.Drawing.YAxis({
id: 'cvs',
x: 90,
options: {
colors: ['blue'],
textColor: 'blue',
max: 50,
tooltips: ['This axis shows the pressure scale'],
tooltipsEvent: 'mousemove',
textAccessible: true,
textAccessiblePointerevents: false,
textSize: 14
}
}).draw();
}
</script>