Filtering crossfilter dimension using dropdown

Question

I am trying to filter my row chart by selecting values in a dropdown. I do this by creating a dimension and applying a filter to that dimension based on selected values in the dropdown.

The row chart has to display average values, to do this I created ReduceAdd/Remove/Initial functions. The average values are working as intended.

However, when I filter my dimension used for the dropdown, it seems to add duplicate values to my row chart.

Example code: http://jsfiddle.net/sy9xA/4/

var dropDownFilterDimension;
function ReduceAdd(p, v) {
var value = v.value;
++p.countAvg;
p.totalAvg += value;            
return p;
 }

 function ReduceRemove(p, v) {
var value = v.value
--p.countAvg;
p.totalAvg -= value;            
return p;
}

function ReduceInitial() {
return {countAvg: 0, totalAvg: 0};
}


function filterDropdown(dropDownID){
dropDown = document.getElementById(dropDownID);
dropDownFilterDimension.filterAll();
values = $(dropDown).val();
if( values != null ){
    dropDownFilterDimension.filter(function(d) { if (values.indexOf(d) > -1)   {return d;} });
}
dc.redrawAll();
 }

Here for example, when "banana" is selected for filtering. ReduceRemove is called for all non selected values, but in addition ReduceAdd is called for banana (even though it is already in it). So now when after selecting banana, apple is selected. Banana still has some value.

Can someone explain why this is happening? Or how i can avoid this from happening?

Thanks in advance! Robert

danipen danipen · Accepted Answer · 2014-05-18T14:48:44

I don't have fully understand what you are doing also because the jsfddle doesn't show nothing more than the js.

I can tell how I do:

you have a dimension associated to a dc chart (ex chartDim)
you have a group that calculate the average associated to a dc chart (ex averageGroup)
you have a dropdown with a set of values to be use as filter (#myDropDown)

d3.select('#myDropDown') .on('change', function(){ chartDim.filter(this.value) dc.redrawAll(); })

the call of dc.redrawAll() will update not only the chart but also the averageGroup and everything should go fine. If the dropDown has is own dimension just filter this one instead of the chartDim

Filtering crossfilter dimension using dropdown

1 Answers