filter individual segments of stacked chart

[NikhilChandrasenanNair]

Hi,

I have created a stacked bar chart.I want to filter data of other charts by clicking on individual segements of bar chart.
Below is the image of the charts.

Here is the fiddle link http://jsfiddle.net/Lihkinrian/J7TYD/

[gordonwoodhull]

That's an interesting idea. Would it filter in two dimensions simultaneously, or just filter on the stack dimension and not the X axis dimension?

[NikhilChandrasenanNair]

Ideally it should filter both Axis but then it depends on the data.
Eg: In my use case
If i click on any of stacked bar chart blocks then in chart 2 & 3 Y-Axis should be filtered but on 4th chart X-Axis should be filtered.

[gordonwoodhull]

You would have to do this with a renderlet right now.

[gordonwoodhull]

Although it would be great to add this feature to dc.js core, it's not horribly difficult to implement it outside the library.

I've added an example of filtering stacks in v2.1.4.

The key is to key your dimension on both the x axis value and the stack key:

          function multikey(x,y) {
              return x + 'x' + y;
          }
              runExptDim = ndx.dimension(function(d) { return multikey(d.Run, d.Expt); }),

Then build a conventional multivalue fake group from the multikey group. The keys are the x values, and the values are objects keyed on the stack key:

          function stack_second(group) {
              return {
                  all: function() {
                      var all = group.all(),
                          m = {};
                      // build matrix from multikey/value pairs
                      all.forEach(function(kv) {
                          var ks = splitkey(kv.key);
                          m[ks[0]] = m[ks[0]] || {};
                          m[ks[0]][ks[1]] = kv.value;
                      });
                      // then produce multivalue key/value pairs
                      return Object.keys(m).map(function(k) {
                          return {key: k, value: m[k]};
                      });
                  }
              };
          }
              runExptGroup = runExptDim.group().reduceSum(function(d) {
                  return d.Speed;
              }),
              stackedGroup = stack_second(runExptGroup);

We'll disable built-in brushing and implement the click event ourselves:

         chart
              .brushOn(false)

          chart.on('pretransition', function(chart) {
              chart.selectAll('rect.bar')
                  .classed('stack-deselected', function(d) {
                      // display stack faded if the chart has filters AND
                      // the current stack is not one of them
                      var key = multikey(d.x, d.layer);
                      return chart.filter() && chart.filters().indexOf(key)===-1;
                  })
                  .on('click', function(d) {
                      chart.filter(multikey(d.x, d.layer));
                      dc.redrawAll();
                  });

This also applies a custom style to the stack segments, because we can't use the default deselected style. It turns the elements grey, which makes it impossible to distinguish the stacks from each other. Instead we'll bring the opacity very low:

      .dc-chart rect.stack-deselected {
          opacity: 0.2;
      }

And that's it! The usual filter behavior of toggling elements works well here; it's just that we've redefined the elements to be segments.