d3.js - Different filters for different charts using dc.js and crossfilter -

i have data of following format:

[   {"id": 1,  "title": temporary title, "team": teama, "group": 1},   {"id": 2,  "title": 1 dinosaur, "team": teama, "group": 2},   {"id": 3,  "title": book, "team": teamb, "group": 1},   {"id": 4,  "title": try again, "team": teamc, "group": 1},   {"id": 5,  "title": last one, "team": teamc, "group": 2} ] 

i want pie chart shows distribution of items in group 1 team, , datatable (grid) shows me entries in group 2. team filter should able apply both charts.

i pretty confused on how handle grouping/filtering achieve this. here have right now, automatically filters down group 2.

var byteamforpie = data.dimension(function (s) {     return s.team; });  var group1counts = byteamforpie.group().reducecount(function (d) {     if (d.group == 1) {         return 1;     }     return 0; });  var piechart = dc.piechart("#teampiechart"); piechart .width(500) .height(580) .innerradius(10) .dimension(byteam) .group(group1counts);  var bygroup = data.dimension(function (s) {     return s.group; }); bygroup.filter(2);  datatable = $('#chart').datatable({     "info": true,     "responsive": true,     "pagingtype": "full_numbers",     "lengthchange": true,     "pagelength": 15,     "lengthmenu": [10, 25, 50],     "blengthchange": false,     "bfilter": false,     "bsort": true,     "binfo": false,     "bautowidth": false,     "bdeferrender": true,     "aadata": bygroup.top(infinity),     "bdestroy": true,     "aocolumns": [         { "mdata": "id", "sdefaultcontent": "" },         { "mdata": "title", "sdefaultcontent": " " },         { "mdata": "team", "sdefaultcontent": " " },         { "mdata": "group", "sdefaultcontent": " " }     ] });   var byteam = data.dimension(function (s) { return s.team; }); var teams = byteam.group(); var filtered_teams = remove_empty_bins(teams); var teamschart = dc.rowchart("#teamchart"); teamschart.width(300).height(300).dimension(byteam).group(filtered_teams).label(function (d) {     return d.key; }) .labeloffsetx(-50) .ordering(function (d) {     return -d.value; }) .title(function (d) {     return d.value; }) .elasticx(true).x(d3.scale.ordinal()) .margins({ top: 10, bottom: 30, left: 55, right: 10 }); 

note: haven't included refreshtable() function datatable here

not sure if ideal, i'd remove bygroup.filter(2); , change

"aadata": bygroup.top(infinity)

to

"aadata": bygroup.top(infinity).filter(function(d) { return d.group === 2; })

in crossfilter, filters applied dimensions applied other dimensions , groups. when bygroup.filter(2), group1counts go 0.

you might want consider using dc.js's data table widget instead, automatically update without having manage it.