# A Bar and HBar based dashboard

This is a sales dashboard - essentially just a couple of Bar charts along with a couple of Horizontal Bar charts. The charts are 300px wide each for a total of 600px and when the screen size shrinks they go to 300px wide. If you wanted to you could probably cut the size of the code down by using the RGraph.SVG.GLOBALS object to set some default values.

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.bar.js"></script>
    <script src="RGraph.svg.hbar.js"></script>

Put this where you want the chart to show up:

    <div style="width: 300px; float: left">
        <div style="width: 300px; height: 180px" id="cc1"></div>
        <div style="width: 300px; height: 250px" id="cc2"></div>
    </div>

    <div style="width: 300px; float: left">
        <div style="width: 300px; height: 180px" id="cc3"></div>
        <div style="width: 300px; height: 250px" id="cc4"></div>
    </div>

    <div style="clear: both"></div>

This is the code that generates the chart:

    <script>
        labels = ['John','Samantha','Lewis','Paula', 'Perry'];
        colors = ['#00c','#c00','orange','green'];

        RGraph.SVG.GLOBALS.colors = colors;

        bar1 = new RGraph.SVG.Bar({
            id: 'cc1',
            data: [[81,26],[35,25],[50,35],[80,26],[45,28]],
            options: {
                yaxisLabelsCount: 4,
                hmargin: 10,
                yaxis: false,
                xaxisTickmarks: false,
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                textSize: 8,
                textColor: 'gray',
                xaxisLabels: labels,
                gutterTop: 50,
                gutterRight: 5,
                yaxisMax: 100,
                key: ['Count','Avg inactive days']
            }
        }).draw();

        hbar1 = new RGraph.SVG.HBar({
            id: 'cc2',
            data: [[11,7,3,1],[4,2,6,0],[11,6,4,3],[8,8,3,2],[9,4,1,0]],
            options: {
                key: ['API Dev','Custom rep.','Data','Integration'],
                yaxisLabels: labels,
                grouping: 'stacked',
                strokestyle: 'white',
                textSize: 8,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                xaxis: false,
                yaxisTickmarks: false,
                vmargin: 7
            }
        }).draw();

        bar2 = new RGraph.SVG.Bar({
            id: 'cc3',
            data: [5349186, 1876562,1243027,944489],
            options: {
                colorsSequential: true,
                hmargin: 10,
                yaxis: false,
                xaxisTickmarks: false,
                backgroundGridBorder: false,
                backgroundGridVlines: false,
                textSize: 8,
                textColor: 'gray',
                gutterRight: 5,
                key: ['Count','Avg inactive days'],
                gutterTop: 50,
                gutterLeft: 75,
                keyOffsetx: 30,
                keyOffsety: -10,
                key: ['Direct','Custom','API Dev','Data'],
                labelsAbove: true,
                labelsAboveSize: 7
            }
        }).draw();

        hbar2 = new RGraph.SVG.HBar({
            id: 'cc4',
            data: [[15,22,5,3],[25,20,15,5],[5,5,6,4],[ 5,4,3,1],[5,8,4,3]],
            options: {
                key: ['API Dev','Custom rep.','Data','Integration'],
                yaxisLabels: labels,
                grouping: 'stacked',
                strokestyle: 'white',
                textSize: 8,
                backgroundGridHlines: false,
                backgroundGridBorder: false,
                xaxis: false,
                yaxisTickmarks: false,
                vmargin: 7
            }
        }).draw();
    </script>