Sorting (ordering) the bars in a bar chart by the bar values with dc.js

Question

How can I sort the x-axis (dimension) in the dc.js example by the computed value of the dimension instead of by the name of the dimension itself?

For example, consider the dc.js example for an Ordinal Bar Chart at:

https://github.com/dc-js/dc.js/blob/master/web/examples/ord.html

How can I sort the x-axis in descending order of fruit counts?

Here is what I have tried: (jsfiddle: http://jsfiddle.net/gautam/re9r9kk7/ )

var counts = [
  {name: "apple", cnt: 10},
  {name: "orange", cnt: 15},
  {name: "banana", cnt: 12},
  {name: "grapefruit", cnt: 2},
  {name: "grapefruit", cnt: 4}
];

var ndx            = crossfilter(counts),
    fruitDimension = ndx.dimension(function(d) {return d.name;}),
    sumGroup       = fruitDimension.group().reduceSum(function(d) {return d.cnt;});

chart
  .width(768)
  .height(380)
  .x(d3.scale.ordinal())
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .xAxisLabel("Fruit")
  .yAxisLabel("Quantity Sold")
  .dimension(fruitDimension)
  .barPadding(0.1)
  .outerPadding(0.05)
  .group(sumGroup);

Openhearted

your fiddle does not work for me. – Tellurian

Answer 1

There is a function on the base mixin called chart.ordering().

It is specifically for changing the order of ordinal values when the alphabetical default is not wanted. The function you pass to this function takes a {key,value} pair and returns a value to order on.

For ordering the bars in descending order by value, you'd do

chart.ordering(function(d) { return -d.value; })

Nowadays I'd write it

chart.ordering(({value}) => -value)

Solander

Answer 2

This may not be the best way to go about it but basically I did this:

var sortByCnt = counts.sort(function (a, b) { return a.cnt < b.cnt; });
var names = sortByCnt.map(function (d) { return d.name; });

chart
  .width(768)
  .height(380)
  .x(d3.scale.ordinal().domain(names))
  .xUnits(dc.units.ordinal)
  .brushOn(false)
  .xAxisLabel("Fruit")
  .yAxisLabel("Quantity Sold")
  .dimension(fruitDimension)
  .barPadding(0.1)
  .outerPadding(0.05)
  .group(sumGroup);

And it gave the result:

Fleta

Ah yes, that also works, and may have the same effect underneath. – Solander

smart! thank you. The .ordering() didn't work for me (ver 1.7.3) – Kind