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>