A mock-up of Google Analytics
This is a mock-up of the Google analytics dashboard with 7 Line charts.
It shows one main large 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 with a more complex demo like this.
As you can see from the code shown below, there's some css code as well as javascript to control the
layout and formatting of the individual div tags
For the six smaller charts the configuration is set on the RGraph.SVG.GLOBALS object.
Any configuration parameters that are set on this object can be considered as "default values" and
thus the configuration does not have to be set on each Line chart object.
The large text that appears on the left-hand-side of the smaller charts is added by using the
RGraph.SVG.text function. You too can use this function if you wish to add text
to your own charts. If you're using canvas though the function is called RGraph.text
and you might need to use the draw event to add it like this:
new RGraph.Bar({
id: 'cvs',
data: [12,18,10,9,6,20,18],
options: {
}
}).on('draw', function (obj)
{
RGraph.text({
object: obj,
font: 'Arial',
size: 12,
bold: false,
italic: false,
color: 'black',
x: 50,
y: 50,
text: 'This is some example text!',
valign: 'bottom',
halign: 'left',
tag: 'my-custom-text-label',
marker: false
});
}).draw();
Note: Be sure to add the draw event above the call to the draw function
(as is shown here) or it won't be called.
<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="text-align: center">
<div style="display: inline-block; width: 600px; height: 350px">
<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>
</div>
This is the code that generates the chart - it should be placed AFTER the div tag:
<script>
// Create the main, larger Line chart. The configuration makes
// it look like Google Analytics.
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,
// The X-axis labels for the chart
xaxisLabels: [
'00:00','','','','04:00','',
'','','08:00','','','',
'12:00','','','','16:00','',
'','','20:00','','','23:00'
],
backgroundGridBorder: false,
backgroundGridVlines: false,
backgroundGridHlinesCount: 2
}
}).draw();
// Set some global configuration values that are inherited by the
// following charts (ie the smaller charts).
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;
RGraph.SVG.GLOBALS.responsive = [
{maxWidth: null,parentCss: {marginLeft: 'auto','float': 'right'}},
{maxWidth: 850, parentCss: {marginRight: 'auto','float':'none'}}
];
// These are the smaller charts. There's no configuration values
// that are set here because the default values have been set
// above.
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();
// Add some text to the smaller charts. Because the smaller charts
// each have their own SVG tags the coordinates can be the same.
// This is the smaller text in the top left corner.
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});
// Add some more text to the top right of each SVG tag that acts as
// the titles for the charts. Like the above text - the X and Y
// coordinates can be the same because of the multiple SVG tags.
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>