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. Different colors have been given to the strokes. It's also using the trace effect.

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: {
            backgroundGridColor: '#999',
            textColor: 'white',
            xaxisLabels: [
                '', 'Q1', '',
                '', 'Q2', '',
                '', 'Q3', '',
                '', 'Q4', ''
            ],
            yaxisScaleUnitsPost: 'kg',
            marginRight: 10,
            marginTop: 25,
            linewidth: 2,
            filled: true,
            filledAccumulative: true,
            filledColors: ['#f008','#0f08'],
            colors: ['red','#0f0'],
            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'}}
            ]
        }
    
    // Use the trace effect to show the chart and add some responsive capability that shrinks the
    // chart for a smaller screen
    }).trace();
</script>