CODEWITHSUNDEEP
javascriptdc.jscrossfilter
Shahabaz
Shahabaz

Reputation: 665

How to Create waterfall chart in dc.js

I am trying to create a waterfall chart using dc.js it seems there are not many examples for waterfall chart. How do I achive waterfall chart similar to this one from http://bl.ocks.org/chucklam/f3c7b3e3709a0afd5d57 ?

PS: Will update the answer with a proper solution once I get a hint of the chart. I am trying to create more advanced charts which can be extended as part of dc.js examples.

Upvotes: 2

Views: 311

Answers (1)

Vistas
Vistas

Reputation: 41

This might be a late reply to the thread. I'm adding an answer in case anyone else (in addition to the original poster) hits the same question. The code representing my answer is on GitHub. I will give an explanation here as my git repo still lacks a proper readme file (apologies).

The trick is to create two (crossfilter) groups, one containing your real data and the other a dummy data. This dummy data is supposed to serve as support for your columns in the waterfall chart (you can also think of them as the shadow of each column of your data). The values for this dummy data follows this formulation:

Dummy value of current column = previous dummy value + previous real data value

The formula above doesn't account for the first and last columns though. They should be set manually (before and after the loop respectively) if the formula is used within a loop. The first column's dummy value should be 0 and the last one equal to the last value from your real data. Also, some decoration must be done on the chart to render the dummy columns invisible (even when selected/deselected). This feature too is available in the git code.

Upvotes: 1

Related Questions