Dc.js no update between charts

Question

I am starting to use an try to understand dc.js.

Unfortunately, I cannot manage to make my graphs update when I select one value in one graph, as all the tutorials/examples are supposed to work.

I have made a jsfiddle here: http://jsfiddle.net/hqwzs3ko/12/

  var ndx = crossfilter(dataSet);
  dims = groups = {};
  dims.countries = ndx.dimension(function(d) {
    return d.countryCode;
  });
  dims.gender = ndx.dimension(function(d) {
    return d.Gender;
  });
  dims.emailFlag = ndx.dimension(function(d) {
    return d.emailFlag;
  });

  //dims.countries.filter("DEU");

  groups.all = ndx.groupAll();
  groups.countries = dims.countries.group();
  groups.gender = dims.gender.group();
  groups.emailFlag = dims.emailFlag.group();

The 3 graphs display 3 different dimensions, so filter applied to one show apply to the other?

Thanks in advance for your help.

Answer 1

Okay spotted.

All is working perfectly here: http://jsfiddle.net/hqwzs3ko/22/

The idea is to define a reduce function based on the value that you want to be counted on, in my case the number of records (clients). Therefore the reduce function must be based on a different value than the one used for the dimension creation:

groups.clientsPerCountries = dims.countries.group().reduceCount(function (d) { return +d.key});
groups.clientsPerGender = dims.gender.group().reduceCount(function (d) { return +d.key});
groups.clientsPerEmailFlag = dims.emailFlag.group().reduceCount(function (d) { return +d.key});

With this everything is fine!