An SVG filled 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,5,4,8,7,9,8,10,6,8,7,5,6,4,5,4,3,2,1,1,0],
            [9,8,4,6,3,5,1,2,2,4,3,6,5,4,3,1,6,3,2,5,4]
        ],
        options: {
            hmargin: 0,
            gutterLeft: 50,
            gutterRight: 35,
            gutterBottom: 50,
            linewidth: 3,
            backgroundGridVlinesCount: 7,
            colors: ['green','red'],
            filled: true,
            filledOpacity: 0.15,
            xaxisLabels: [
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S'
            ],
            title: 'A filled Line chart',
            titleSize: 12
        }
    }).draw();
</script>

« Back