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.
<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, gutterTop: 35, filled: true, tickmarks: 'filledcircle', colors: ['#058DC7'], linewidth: 3, tickmarksStyle: 'filledcircle', filledOpacity: 0.75, filledColors: ['#E6F4FA'], textSize: 8, yaxis: false, yaxisMax: 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.gutterLeft = 15; RGraph.SVG.GLOBALS.gutterRight = 15; RGraph.SVG.GLOBALS.gutterTop = 15; RGraph.SVG.GLOBALS.gutterBottom = 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.yaxisMax = 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>