A dual color range Line chart

A range Line chart with dual colors. This range chart is combined with the drawing API Poly object so that the range can be given a tooltip.

[No canvas support]

This goes in the documents header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.dynamic.poly.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>
    d1  = [];
    d2  = [];
    val = 47;
    
    // Create the data
    for (var i=0; i<100; i+=1) d1[i] = RGraph.random(45,55);
    for (var i=0; i<100; i+=1) d2[i] = RGraph.random(25,35);

    var line = new RGraph.Line({
        id: 'cvs',
        data: [d1, d2],
        options: {
            backgroundGridHlinesCount: 10,
            colors: ['transparent','transparent'],
            shadow: true,
            hmargin: 10,
            filled: true,
            filledColors: ['transparent', 'red'],
            xaxisLabels: [
                '', 'Q1', '',
                '', 'Q2', '',
                '', 'Q3', '',
                '', 'Q4', ''
            ],
            xaxis: false,
            yaxis: false,
            linewidth: 0,
            tickmarksStyle: null,
            spline: true
        }
    }).trace();
</script>