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:

.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: / )

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

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

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

• javascript
• sorting
• bar-chart
• dc.js
• crossfilter

• your fiddle does not work for me. – HattrickNZ Commented Jul 14, 2016 at 19:43

2 Answers 2

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)

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: