Hi,

I am trying to create a Stacked Waterfall Column Chart as below (Excel). I have some questions about it. 

So in the example below the first bar has a static value. The second bar is the base. From the 3rd bar it adds or subtracts a value (the inputs) from the base and it will only show that specific amount and is hiding the base.The last bar is showing the total base again. 

How can I manage to create this in OS? I know how to create the waterfall, but I have some issues with setting the base and the total and of course also not showing the base from bar 3 to 9.

What the data looks like:

- a label:
   - a base value
   - the value that has to be added or substracted 

Example:

Bar 2 value = 8800
Bar 3 value = 8916 (added 116 to the base) etc. 


SubjectBase
Input
Bar 1

8852
Bar 2                -           8.800 
Bar 3                       8.800                -              116 
Bar 4                       8.916                -              100 

etc


So below one can see that the waterfall is only working with the inputs. But not with the baseline unfortunately. 



The AdvancedFormat_Init only contains:

SyntaxEditor Code Snippet

"
chart: {
        type: 'waterfall'
} "


I don't know if I need to use some DataSeries for this. I looked up on highcharts.com and other forum posts, but it did not bring me any further. 

Hope that someone could help me with the steps that have to be taken.

Hi Martijn,

If you have this data available (or easily calculatable) in the form of base + input pairs, you could have just a regular stacked column chart, not changing the chart type to waterfall, and have 2 series, 'base' and 'input', with the base series having a color of rgb(255,255,255,0).  and the input series color filled conditionally based on base and input value.

I'm trying this in an little test oml, have gotten this out of it so far, if you think this would work for you, I'll try to get something presentable for you tomorrow...










Hi Dorine,

This is exactly what I need! It would be helpful if you could show me how you have managed this. During that time I am trying to do it as you are stating. 

Many thanks for your help so far! 

Solution

Hi Martijn,


I attached my test oml, not entirely happy with styling yet, but you can see what I've got so far.

So, this is a solution involving only regular outsystems chart widget, no highcharts forge needed, and no advanced formatting added yet.

So I created a table with some test data, with both base and input values as attributes, but you could just as easy have some logic calculating base for each point, this was quicker for test...

Basically, in the preparation of the screen my chart is on, I use an aggregate to retrieve records from table, and for each record, I create 2 data points in a datapointlist, one in series base and one in series input.  


So label is obvious, whatever is given as name in the table.

for value of input series, you need to use abs(table value) because negative values are shown below the 0 line.

the 4th parameter of the rgb color of base is 0, meaning fully opaque

in color of input, some logic is added to columns a different color based on the data, you'll have to adjust to your needs.

The bit that doesn't work yet, is that I would not want to show a tooltip on the base series, but haven't found yet how, so now I show same as tooltip on input series.


Have fun with it,

Dorine


PS : these are the date with matching chart in my test :


Solution

Hi Dorine,

This helped me a lot. I never played with charts before, so  a new chapter opened for me. Many thanks for your help. Much appreciated! 


My pleasure,

posts like these are an excuse for me to try new stuff :-)

you might be interested in the efforts of osacc in this post, he's trying to use the actual waterfall chart type instead of faking it.