Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to attach callback what fires whenever a crossfilter dimension filter changes?

I have several charts built with dc.js. I can achieve the desired functionality by attaching a callback to each dc.js chart's .on("filterted", function(chart) {}) but this is annoying because I have to attach the same callback to each chart. And error prone because as new charts are added, someone has to remember to attach an event hander. I would prefer to just attach a callback to the underlying crossfilter. Is that possible?

Is there a way to optimize this...

var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});

dc.pieChart(myDomId1)
  .dimension(dimAlpha)
  .group(groupAlpha)
  .on("filtered", function(chart) {
    //do stuff
  });

dc.pieChart(myDomId2)
  .dimension(dimBeta)
  .group(groupBeta)
  .on("filtered", function(chart) {
    //do stuff
  });

into something like this...

var ndx = crossfilter(data);
var dimAlpha = ndx.dimension(function(d) {return d.alpha});
var dimBeta = ndx.dimension(function(d) {return d.beta});
var groupAlpha = dimAlpha.group().reduceSum(function(d) {return 1;});
var groupBeta = dimBeta.group().reduceSum(function(d) {return 1;});

dc.pieChart(myDomId1)
  .dimension(dimAlpha)
  .group(groupAlpha);

dc.pieChart(myDomId2)
  .dimension(dimBeta)
  .group(groupBeta);

ndx.on("filtered", function() {
  //do stuff
})
like image 912
Nathan Reese Avatar asked Mar 13 '14 22:03

Nathan Reese


1 Answers

If you've got a million charts and don't want to have to attach the event listener to each one manually, you could iterate through the chart registry and add them that way. Ex:

dc.chartRegistry.list().forEach(function(chart) {
    chart.on('filtered', function() {
        // your event listener code goes here.
    });
});

Note that this code must go after the charts have instantiated to work.

like image 103
Mike Davlantes Avatar answered Sep 22 '22 03:09

Mike Davlantes