A Line chart with color bands

[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="950" height="350">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    // Data for the chart
    data = [80,90,70,90,80,80,70,20,10,60,95,97,90,50,20,85,70,80,80,70,90,80,90,90];

    // Configuration for the chart
    conf = {
        linewidth: 3,
        
        // These are an alternate set of colors (that aren't currently used)
        fills: ['#F2D8D9','#F9E7D3','#DCEAD9','#D9E7F4'],
        
        // Comment this line out to use the colors above instead
        fills: ['rgba(255,0,0,0.25)','rgba(255,255,0,0.25)','rgba(0,255,0,0.25)','rgba(0,0,255,0.25)'],

        xaxisLabels: [
            '','Q1\n2014','',
            '','Q2\n2014','',
            '','Q3\n2014','',
            '','Q4\n2014','',
            '','Q1\n2015','',
            '','Q2\n2015','',
            '','Q3\n2015','',
            '','Q4\n2015',''
        ],
        filled: true,
        backgroundGridColor: '#eee',
        backgroundGridVlines: false,
        backgroundGridBorder: false,
        backgroundGridHlinesCount: 4,
        axes: false,
        tickmarksStyle: 'circle',
        spline:    true,
        yaxisScaleUnitsPost: '%',
        marginLeft: 50,
        xaxisTickmarksCount: 7,
        yaxisLabelsCount: 4,
        yaxiScaleDecimals: 1,
        textColor: 'gray'
    };

    // Get references to the canvas and context
    ca = document.getElementById('cvs');
    co = ca.getContext('2d');

    // First draw the chart so that we can get the scale points
    line = drawChart({
        data: data,
        conf: conf,
        clipX: 0,
        clipY: 0,
        clipW: 1500,
        clipH: 500
    });

    // These are the coordinates that are used for the color bands
    y0 = 0;
    y1 = line.getYCoord(75);
    y2 = line.getYCoord(50);
    y3 = line.getYCoord(25);

    // Start with a clear canvas
    RGraph.clear(line.canvas);

    //
    // This is the function that draws a Line chart based on the
    // configuration that is passed to it.
    //
    function drawChart (opt)
    {
        co.save();
            
            // Draw the clipping region
            co.rect(
                opt.clipX,
                opt.clipY,
                opt.clipW,
                opt.clipH
            );
            co.clip();

            // Draw a chart (because the canvas is clipped only part of it
            // is visible)
            var line = new RGraph.Line({
                id: 'cvs',
                data: opt.data,
                options: opt.conf
            }).set({
                colors: ['black'],
                filledColors: opt.conf.fills[opt.index]
            }).draw();
        co.restore();
        
        return line;
    }


    // Draw the red area
    drawChart({data: data, conf: conf, index: 0, clipX: 0, clipY: y0, clipW: 1000, clipH: y1});
    
    // Draw the yellow area
    drawChart({data: data, conf: conf, index: 1, clipX: 0, clipY: y1, clipW: 1000, clipH: y2 - y1});

    // Draw the green area
    drawChart({data: data, conf: conf, index: 2, clipX: 0, clipY: y2, clipW: 1000, clipH: y3 - y2});
    
    // Draw the blue area
    drawChart({data: data, conf: conf, index: 2, clipX: 0, clipY: y3, clipW: 1000, clipH: ca.height - y3});</script>