An SVG Line chart using transparency

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>

« Back