A mock-up of a Google Analytics style dashboard

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 individual 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>

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