# Two range charts

This chart is using four Line chart objects - two of which are generating the ranges and two of which are generating the black median lines.

Update
There's information on this HOWTO page about creating dual color line charts using gradients. It's very simple and can be done using either the RGraph Gradient() shortcut or more directly with the canvas linear gradient functionality.

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.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>
        window.onload = function ()
        {
            var line1 = new RGraph.Line({
                id: 'cvs',
                data: [
                    [4,3,3,3,5,2,4],
                    [8,5,6,8,9,7,8]
                ],
                options: {
                    filled: true,
                    filledRange: true,
                    linewidth: 3,
                    colors: ['red'],
                    fillstyle: 'rgba(255,0,0,0.2)',
                    ymax: 10,
                    tickmarks: null,
                    labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                    textAccessible: true
                }
            }).draw()

            var line2 = new RGraph.Line({
                id: 'cvs',
                data: [6,4,4.5,5.5,7,4.5,6],
                options: {
                    backgroundGrid: false,
                    ylabels: false,
                    noaxes: true,
                    colors: ['black'],
                    linewidth: 3,
                    ymax: 10,
                    textAccessible: true
                }
            }).draw()

            var line3 = new RGraph.Line({
                id: 'cvs',
                data: [
                    [1,2,4,2,2,4,3],
                    [0,1,2,0,0,1,0]
                ],
                options: {
                    backgroundGrid: false,
                    ylabels: false,
                    noaxes: true,
                    filled: true,
                    filledRange: true,
                    linewidth: 3,
                    colors: ['blue'],
                    fillstyle: 'rgba(0,0,255,0.2)',
                    ymax: 10,
                    tickmarks: null,
                    textAccessible: true
                }
            }).draw()

            var line4 = new RGraph.Line({
                id: 'cvs',
                data: [0.5,1.5,3,0.5,1,2.5,1.5],
                options: {
                    backgroundGrid: false,
                    ylabels: false,
                    noaxes: true,
                    colors: ['black'],
                    linewidth: 3,
                    ymax: 10,
                    textAccessible: true
                }
            }).draw();
        };
    </script>

« Back