A Line chart with different colors above a certain point

A Line chart with different colors above a certain point. It uses a filled range chart to achieve this effect.

[No canvas support]

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.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:
    var d1  = [1,4,8,5,2,3,6,5,15,16,12,13,18,19,15,16];
    var d2  = [];
    // Create the data
    for (var i=0; i<d1.length; i+=1) {
         d1[i] = d1[i] - 0.2; // The +/- 0.2 determines the width of the line
         d2[i] = d1[i] + 0.2;

    var line = new RGraph.Line({
        id: 'cvs',
        data: [d1, d2],
        options: {
            backgroundGridHlinesCount: 5,
            backgroundGridVlinesCount: 15,
            filled: true,
            filledRange: true,
            filledRangeThreshold: 10,
            filledRangeThresholdColors: ['red', 'blue'],
            xaxisLabels: ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P'],
            colors: ['transparent', 'transparent'],
            xaxisTickmarksCount: 15,
            tickmarksStyle: null