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).

[No canvas support]

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>
    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>

See also