Sorting the bars in a bar chart with dc.js

Question

I am new to dc.js and d3.js. I have created a bar chart along with pie charts and a line chart with dc.js.

Now, in the bar chart I want to sort the bars based on the value that each bar represents. (For example, by clicking a button.) Is this possible with dc.js?

Note that I have designed my bar chart such that the X-axis represents geographic locations and the Y-axis is scaling on some value.

MSI MSI · Accepted Answer · 2014-05-09T14:07:52

Could you show us some code ?

In the past I have done that this way for a row chart :

var topRowChart = dc.rowChart("#chart-top-dest");

topRowChart
.height(400)
.width(400)
.dimension(destination, "destination")
.group(calls,"calls")
.ordering(function(t){return t.calls;})
.label(function(d){ return d.key + " : " + d.value + " calls" ;})
.cap(10);

The important bits are :

.ordering(function(t){return t.calls;})
.cap(10);

You have to pass a function to ordering() that returns the dimension/group that will be used for sorting.

Surprisingly removing cap() cancels the sorting.

Sorting the bars in a bar chart with dc.js

1 Answers