Waterfall

Comments

5 comments

  • Avatar
    Expand Dev (Edited )

     

     

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



    });

     

     

     

     

  • Avatar
    Chris Morris

    Hi 

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

    Chris

  • Avatar
    Expand Dev

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

  • Avatar
    Expand Dev

    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.

  • Avatar
    Expand Dev (Edited )

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

Please sign in to leave a comment.