A red and green SVG Line chart

This is a Line chart that has some custom values applied to it. It's a filled chart and is also using the filledAccumulative option so the datasets are stacked one on top of the other. Gradients have been given to the fills and different colors given to the strokes. It's also using the trace effect.

The gradients that are used as the fills aren't used for the stroke colors of the lines - those are separate green and blue (they aren't set specifically - but rather using the defaults instead).

There's a canvas version of this chart (line-filled-dark-trace-sequential.html) in the download archive where the datasets are traced individually and sequentially.

The responsive function changes the size of the text, reduces the size of the SVG tag and removes the CSS float.

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="float: right">
    <div style="width: 750px; height: 300px; background-color: black" id="chart-container"></div>
</div>

This is the code that generates the chart - it should be placed AFTER the div tag:

<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',
            xaxisLabels: [
                '', 'Q1', '',
                '', 'Q2', '',
                '', 'Q3', '',
                '', 'Q4', ''
            ],
            yaxisScaleUnitsPost: 'kg',
            marginBottom: 35,
            marginRight: 10,
            marginTop: 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))'
            ]
        }
    
    // Use the trace effect to show the chart and add some responsive capability that shrinks the
    // chart for a smaller screen
    }).trace().responsive([
        {maxWidth: null,width: 700,height:250,options: {textSize: 16,marginLeft:70},parentCss:{'float':'right',textAlign:'none'}},
        {maxWidth: 900, width: 400,height:200,options: {textSize: 12,marginLeft:60},parentCss:{'float':'none',textAlign:'center'}}
    ]);
</script>