A dual color clickable filled range Line chart

By using the Poly drawing API object with a filled range chart you can make the filled range clickable.

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.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>
    line = new RGraph.Line({
        id: 'cvs',
        data: [
            [3,4,6,5,2,4,5,5,6,8,7,4,8,9,8,6,5,2,5,4],
            [12,13,15,16,12,13,15,14,21,22,20,13,15,16,18,19,16,15,13,18]
        ],
        options: {
            filled: true,
            filledRange: true,
            filledColors: 'red',
            colors: ['black'],
            linewidth: 1,
            xaxisTickmarksCount: 19,
            yaxisScaleMax: 50,
            tickmarksStyle: null,
            backgroundGridVlinesCount: 19
        }
    }).trace(null, drawPoly);


    function drawPoly ()
    {
        // Extract the relevant coordinates from the Line chart coordinates
        var coords = [];
        for (var i=0; i<(line.coords.length / 2); i+=1) {
            coords.push(line.coords[i]);
        }

        for (var i=(line.coords.length - 1); i>=(line.coords.length / 2);i-=1) {
            coords.push(line.coords[i]);
        }

        var poly = new RGraph.Drawing.Poly({
            id: 'cvs',
            coords: coords,
            options: {
                colorsStroke: 'rgba(0,0,0,0)',
                filledColors: 'rgba(0,0,0,0)',
                tooltips: ['The tooltip!'],
                highlightFill: 'rgba(255,255,255,0.5)'
            }
        }).draw();
    }
</script>