An SVG Line chart that used to be a front page demo

This goes in the documents header:

<script src="../libraries/RGraph.svg.common.core.js" ></script>
<script src="../libraries/RGraph.svg.line.js" ></script>

<div style="width: 450px; height: 250px" id="chart-container"></div>

This is the code that generates the chart:

<script>
    var line = new RGraph.SVG.Line({
        id: 'chart-container',
        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]
        ],
        options: {
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            yaxisUnitsPost: '%',
            xaxisTextColor: '#333',
            yaxisTextColor: '#333',
            gutterLeft:   40,
            gutterTop:    35,
            gutterRight:  15,
            gutterBottom: 50,
            colors: ['red','black'],
            linewidth: 7,
            shadow: true,
            shadowBlur: 3,
            shadowOpacity: 0.25,
            spline: true
            
        }
    }).trace();
</script>

« Back