A stacked SVG Waterfall chart using the Bar chart
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: [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: {
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)
{
new RGraph.SVG.Bar({
id: 'cc',
data: [RGraph.SVG.arrayClone(data.bar[index])],
options: {
strokestyle: '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,
yaxisMax: RGraph.SVG.arraySum(data.bar[index]),
yaxisScale: false,
gutterLeft: waterfall.coords[index].x,
gutterRight: waterfall.width - (waterfall.coords[index].x + waterfall.coords[index].width),
gutterTop: waterfall.coords[index].y,
gutterBottom: waterfall.height - (waterfall.coords[index].y + waterfall.coords[index].height),
hmargin: -1,
grouping: 'stacked'
}
}).draw();
})(k);
}
</script>
« Back