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>