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);
    });

    outer = new RGraph.Bar({
        id: 'cvs',
        data: data_outer,
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            colors: ['Gradient(#eee:#aaa)'],
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            textSize: 12,
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            axes: false,
            labelsAbove: true,
            labelsAboveUnitsPost: 'kg',
            yaxisScaleUnitsPost: 'kg',
            marginLeft: 50
        }
    }).grow();

    inner = new RGraph.Bar({
        id: 'cvs',
        data: data_inner,
        options: {
            colors: ['red','green','blue'],
            key: ['Johnny','Rufus','Larna'],
            keyPosition: 'margin',
            backgroundGrid: false,
            textSize: 12,
            shadow: false,
            colorsStroke: 'rgba(0,0,0,0)',
            axes: false,
            yaxisScaleMax: outer.scale2.max,
            hmargin: 10,
            marginLeft: outer.get('marginLeft'),
            labelsAbove: true,
            labelsAboveColor: '#333',
            labelsAboveSize: 8,
            yaxisLabels: false
        }
    }).wave();
</script>