# A filled spline Line chart

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.common.dynamic.js"></script>
    <script src="RGraph.common.tooltips.js"></script>
    <script src="RGraph.common.effects.js"></script>
    <script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="600" height="250">
        [No canvas support]
    </canvas>

    <button onclick="accumulative = !accumulative; line.Set('filled.accumulative', accumulative); RGraph.Redraw();"> Toggle accumulative</button>

This is the code that generates the chart:

    <script>
        var accumulative = true;

        window.onload = function ()
        {
            // A global on purpose
            line = new RGraph.Line({
                id: 'cvs',
                data: [ [4,5,1,6,3,8,2], [4,8,6,3,5,2,4] ],
                options: {
                    gutterBottom: 35,
                    shadow: false,
                    spline: true,
                    backgroundGrid: false,
                    tickmarks: 'circle',
                    linewidth: 5,
                    hmargin: 5,
                    labels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                    filled: true,
                    filledAccumulative: accumulative,
                    fillstyle: ['rgba(255,0,0,0.3)', 'rgba(0,255,0,0.3)','rgba(0,0,255,0.3)'],
                    tooltips: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun','Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
                    textAccessible: true
                }
            }).draw();
        };
    </script>

« Back