DC.js - Select Menu as a filter for Composite charts

Question

My dataset is similar to this.

name,code,proc,subP,date,m,a,b,o,t
BW,1333,29,1,2015-12-29 02:30:00,10,0,0,0,10
BW,1333,29,1,2015-12-29 12:00:00,25,0,0,0,25
BW,1333,29,1,2015-12-30 12:00:00,26,0,0,0,26
BW,1333,29,2,2015-12-31 12:00:00,27,0,0,0,27
BW,1333,29,2,2016-01-01 12:00:00,26.1,4.9,1.8,0,32.8
BW,1333,29,2,2016-01-02 12:00:00,26.4,4.9,1.9,0,33.2
BW,1333,29,2,2016-01-03 12:00:00,26.2,4.9,1.9,0,33
...
NS,1212,11,1,2016-07-28 15:30:00,1.6,3.7,4.4,0,9.7
NS,1212,11,1,2016-07-29 12:00:00,17.4,2.3,0,0,19.7
NS,1212,11,1,2016-07-30 12:00:00,21,5,14.1,0,40.1
NS,1212,11,2,2016-07-31 11:12:00,18.1,3.5,6.1,0,27.7
NS,1212,11,2,2016-07-31 12:00:00,0.1,0.2,0.2,0,0.5
NS,1212,11,2,2016-08-01 12:00:00,0.1,2.7,2.6,0,5.4

I'm using a composite line chart to represent this data.

I'm using selectMenu to filter 'BW' and 'NS' records. But the composite chart remains unchanged when I use selectmenu.

I split the data into two seperate files (one with 'BW' records and the other with 'NS' records) to try to implement the data selection functionality provided in dc.js Series Chart example . That didnt work either.

Here is a fiddle with one of the charts.

Ultimately, I would like to filter multiple charts(composite, series and bubble) by 'BW' and 'NS' records with or without a select menu.

How can I implement this?

Gordon Gordon · Accepted Answer · 2018-08-14T13:07:55

The problem isn't with your selectMenu or your composite chart, it's with the way you are reducing data.

The first parameter to group.reduce() is the add function, the second parameter is the remove function, and the final one is the initialize function.

You usually don't want to set p directly from v as you are doing:

var grp = dim.group().reduce(
          function(p,v){
            p.m = +v.m;
            p.a = +v.a;
            p.b = +v.b;
            return p;
          },
          function(p,v){
            p.m = +v.m;
            p.a = +v.a;
            p.b = +v.b;
            return p;
          },
          function(){return {m:0, a:0, b:0}; });

That will only work if every key is perfectly unique and no two items ever fall in the same bin.

And you almost never want to set p from v in the remove function. That will prevent anything from ever being removed.

Instead, add and subtract the values like so:

var grp = dim.group().reduce(
          function(p,v){
            p.m = p.m + +v.m;
            p.a = p.a + +v.a;
            p.b = p.b + +v.b;
            return p;
          },
          function(p,v){
            p.m = p.m - +v.m;
            p.a = p.a - +v.a;
            p.b = p.b - +v.b;
            return p;
          },
          function(){return {m:0, a:0, b:0}; });

Here's a working fork of your fiddle.

DC.js - Select Menu as a filter for Composite charts

1 Answers