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 filled and the filledAccumulative option is 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'],
            marginLeft: 40,
            marginTop: 55,
            marginRight: 15,
            marginBottom: 20,
            colors: ['black', 'black', 'black'],
            filled: true,
            filledAccumulative: true,
            filledColors: ['Gradient(red:white)', 'Gradient(blue:white)', 'Gradient(green:white)'],
            yaxisScaleUnitsPost: '%',
            linewidth: 2,
            hmargin: 0,
            title: 'Robert, Daniel and Janices stats',
            textColor: '#333',
            textFont: 'Arial',
            spline: true,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false,
            marginLeft: 50,
            marginBottom: 50
        }
    }).trace();
</script>