A range chart with a median value

[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>
    data = [10];
    range_upper = [];
    range_lower = [];

    // Create some data
    for (var i=1,last=10; i<240; i+=1) {

        var num = Number(last) + RGraph.random(-2,2);
        num = Math.max(num, 0);
        num = Math.min(num, 20);

        last = num;
        data.push(num);

        range_lower[i] = data[i] - 5;
        range_lower[i] = Math.max(range_lower[i], 0);
        range_upper[i] = data[i] + 5;
    }



    line = new RGraph.Line({
        id: 'cvs',
        data: [
            range_upper,
            range_lower
        ],
        options: {
            filled: true,
            filledRange: true,
            filledColors: 'rgba(0,132,0,0.25)',
            colors: ['rgba(0,0,0,0)'],
            backgroundGridVlinesCount: 11,
            tickmarksStyle: null,
            marginBottom: 50,
            xaxisTickmarksCount: 11,
            xaxis: false
        }
    }).draw();

    new RGraph.Line({
        id: 'cvs',
        data: data,
        options: {
            colors: ['#00830B'],
            backgroundGrid: false,
            axes: false,
            yaxisLabels: false,
            marginBottom: 50,
            tickmarksStyle: null,
            yaxisScaleMax: line.max,
            shadow: false,
            linewidth: 2,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        }
    }).draw();
</script>