# The line chart from the front page(grayscale version) (an old version of the front page)

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="400" height="200">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

        window.onload = function ()
        {
            var data1 = [4,6,12,16,8,4,2,8,18,16,14,16];
            var data2 = [2,4,8,4,2,6,6,12,8,10,6,8];

            var myLine = new RGraph.Line({
                id: 'cvs',
                data: [data1, data2],
                options: {
                    labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
                    tickmarks: null,
                    gutterLeft: 40,
                    gutterRight: 15,
                    gutterBottom: 30,
                    colors: ['#ff0', 'pink'],
                    unitsPost: '%',
                    linewidth: 5,
                    hmargin: 15,
                    textColor: '#333',
                    textFont: 'Arial',
                    shadow: false,
                    backgroundGridAutofitNumvlines: 11,
                    backgroundGridVlines: false,
                    backgroundGridBorder: true,
                    noxaxis: true,
                    title: 'An example Line chart',
                    axisColor: '#666',
                    textColor: '#666',
                    spline: true,
                    textAccessible: true
                }
            }).on('draw', function (obj)
            {
                var pixels = obj.context.getImageData(0,0,obj.canvas.width,obj.canvas.height);

                for (var i=0,len=pixels.data.length; i<len; i+=4) {

                    var avg = (pixels.data[i] + pixels.data[i + 1] + pixels.data[i + 2]) / 3;

                    pixels.data[i] = avg;
                    pixels.data[i + 1] = avg;
                    pixels.data[i + 2] = avg;
                }

                obj.context.putImageData(pixels, 0, 0);
            }).draw();

            /**
            * Use the Trace animation to show the chart
            */
            myLine.set({
                tooltips: [
                    'January
    Started off the year quite averagely',
                    'February
    Better than January, rising quite nicely',
                    'March
    March was quite a spike',
                    'April
    Rising very impressively',
                    'May
    Dropping after the last two month spike',
                    'June
    Still dropping',
                    'July
    The fall is beginning to subside, but still dropping',
                    'August
    A good rise after the fall',
                    'September
    A very good peak',
                    'October
    The peak is now subsiding',
                    'November
    Still subsiding',
                    'December
    Rising again after the last fall',

                    'January
    Started off the year quite averagely as with Robert',
                    'February
    Rising as with Robert',
                    'March
    Not as good as Robert, but OK',
                    'April
    Dropping after the peak',
                    'May
    The low point as with last year',
                    'June
    Rising higher than Robert',
                    'July
    Consistent with last month',
                    'August
    A nice high point',
                    'September
    A low point',
                    'October
    A nice rise',
                    'November
    Falling for fall...',
                    'December
    Rising again for Christmas'
                ]
            })
            .trace2();
        };
    </script>