# A grouped SVG Waterfall chart using the Bar chart

A demonstration of a Waterfall chart where each bar is further being broken down by showing a grouped Bar chart within the bar. The Bar chart then 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: {
                gutterLeft: 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)
            {
                var coords = RGraph.SVG.arrayClone(waterfall.coords);

                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,
                        gutterLeft:     coords[index].x,
                        gutterRight:    waterfall.width - (coords[index].x + coords[index].width),
                        gutterTop:      coords[index].y,
                        gutterBottom:   waterfall.height - (coords[index].y + coords[index].height)
                    }
                }).draw();
            })(k);
        }
    </script>