A grouped SVG Waterfall chart created by using the Bar chart

A demonstration of a Waterfall chart where each bar is being further broken down by showing a grouped Bar chart within the bar. The Bar chart has the labelsAbove option enabled.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.waterfall.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the chart to show up:
<div style="width: 800px; height: 300px" id="chart-container"></div>
This is the code that generates the chart:
<script>
    // This is the data for the Waterfall and each of the Bar charts
    data = {
        waterfall: [54,43,56,48],
        bar: [
            [26,13,15],
            [19,15,9],
            [14,19,22],
            [19,19,10]
        ]
    };

    // Create the Waterfall chart
    waterfall = new RGraph.SVG.Waterfall({
        id: 'cc',
        data: RGraph.SVG.arrayClone(data.waterfall),
        options: {
            marginLeft: 50,
            xaxisLabels: ['John','Lewis','Pete','Jill','Total'],
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            xaxis: false,
            yaxis: false
        }
    }).draw();


    // Create the Bar charts
    for (var k=0; k<4; ++k) {

        (function (index)
        {
            new RGraph.SVG.Bar({
                id: 'cc',
                data: RGraph.SVG.arrayClone(data.bar[index]),
                options: {
                    colors: ['red','green','blue'],
                    labelsAbove: true,
                    labelsAboveBold: true,
                    labelsAboveSpecific: ['Mon','Tue','Wed'],
                    labelsAboveBackground: 'gray',
                    labelsAboveBackgroundPadding: 3,
                    labelsAboveColor: 'white',
                    textSize:         8,
                    colorsSequential: true,
                    backgroundGrid: false,
                    xaxis:          false,
                    yaxis:          false,
                    yaxisScale:     false,
                    marginLeft:     waterfall.coords[index].x,
                    marginRight:    waterfall.width - (waterfall.coords[index].x + waterfall.coords[index].width),
                    marginTop:      waterfall.coords[index].y,
                    marginBottom:   waterfall.height - (waterfall.coords[index].y + waterfall.coords[index].height)
                }
            }).draw();
        })(k);
    }
</script>