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);

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; })

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: