Waterfall

Follow

Chris Morris

February 08, 2018 17:11

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

0

• 

  Expand Dev August 01, 2018 11:25 (Edited August 01, 2018 17:29)

   

   

  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);

  
  
  });

   

   

   

   

  0

  Permalink
• 

  Chris Morris August 01, 2018 11:37

  Hi 

  Thank you for answering this question after so much time, I will give this a go

  Chris

  0

  Permalink
• 

  Expand Dev August 01, 2018 11:38

  No worries, trying to do the same thing and saw there wasn't an info. I'll update this if I make more progress.

  0

  Permalink
• 

  Expand Dev August 02, 2018 10:06

  I tried using the "Additional Data Chart Tooltip Plugin" to get the hover over working as you decribe, but it doesn't work, think the issue is that the new ranges that I add are columnrange and not columns. But not sure on the exact issue.

  0

  Permalink
• 

  Expand Dev August 09, 2018 15:37 (Edited August 09, 2018 16:22)

  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 series

  var 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});

  0

  Permalink

Please sign in to leave a comment.