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="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: