Combining more than two Line chart objects with multiple Y axes

This demonstration shows how you can use the drawing API Y axis object to draw multiple axes on your chart.

[No canvas support]

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 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,
            hmargin: 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'],
            hmargin: 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'],
            hmargin: 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>