A waterfall chart where each bar is covered by a stacked Bar chart so it
looks like the Waterfall chart is a stacked variation. The chart is using
the labelsAbove
option which have been given a dark background
color in order to make them more readable.
<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: [39,34,33,38], bar: [ [26,13], [19,15], [14,19], [19,19] ] }; // 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: { ColorsStroke: 'rgba(0,0,0,0)', colors: ['red','#eee'], labelsAbove: true, labelsAboveBold: true, labelsAboveBackground: 'gray', labelsAboveBackgroundPadding: 3, labelsAboveColor: 'white', labelsAboveUnitsPost: '%', textSize: 8, colorsSequential: true, backgroundGrid: false, xaxis: false, yaxis: false, yaxisScaleMax: RGraph.SVG.arraySum(data.bar[index]), 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), marginInner: -1, grouping: 'stacked' } }).draw(); })(k); } </script>