An SVG version of an older filled demo chart

This is an SVG version of an older canvas based demo that has been updated to be a bit more up-to-date style wise. The vertical lines on the grid have been removed, the X and Y axes have been removed and instead of being angular the line is now a spline (ie its curvy). And it now uses the trace animation effect too. The chart is a filled chart using the filledAccumulative option set to true.

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: 600px; height: 300px" id="cc"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Line({
        id: 'cc',
        data: [
            [4,6,12,16,8,4,2,8,18,16,14,16],
            [2,4,8,4,2,6,6,12,8,10,6,8],
            [1,3.5,5,3,4,5,6,11,8,9,5,7]
        ],
        options: {
            key: ['Robert','Daniel','Janice'],
            keyColors: ['green','blue','red'],
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            gutterLeft: 40,
            gutterTop: 55,
            gutterRight: 15,
            gutterBottom: 20,
            colors: ['black', 'black', 'black'],
            filled: true,
            filledAccumulative: true,
            filledColors: ['Gradient(red:white)', 'Gradient(blue:white)', 'Gradient(green:white)'],
            yaxisUnitsPost: '%',
            linewidth: 2,
            hmargin: 0,
            title: 'Robert, Daniel and Janices stats',
            textColor: '#333',
            textFont: 'Arial',
            spline: true,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false,
            gutterLeft: 50,
            gutterBottom: 50
        }
    }).trace();
</script>