An SVG Horizontal Bar/Bar/Pie dashboard

Here's an example of a dashboard thats made up of Horizontal Bar charts, Bar charts and a Pie chart. There are various ways shown of visualising the same data. Each chart uses its own SVG tag and the DIV tags that you specify are shown below.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.hbar.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.pie.js"></script>
Put this where you want the chart to show up:
<div style="border: 1px solid gray; width: 750px; height: 600px">
    <div style="width: 375px; height: 200px; float: left" id="cc1"></div>
    <div style="width: 375px; height: 200px; float: left" id="cc2"></div>
    <div style="width: 150px; height: 200px; float: left" id="cc3"></div>
    <div style="width: 150px; height: 200px; float: left" id="cc4"></div>
    <div style="width: 150px; height: 200px; float: left" id="cc5"></div>
    <div style="width: 150px; height: 200px; float: left" id="cc6"></div>
    <div style="width: 150px; height: 200px; float: left" id="cc7"></div>
    <div style="width: 750px; height: 200px; float: left" id="cc8"></div>
</div>
This is the code that generates the chart:
<script>
    data   = [
        [10,23,18,25,15],
        [12,25,14,5,4],
        [13,20,13,8,3],
        [12,19,17,10,8],
        [15,16,13,8,5]
    ];
    colors    = ['#0B74B5','#D56229','#1B9F77','#CF77A9','#E79F26'];
    pieLabels = ['Category 1','Category 2','Category 3','Category 4','Category 5'];
    labels    = ['Item 1','Item 2','Item 3','Item 4','Item 5'];

    pie = new RGraph.SVG.Pie({
        id: 'cc1',
        data: data[0],
        options: {
            colors: colors,
            centerx: 250
        }
    }).draw();

    hbar1 = new RGraph.SVG.HBar({
        id: 'cc2',
        data: data,
        options: {
            colors: colors,
            grouping: 'stacked',
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            yaxisLabels: labels,
            xaxisScaleMax: 90
        }
    }).draw();
    
    // Add the labels on the left of the Pie chart
    for (var i=0; i<pieLabels.length; ++i) {
    
        var y = (i * 30) + 35;
    
        RGraph.SVG.text({
            object: pie,
            text: pieLabels[i],
            x: 100,
            y: y,
            halign: 'right',
            valign: 'center'
        });
        
        RGraph.SVG.create({
            svg: pie.svg,
            type: 'circle',
            attr: {
                cx: 115,
                cy: y,
                r: 8,
                fill: colors[i]
            }
        });
    }


    // Second row
    

    hbar2 = new RGraph.SVG.HBar({
        id: 'cc3',
        data: data[0],
        options: {
            colors: [colors[0]],
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            yaxisLabels: labels,
            xaxisScaleMax: 30,
            textSize: 10,
            xaxisLabelsCount: 2
        }
    }).draw();
    

    hbar2 = new RGraph.SVG.HBar({
        id: 'cc4',
        data: data[1],
        options: {
            colors: [colors[1]],
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            xaxisScaleMax: 30,
            textSize: 10,
            xaxisLabelsCount: 2
        }
    }).draw();
    

    hbar3 = new RGraph.SVG.HBar({
        id: 'cc5',
        data: data[2],
        options: {
            colors: [colors[2]],
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            xaxisScaleMax: 30,
            textSize: 10,
            xaxisLabelsCount: 2
        }
    }).draw();
    

    hbar4 = new RGraph.SVG.HBar({
        id: 'cc6',
        data: data[3],
        options: {
            colors: [colors[3]],
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            xaxisScaleMax: 30,
            textSize: 10,
            xaxisLabelsCount: 2
        }
    }).draw();
    

    hbar5 = new RGraph.SVG.HBar({
        id: 'cc7',
        data: data[4],
        options: {
            colors: [colors[4]],
            backgroundGrid: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            xaxisScaleMax: 30,
            textSize: 10,
            xaxisLabelsCount: 2
        }
    }).draw();
    

    bar = new RGraph.SVG.Bar({
        id: 'cc8',
        data: data,
        options: {
            colors: colors,
            backgroundGridHlinesCount: 2,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisTickmarks: false,
            yaxisTickmarks: false,
            yaxis: false,
            yaxisScaleMax: 30,
            yaxisLabelsCount: 2,
            hmargin: 25,
            xaxisLabels: labels
        }
    }).draw();
</script>