A grouped 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: [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>
« Back