A filled blue SVG Line chart

Note: The fill is clickable (using the filledClick option).

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: 850px; height: 400px; background-color: black" id="chart-container"></div>

This is the code that generates the chart:

<script>
    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [
            1,3,4,2,5,6,4,5,3,7,8,9,8,9,10,13,15,12,16,17,15,18,15,15,19,16,19,
            21,22,20,23,21,25,24,23,26,25,27,28,27,26,28,29,28,28,30,32,31,32,33,34,
            35,34,36,38,35,36,37,39,40,42,43,46,45,44,46,48,47,49,50,52,51,49,56,55,
            61,62,65,66,68,69,75,76,78,80,84,86,89,91,95,92,99,105,108,106,110,111,
            119,125,128,134,139,143,148,150                    
        ],
        options: {
            linewidth: 2,
            xaxisLabels: ['Aug 13, 2012','Sep 9 2013','Oct 6 2014'],
            gutterLeft: 65,
            gutterRight: 55,
            filled: true,
            filledColors: ['#C2D1F0'],
            filledClick: function (e, obj)
            {
                alert('The fill was clicked!');
            },
            colors: ['#3366CB'],
            yaxis: false,
            xaxis: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 16
        }
    }).trace();
</script>

« Back