An SVG Line chart using transparency

This is a Line chart that has some custom values applied to it. It's a filled chart, also using the filledAccumulative option too. Gradients have been given to the fills and different colours given to the strokes. And finally it's also using the trace effect too.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.line.js"></script>

Put this where you want the chart to show up:

<div style="width: 750px; height: 300px; background-color: black" id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [
                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
            ],
            [
                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
            ]
        ],
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: '#999',
            shadow: false,
            textColor: 'white',
            textSize: 16,
            xaxisLabels: [
                '', 'Q1', '',
                '', 'Q2', '',
                '', 'Q3', '',
                '', 'Q4', ''
            ],
            yaxisUnitsPost: 'kg',
            gutterBottom: 35,
            gutterLeft: 70,
            gutterRight: 10,
            gutterTop: 25,
            linewidth: 3,
            filled: true,
            filledAccumulative: true,
            filledColors: [
                'Gradient(rgba(255,0,0,1):rgba(255,0,0,0.3))',
                'Gradient(rgba(0,255,0,1):rgba(0,0,0,0.75))'
            ]
        }
    }).trace();
</script>