# A filled spline chart with a max value

This goes in the documents header:

    <script src="RGraph.common.core.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>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var data1 = [30,29,24,25,26,24,23,22,21,18,19,17,20,23,24, 24,26,27,29,30];
            var data2 = [1,3,2,1,2,3,3,2,4,1,2,3,2,1,2,4,3,5,3,2];
            var data3 = [10,13,12,15,16,19,14,15,16,18,20,18,16,18,17,19,20,22,23,23];
            var data4 = [3,5,7,8,4,6,5,4,3,1,2,4,5,2,1,3,4,6,2,4];

            // Make the last dataset equal to 65
            var data5 = [], i = data1.length; while(i--) {
                data5[i] = 65 - (data1[i] + data2[i] + data3[i] + data4[i]);
            }

            var obj = new RGraph.Line({
                id: 'cvs',
                data: [data1, data2, data3, data4, data5],
                options: {
                    linewidth: 0,
                    filled: true,
                    spline: !RGraph.ISOLD,
                    colors: ['red','yellow','#0d0','yellow','red'],
                    strokestyle: 'rgba(0,0,0,0)',
                    shadow: false,
                    numxticks: 4,
                    ymax: 65,
                    noyaxis: true,
                    labels: [
                        '','','','Monday','','',
                        '','','','Tuesday','','',
                        '','','','Wednesday','','',
                        '','','','Thursday','',''
                    ],
                    tickmarks: null,
                    textSize:14,
                    scaleZerostart: true,
                    textAccessible: true
                }
            }).draw();
        };
    </script>

« Back