An SVG Bar chart showing a bar-in-bar effect

There's a canvas version of this chart here.

This goes in the documents header:

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

Put this where you want the chart to show up:

<div style="width: 750px; height: 300px" id="cc"></div>

This is the code that generates the chart:

<script>
    data = {
        shipped: [88000,88000,105000,105000,116000,116000,126000],
        sold:    [30000,54000,54000,62000,63000,68000,68000]
    };

    bar1 = new RGraph.SVG.Bar({
        id: 'cc',
        data: data.shipped,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            gutterLeft: 75,
            colors: ['rgba(0,0,255,0.2)'],
            xaxisLabels: ['Mini','Ford','Mercedes','BMW','Fiat','Renault','Honda'],
            labelsAbove: data.shipped,
            labelsAboveSize: 8,
            title: 'Total cars produced vs sold',
            strokestyle: 'rgba(0,0,0,0)',
            yaxis: false
        }
    }).grow();

    bar2 = new RGraph.SVG.Bar({
        id: 'cc',
        data: data.sold,
        options: {
            yaxis: false,
            yaxisMax: bar1.scale.max,
            yaxisScale: false,
            xaxis: false,
            gutterLeft: bar1.properties.gutterLeft,
            colors: ['pink'],
            labelsAbove: true,
            labelsAboveSize: 8,
            hmargin: 20,
            backgroundGrid: false,
            strokestyle: 'rgba(0,0,0,0)',
            shadow: true
        }
    }).grow();
</script>

« Back