Using Grouped Bars with DC.js

Question

I'm using the grouped bar PR of dc.js and the corresponding grouped bar chart example as a baseline.

For some reason, I have to use numbers in my data as opposed to strings. (Convert "male" and "female" to 1/0). I'm guessing it has to do with the reduce functions I'm using. This also effects my x-axis labels, of course. I'd rather they show the text variations.

ndx = crossfilter(eData),
groupDim = ndx.dimension(function(d) {return d.service;}), 
qtySumGroup = groupDim.group().reduce(
    function(p,v) { p[v.component] = (p[v.component] || 0) + v.qty; return p; }, 
    function(p,v) { p[v.component] = (p[v.component] || 0) - v.qty; return p; }, 
    function() { return{}; });

I'm also noticing that it doesn't seem to crossfilter the data. When I click one of the bars in a group, it doesn't filter my other charts on the page. What am I missing?

Could you clarify the gender problem, please? Your demo appears to be using "male" and "female" okay? — Gordon
My apologies. The problem is with the grouped bar chart. If you look at my code, you'll see a commented out section that shows a different set of data. Where [service] = "active" "guard" or "reserve". IF I use that data instead of the active data (which translates active/guard/reserve into 1/2/3) the chart will not render. (My original question changed service to gender to simplify the question) — carbonisle
Likewise, on the grouped bar chart, if you click a bar (the first blue would represent Army & Active. But, clicking it doesn't cause any of the other charts to filter. — carbonisle
There's no need to apologise for being new, or needing help. My pro-tips are: ask confidently, keep chat to a minimum, and always show what you have tried, and you will be fine here. — halfer

Gordon Gordon · Accepted Answer · 2017-02-05T19:11:15

Here's the first part of the answer. In order to use string components/genders for grouping, you'll need to adjust the way data is selected for "stacking" (actually grouping when this version of dc.js is used).

So, you can grab the component names by first walking the data and grabbing the components:

  var components = Object.keys(etsData.reduce(function(p, v) {
      p[v.component] = 1;
      return p;
  }, {}));

This builds an object where the keys are the component names, and then pulls just the keys as an array.

Then we use components to select the categories like so:

grpChart
        .group(qtySumGroup, components[0], sel_stack(components[0]));

for(var i=1; i<components.length; ++i)
    grpChart.stack(qtySumGroup, components[i], sel_stack(components[i]));

This is just the same as the original

grpChart
        .group(qtySumGroup, "1", sel_stack('1'));

for(var i=2; i<6; ++i)
    grpChart.stack(qtySumGroup, ''+i, sel_stack(i));

except that it is indexing by string instead of integer.

I realize this is not the important part of your question, but unfortunately filtering by stack segments is not currently supported in dc.js. I'll try to return to that part later today if I have time - it should be possible to hack it in using a dimension with compound keys (or using two dimensions) and a custom click event, but I haven't seen anyone try this yet.

It would no doubt be a helpful feature to add to dc.js, even if just as an external customization.

EDIT: I've added an example of filtering the segments of a stack, which should apply equally well for grouped bars (although I haven't tried it with your code). The technique is explained in the relevant dc.js issue.

Using Grouped Bars with DC.js

1 Answers