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]
This is the code that generates the chart:
    line = new RGraph.Line({
        id: 'cvs',
        data: [
        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) {

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

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