A filled spline SVG Line chart

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" id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            [4,8,6,1,5,12,5,3,6,4,9,9],
            [8,2,6,15,10,5,5,8,6,8,9,5]
        ],
        options: {
            yaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            hmargin: 15,
            gutterLeft: 75,
            gutterRight: 25,
            gutterBottom: 35,
            yaxisUnitsPre: '$',
            spline: true,
            filled:true,
            filledAccumulative: true,
            linewidth: 0,
            filledOpacity: 0.3,
            title: 'A filled spline chart',
            titleFont: 'Arial black',
            titleItalic: true,
            titleColor: 'gray'
        }
    }).trace();
</script>

« Back