A nested grouped Bar chart

This is a variation on the already existing nested Bar chart, this one with the nested Bar chart being grouped.

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="700" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    // The "master" inner data
    data_inner = [[4,2,5],[6,8,4],[4,8,9],[3,5,2],[1,5,5],[4,8,8],[6,3,5]];
    data_outer = [];




    // The totalled "outer" data
    data_inner.forEach(function (v, k, arr)
    {
        data_outer[k] = RGraph.arraySum(v);
    });

    var outer = new RGraph.Bar({
        id: 'cvs',
        data: data_outer,
        options: {
            labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            colors: ['Gradient(#eee:#aaa)'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 12,
            shadow: false,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true,
            noaxes: true,
            labelsAbove: true,
            labelsAboveUnitsPost: 'kg',
            unitsPost: 'kg',
            gutterLeft: 50
        }
    }).grow()





    var inner = new RGraph.Bar({
        id: 'cvs',
        data: data_inner,
        options: {
            colors: ['red','green','blue'],
            key: ['Johnny','Rufus','Larna'],
            keyPosition: 'gutter',
            backgroundGrid: false,
            textSize: 12,
            shadow: false,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true,
            noaxes: true,
            ymax: outer.scale2.max,
            hmargin: 10,
            gutterLeft: outer.get('gutterLeft'),
            labelsAbove: true,
            labelsAboveColor: '#333',
            labelsAboveSize: 8,
            ylabels: false
        }
    }).wave()
</script>

Share on Facebook Share on Twitter