A spline range Line chart

This range chart is a little different from the others because the datasets are organised a little differently. The first dataset that you give to the Line chart becomes the bottom dataset and is an absolute set of values - in the example here the first number is 4.

The second dataset, which is the top line, is additive/accumulative. In this case the first point of the second dataset is 1. So when it's added to the first point of the first dataset (which was 4) you get a total of 5 - which is the figure that is shown on the chart.

The reason for this is because the spline range chart is really a stacked spline chart - but with the bottom dataset using transparent as its color - so you can't see it.

This is shown below by gradually changing the color of the bottom dataset from blue to transparent.

[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>
    opacity = 1;
   
    line = new RGraph.Line({
        id: 'cvs',
        data: [
            [4,6,16,15,13,14,18,15,18,16],
            [1,1,1,2,3,5,9,9,6,3]
        ],
        options: {
            spline: true,
            filled: true,
            colors: ['red'],
            shadow: false,
            filledColors: ['rgba(0,0,255,1)','#fdd'],
            xaxisLabels: ['a','b','c','d','e','f','g','h','i','j'],
            xaxisTickmarksCount: 9,
            tickmarksStyle: null,
            marginBottom: 35,
            textSize:14,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxis: false
        }
    }).draw();

    for (var i=10; i>=0; i-=1) {
        (function (idx)
        {
            var opacity = i * 0.1;

            setTimeout(function () {
                line.set('filledColors', ['rgba(0,0,255,' + opacity + ')','#fdd']);
                RGraph.redraw();
            }, (10 - idx) * 100);
        })(i);
    }
</script>