A mockup of a Google Analytics style dashboard

This is a mockup of the Google analytics dashboard with 7 Line charts. It shows one main larger Line chart along with 6 smaller charts that all indicate different metrics. Believe it or not - the data isn't real! There's more code than normal shown below - but that's to be expected.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.key.js"></script>
<script src="RGraph.svg.line.js"></script>
Put this where you want the chart to show up:
<style>
    div#cc1 {
        width: 600px;
        height: 200px;
    }

    div#cc2,
    div#cc3,
    div#cc4,
    div#cc5,
    div#cc6,
    div#cc7 {
        position: relative;
        float: left;
        width: 200px;
        height: 60px;
        border-right: 1px solid #ccc;
        box-sizing: border-box;
        margin-bottom: 15px;
    }
</style>

<div style="width: 600px; height: 300px">
    <div id="cc1"></div>
    <div id="cc2"></div>
    <div id="cc3"></div>
    <div id="cc4"></div>
    <div id="cc5"></div>
    <div id="cc6"></div>
    <div id="cc7"></div>
</div>
This is the code that generates the chart:
<script>
    l1 = new RGraph.SVG.Line({
        id: 'cc1',
        data: [22,61,64,35,91,59,62,91,124,94,77,196,309,147,102,107,199,36,0,0,0,0,0,0],
        options: {
            key: ['Pageviews'],
            keyColorShape: 'circle',
            keyTextSize: 10,
            keyOffsetx: -220,
            marginTop: 35,
            filled: true,
            colors: ['#058DC7'],
            linewidth: 3,
            tickmarksStyle: 'filledcircle',
            filledOpacity:  0.75,
            filledColors:  ['#E6F4FA'],
            textSize: 8,
            yaxis: false,
            yaxisScaleMax: 400,
            yaxisLabelsCount: 2,
            xaxis:false,
            xaxisLabels: [
                '','','','','04:00','',
                '','','08:00','','','',
                '12:00','','','','16:00','',
                '','','20:00','','',''
            ],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            backgroundGridHlinesCount: 2
        }
    }).draw();
    
    // Set the GLOBALS to the required configuration so it doesn't have to continually set
    RGraph.SVG.GLOBALS.backgroundGrid = false;
    RGraph.SVG.GLOBALS.marginLeft     = 15;
    RGraph.SVG.GLOBALS.marginRight    = 15;
    RGraph.SVG.GLOBALS.marginTop      = 15;
    RGraph.SVG.GLOBALS.marginBottom   = 5;
    RGraph.SVG.GLOBALS.filled         = true;
    RGraph.SVG.GLOBALS.colors         = ['#058DC7'];
    RGraph.SVG.GLOBALS.filledColors   = ['#E6F4FA'];
    RGraph.SVG.GLOBALS.textSize       = 8;
    RGraph.SVG.GLOBALS.yaxis          = false;
    RGraph.SVG.GLOBALS.yaxisScaleMax  = 20;
    RGraph.SVG.GLOBALS.yaxisScale     = false;
    RGraph.SVG.GLOBALS.xaxis          = false;
    RGraph.SVG.GLOBALS.backgroundGrid = false;
    
    // The smaller charts
    l2 = new RGraph.SVG.Line({id: 'cc2',data: [4,6,8,5,2,3,5,4,6,7,8,7,8,5,6,8,9,8,0,0,0,0,0,0]}).draw();
    l3 = new RGraph.SVG.Line({id: 'cc3',data: [1,6,3,5,2,4,5,6,8,7,8,6,8,9,4,7,5,4,0,0,0,0,0,0]}).draw();
    l4 = new RGraph.SVG.Line({id: 'cc4',data: [3,6,8,4,2,3,8,9,4,6,5,6,7,8,8,8,6,5,0,0,0,0,0,0]}).draw();
    l5 = new RGraph.SVG.Line({id: 'cc5',data: [2,3,1,0,0,8,7,8,9,1,4,6,3,4,5,2,8,1,0,0,0,0,0,0]}).draw();
    l6 = new RGraph.SVG.Line({id: 'cc6',data: [1,2,3,4,5,2,3,4,6,3,5,2,3,5,4,2,4,5,0,0,0,0,0,0]}).draw();
    l7 = new RGraph.SVG.Line({id: 'cc7',data: [4,6,8,5,3,4,5,6,8,4,5,6,3,5,6,7,4,5,0,0,0,0,0,0]}).draw();

    x    = 5;
    y    = 10;
    size = 8;
    RGraph.SVG.text({object: l2, x: x, y: y, text: 'Sessions',size: size});
    RGraph.SVG.text({object: l3, x: x, y: y, text: 'Users',size: size});
    RGraph.SVG.text({object: l4, x: x, y: y, text: 'Pageviews',size: size});
    RGraph.SVG.text({object: l5, x: x, y: y, text: 'Pages/Session',size: size});
    RGraph.SVG.text({object: l6, x: x, y: y, text: 'Avg session duration',size: size});
    RGraph.SVG.text({object: l7, x: x, y: y, text: 'Bounce rate',size: size});

    y    = 30;
    size = 16;
    RGraph.SVG.text({object: l2, x: x, y: y, text: '527',size: size});
    RGraph.SVG.text({object: l3, x: x, y: y, text: '444',size: size});
    RGraph.SVG.text({object: l4, x: x, y: y, text: '2178',size: size});
    RGraph.SVG.text({object: l5, x: x, y: y, text: '4.13',size: size});
    RGraph.SVG.text({object: l6, x: x, y: y, text: '00:03:55',size: size});
    RGraph.SVG.text({object: l7, x: x, y: y, text: '60.91%',size: size});
</script>