Waterfall Tutorials¶
Step by step tutorial¶
The user story¶
I’m a C-level manager in an international company.
Last year my revenue was 64 M$ and this year my revenue is 161 M$.
Awesome! Does that mean every region/country performed well?
Which county contributed the most to this increase? Which one needs more attention to make sure the sales will go back up?
As I’m analyzing the variation between 2 points in time, let’s do a waterfall
Warning
Before you start!
Make sure you added your datasource to your application. Once you’re done create a new story.
Pick some data¶
To create a nice waterfall, the chart needs to understand what is value to beginning with, what is the value at the end, what is in between, etc…
So your data should reflect this structure in some way.
You need :
a
typecolumn: this will help understand where goes what. Is this line the value for the start? the end? the lowest level of detail (child)? The highest one (parent)?a
labelcolumn: what i’m I showing at the lowest level?In our case my countries.
a
valuecolumn: what is the number I want to show?In our case my revenue
and sometimes a
groupcolumn : only if I want to drill and display a parent group before drilling into the lowest level of detail
If your data is alredy in this format, move on to the next step.
In our case my data does not look like that. I just have the data for the countries by year…
Don’t worry! We created a data function to get the data ready for our waterfall. It will take just a few minutes.
📖 Learn more on how to make your data waterfall compliant with this tutorial
Also, you can create fake data fitting the waterfall format with our awesome fake data generator Fakir.
After following the tutorial, this is how my query should look like in the Dataset Editor.
See on the left side how the data has been formatted!
Image of chart waterfall postprocess
Add units to your revenue column to contextualize the information and give meaning to your story.
Chart Parameters¶
Once my data has been setup I can now choose to configure a waterfall.
I just need to follow the steps, and in 3 clicks I’m done!
Image of chart waterfall parameters
Add a drill¶
Pretty cool what I did in a few clicks, but it would be nice to have a summary by region before looking into the countries…
Let’s add a drill functionality!
Let’s edit the chart and go to the Dataset Editor.
From there, in the post-process section, I just need to make sure I add
a insideGroup parameter and I update the upperGroup one.
Just like below:
Then I go the chart parameters menu and I add the optional parameter
group to my configuration
Image of chart waterfall drill parameters
Add steps¶
Don’t want to have to click to see the countries? Hum, what if I add steps instead?
Tip
Re-create a brand new waterfall (without drill) to be able to compare the 2 graphs and choose between them
In the optional parameters activate the steps options. Then define where to put the steps.
Image of chart waterfall steps2
Other configuration examples¶
The order of the data will be kept in the waterfall chart. So if you
need a specific order for your labels, order your data in your query. A
good way to do this is by adding a labels_order column and using a
$sort stage in your data query.
Preparing the data in the right shape can be complicated with the
waterfallchart, especially if you have multiple filters and an order to
keep. Luckily, we created a postprocess helper for this. Check out the
waterfall postprocess step in the documentation, it might save you a
lot of time.
These datasets are used in the examples.
Waterfall without drill
| country | region | my_type | nb_movies | var |
|---|---|---|---|---|
| N-1 | N-1 | -1 | 100 | |
| Europe | Europe | parent | -20 | -0,04 |
| Asia | Asia | parent | 40 | 0,1 |
| America | America | parent | 30 | 0,02 |
| N | N | -1 | 150 |
Waterfall with drill
| country | region | my_type | nb_movies | var | order | revenue |
|---|---|---|---|---|---|---|
| N-1 | N-1 | -1 | 100 | 0 | 250 | |
| Europe | Europe | parent | -20 | -0,04 | 2 | -50 |
| France | Europe | child | -10 | -0,03 | 3 | -25 |
| Germany | Europe | child | -15 | -0,1 | 5 | -38 |
| UK | Europe | child | 5 | 0,02 | 4 | 13 |
| Asia | Asia | parent | 40 | 0,1 | 6 | 100 |
| India | Asia | child | 25 | 0,01 | 8 | 63 |
| China | Asia | child | 15 | 0,05 | 7 | 38 |
| Africa | Africa | parent | 15 | 0,2 | 9 | 38 |
| America | America | parent | 30 | 0,02 | 10 | 75 |
| USA | America | child | -10 | -0,03 | 12 | -25 |
| Canada | America | child | 10 | 0,06 | 11 | 25 |
| Mexico | America | child | 30 | 0,01 | 13 | 75 |
| N | N | -1 | 165 | 14 | 413 |
Mandatory parameters : - value: name of the column containing the
value - label: name of the column containing the text label to
display
Image of chart waterfall simple
Mandatory parameters : - Groups type/levels: name of the column that
provides the drill level for each element (i.e. is it a parent or a
child, the type should be -1 for the first and last labels) -
Parent label: name of the column that provides the groups (i.e. the
parentand all of its child)
Image of chart waterfall drill
Mandatory parameters : - variation: name of the column containing
the variation value you wish to display below the main value; it needs
to be given for both inner and outer drill levels
Image of chart waterfall variation
Please take a look to this documentation for further informations
Image of chart waterfall units
Mandatory parameters : - hide legend evolution: Set true if you want
to hide the parenthesis around evolution text
Image of chart waterfall hide parenthesis
Mandatory parameters : - Parents order: array with the custom order
for your groups [my_group1, my_group2,…] or name of the column in
your data that you want to use to sort the groups
Image of chart
Mandatory parameters : - labels order: array with the custom order
for your labels [my_label1, my_label2,…] or name of the column in
your data that you want to use to sort the labels. The same common order
rule will be used for each group. Ordering labels will have an impact on
groups order (unless a groupsOrder is specified) if different labels are
present in the different groups.
Image of chart waterfall labelsoder
Mandatory parameters : - reverse automatic sentiment color:
true/false (default to false), whether to reverse the sentiment (i.e.
negative values are positive/green)
Image of chart waterfall reverse sentiment
Mandatory parameters : - steps - Array of steps to get intermediate
values in the bridge. A step object is composed of to keys: * label
: label after which to insert the step * step : label to display
for the step
Image of chart waterfall steps
Mandatory parameters : - Baseline: number that sets a new baseline
value (default to 0)
Image of chart waterfall zerobaseline
Mandatory parameters : - additional information: additional meta
information to display (see the meta documentation for more details on
the syntax)
Image of chart waterfall meta
Deprecated configuration¶
Warning
These examples are from the code mode. ⚠️ the chartOptions &
data are deprecated, make sure to use de datasets/charts
configuration.
This configuration has been deprecated and is not available anymore. You don’t need to change your configuration, it’s still compatible”.
These datasets are used in the examples.
Waterfall without drill
| country | nb_movies | var |
|---|---|---|
| N-1 | 100 | |
| Europe | -20 | -0,04 |
| Asia | 40 | 0,1 |
| America | 30 | 0,02 |
| N | 150 |
Waterfall with drill
| country | region | my_type | nb_movies | var | order | revenue |
|---|---|---|---|---|---|---|
| N-1 | N-1 | 100 | 0 | 250 | ||
| Europe | Europe | parent | -20 | -0,04 | 2 | -50 |
| France | Europe | child | -10 | -0,03 | 3 | -25 |
| Germany | Europe | child | -15 | -0,1 | 5 | -38 |
| UK | Europe | child | 5 | 0,02 | 4 | 13 |
| Asia | Asia | parent | 40 | 0,1 | 6 | 100 |
| India | Asia | child | 25 | 0,01 | 8 | 63 |
| China | Asia | child | 15 | 0,05 | 7 | 38 |
| Africa | Africa | parent | 15 | 0,2 | 9 | 38 |
| America | America | parent | 30 | 0,02 | 10 | 75 |
| USA | America | child | -10 | -0,03 | 12 | -25 |
| Canada | America | child | 10 | 0,06 | 11 | 25 |
| Mexico | America | child | 30 | 0,01 | 13 | 75 |
| N | N | 165 | 14 | 413 |
Image of chart
{
level: 3
parent_id: 120
id:1200001
title: "Waterfall simple - mode 2"
chartOptions:
data:
query:
domain:"waterfall_simple2"
chartType: "waterfallchart"
value:"nb_movies"
label:"country"
}
Image of chart
{
level: 3
parent_id: 120
id:1200002
title: "Waterfall drill - mode 2"
chartOptions:
data:
query:
domain:"waterfall_drill2"
chartType: "waterfallchart"
value:"nb_movies"
label:"country"
drillLevel: "my_type"
drillGroup: "region"
}
That’s it!