# A Line chart that looks like Google Analytics

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.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 data     = [1056,1200,952,868,846,911,944,955,935,1132,1500,1666,1485,0,0,0,0,0,0,0,0,0,0,0,0];
            var tooltips = [];

            // Create the tooltips
            for (var i=0; i<data.length; i+=1) {
                tooltips[i] = 'Pageviews: ' + String(data[i])
            }

            var line = new RGraph.Line({
                id: 'cvs',
                data: data,
                options: {
                    tooltips: tooltips,
                    tooltipsHighlight: false,
                    colors: ['#058DC7'],
                    filled: true,
                    fillstyle: 'rgba(229,243,249,0.5)',
                    tickmarks: 'filledcircle',
                    backgroundGridVlines: false,
                    backgroundGridBorder: false,
                    backgroundGridAutofitNumhlines: 2,
                    shadow: false,
                    linewidth: 4,
                    gutterLeft: 50,
                    gutterRight: 20,
                    numxticks: 3,
                    ylabelsCount: 2,
                    axisColor: '#aaa',
                    textColor: '#aaa',
                    labels: ['00:00','04:00','08:00','12:00','16:00','20:00','00:00'],
                    textAccessible: true
                }
            }).trace2();
        };
    </script>