A Line chart using sequential trace effects

This is similar to the SVG demo svg-line-filled-dark.html but the trace effect traces each dataset seperately with a small delay in between.

[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:
<div style="background-color: black">
    <canvas id="cvs" width="700" height="300">[No canvas support]</canvas>
</div>
This is the code that generates the chart:
<script>
    dataset1 = [
        213, 212, 208, 209, 207, 205, 204, 206, 205, 202, 203, 202,
        201, 204, 205, 203, 142, 156, 152, 164, 165, 135, 198, 185,
        201, 195, 197, 194, 135, 132, 153, 156, 167, 174, 193, 195,
        192, 191, 190, 185, 188, 189, 187, 187, 180, 184, 186, 185,
        215, 218, 220, 171, 178, 182, 181, 175, 181, 179, 178, 179,
        178, 179, 175, 178, 177, 176, 174, 173, 175, 177, 174, 173,
        175, 174, 172, 171, 170, 169, 168, 169, 167, 165, 164, 162,
        160, 158, 155, 156, 157, 155, 159, 187, 184, 185, 186, 183,
        182, 184, 185, 187
    ];
    dataset2 = [
        120, 123, 121, 120, 125, 122, 121, 120, 118, 116, 113, 114,
        111, 108, 106, 118, 124, 123, 120, 134, 135, 115, 116, 125,
        132, 153, 148, 151, 165, 164, 166, 171, 178, 175, 176, 179,
        181, 183, 183, 185, 188, 189, 210, 213, 220, 184, 186, 145,
        156, 149, 132, 135, 132, 133, 128, 129, 126, 123, 122, 115,
        101, 213, 256, 255, 248, 245, 240, 238, 233, 212, 245, 255,
        251, 233, 251, 212, 156, 157, 184, 189, 194, 194, 192, 201,
        200, 203, 214, 228, 264, 233, 264, 254, 258, 251, 235, 239,
        233, 212, 244, 241
    ];

    new RGraph.Line({
        id: 'cvs',
        data: [
            dataset1,
            dataset2
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: '#999',
            shadow: false,
            textColor: 'white',
            textSize: 16,
            xaxisLabels: [
                '', 'Q1', '',
                '', 'Q2', '',
                '', 'Q3', '',
                '', 'Q4', ''
            ],
            yaxisScaleUnitsPost: 'kg',
            marginBottom: 35,
            marginLeft: 70,
            marginRight: 10,
            marginTop: 25,
            linewidth: 2,
            filled: true,
            filledAccumulative: true,
            filledColors: [
                'Gradient(rgba(255,0,0,0.3):rgba(255,0,0,1))',
                'rgba(0,0,0,0)'
            ],
            colors: ['red','transparent'],
            tickmarksStyle: null
        }
    }).trace();
    
    setTimeout(function ()
    {
        new RGraph.Line({
            id: 'cvs',
            data: [
                dataset1,
                dataset2
            ],
            options: {
                yaxisScaleMax: 450,
                backgroundGridVlines: false,
                backgroundGridBorder: false,
                backgroundGridColor: '#999',
                shadow: false,
                textColor: 'white',
                textSize: 16,
                xaxisLabels: [
                    '', 'Q1', '',
                    '', 'Q2', '',
                    '', 'Q3', '',
                    '', 'Q4', ''
                ],
                yaxisScaleUnitsPost: 'kg',
                marginBottom: 35,
                marginLeft: 70,
                marginRight: 10,
                marginTop: 25,
                linewidth: 2,
                filled: true,
                filledAccumulative: true,
                filledColors: [
                    'rgba(0,0,0,0)',
                    'Gradient(rgba(0,0,0,0.75):rgba(0,255,0,1))'
                ],
                tickmarksStyle: null
            }
        }).trace();
    }, 250);
</script>