Waterfall
Hi All
has anyone had any success implementing a waterfall chart with volume and % in it, I've tried the high chart plug in but it has not been updated for a while
Chris
-
You can make something like a waterfall with the column charts, creative use of functions and some javascript
Limitations include
- Hover over not working - have hidden the wrong result but don't know how to display something else
- No starting finishing bars
This one compares #visits to 12*conversions from the sample data. (12 times so they are comparible and you get increases and decreases.
You need 2 series (Change out "12*[Total # Converted]" and "[Total # Visits]" for your comparison)
Top - RSUM((12*[Total # Converted]))+(([Total # Visits]/contribution([Total # Visits]))-RSUM([Total # Visits]))-(12*[Total # Converted])+([Total # Visits])
Bottom - RSUM((12*[Total # Converted]))+(([Total # Visits]/(Contribution([Total # Visits])))-RSUM(([Total # Visits])))
Then add this javascript
widget.on("beforedatapointtooltip", function(w, args){
args.template = args.template.replace("{{item.value}}", "{{this.y}}");
});widget.on('processresult', function(w, args) {
var chartS = args.result.series;
var ch = args.result.chart;var chplot = args.plotOptions;
var smin = chartS[0];
var smax = chartS[1];var ranges = [];
for(var d = 0; d < smin.data.length; d++) {
if (smin.data[d].y >= smax.data[d].y) {
ranges.push([smin.data[d].y, smax.data[d].y]);
} else {
ranges.push([0,0]);
}
};
var rangesdown = [];
for(var d = 0; d < smin.data.length; d++) {
if (smin.data[d].y < smax.data[d].y) {
rangesdown.push([smin.data[d].y, smax.data[d].y]);
} else {
rangesdown.push([0,0]);
}
};
var rangeSeries = $$.object.clone(smin, true);
rangeSeries.data = ranges;
rangeSeries.type = 'columnrange',
rangeSeries.grouping = false,
rangeSeries.name = 'Decrease';
var rangeSeriesdown = $$.object.clone(smax, true);
rangeSeriesdown.data = rangesdown;
rangeSeriesdown.type = 'columnrange',
rangeSeriesdown.grouping = false,
rangeSeriesdown.linkedTo = ':previous',
rangeSeriesdown.name = 'Increase';
//add the range series
chartS.push(rangeSeries, rangeSeriesdown);
//remove the first 2 individual series for min max
chartS.splice(0, 2);
}); -
Ok added compatibility with the "Additional Data Chart Tooltip Plugin" to give the below
As well as the Top and Bottom series you also need a difference series as outlied below
Difference - (12*[Total # Converted]-[Total # Visits])
Outstanding issues
- Hover over on first and last bar not displaying useful information
Anyway code below.
widget.on('processresult', function(w, args) {
var chartS = args.result.series;
var smin = chartS[0];
var smax = chartS[1];
var xaxis = args.result.xAxis.categories;
//Make the decreases series
var rangeSeries = $$.object.clone(smin, true);
for(var d = 0; d < smin.data.length; d++) {
if (smin.data[d].y >= smax.data[d].y) {
rangeSeries.data[d].y = (smin.data[d].y);
rangeSeries.data[d].low =(smax.data[d].y);
} else {
rangeSeries.data[d].y = (0);
rangeSeries.data[d].low =(0);
}};
rangeSeries.type = 'column';
rangeSeries.grouping = false;
rangeSeries.name = 'Decrease';
rangeSeries.x=(xaxis);
//Make the increases seriesvar rangeSeriesdown = $$.object.clone(smax, true);
for(var d = 0; d < smin.data.length; d++) {
if (smin.data[d].y < smax.data[d].y) {
rangeSeriesdown.data[d].y=(smin.data[d].y);
rangeSeriesdown.data[d].low=(smax.data[d].y);
} else {
rangeSeriesdown.data[d].y=(0);
rangeSeriesdown.data[d].low=(0);
}};
rangeSeriesdown.type = 'column';
rangeSeriesdown.grouping = false;
rangeSeriesdown.linkedTo = ':previous';
rangeSeriesdown.name = 'Increase';
rangeSeriesdown.x=(xaxis);//update the x axis
xaxis.unshift(smin.name);
xaxis.push(smax.name);
//add the first and last bar
rangeSeries.data.unshift(['First Bar', smin.data[0].y, 0]);
rangeSeries.data.push(['End Bar', smax.data[smin.data.length-1].y, 0]);
rangeSeriesdown.data.unshift(['First Bar', 0, 0]);
rangeSeriesdown.data.push(['End Bar' , 0, 0]);
chartS[2].data.push(['End Bar' , 0, 0]);
chartS[2].data.unshift(['First Bar', 0, 0]);//Push the new series and delete original
chartS.push(rangeSeries, rangeSeriesdown);
chartS.splice(0,2);
});//additional info widget code to hide the two helper datasets and show the difference series
prism.additionalInfoTooltip (widget, {seriesIndexes:[0],displayCurrentSelection:false}); -
Expand Dev hi, thanks for your work here! we are trying to apply this, but not sure how. Specifically, why are there 2 series? It seems like this is always 1 series as seen on the chart
Please sign in to leave a comment.
Comments
7 comments