allow brush on ordinal bar chart using dc.js

Question

I am trying to create a bar chart with ordinal values on x-axis using dc.js and also enable the brush on it.

The brush is used to filter other graphs for example a bubble chart and a row chart...I have managed to create all the graphs but the main problem is that the brush cannot filter other graphs according to what is selected but other graphs can filter the bar chart with the brush.

I am using code from the fiddles in the issue brush on ordinal barchart dc.js

Presumably the close vote is because you didn't include code. I disagree, but hey people on SO are trigger-happy. — Gordon
@Gordon..thanks for your help..here is the code in the fiddle link — Bryan Nahabwe

Gordon Gordon · Accepted Answer · 2017-09-25T21:13:34

Thanks for bringing this up. The solution I gave on the quoted ticket was incomplete, and I've updated it.

It only considered the return value of filterFunction, which will be used to display the brush. It did not actually apply the filter, which is the main purpose of filterFunction!

Two changes are required. First, we need to check if the filters array is empty and clear the dimension's filter if so. Second, we need to apply the resulting filter to the dimension if there is one.

So instead of

chart.filterHandler(function(dimension, filters) {
  return filters.map(function(rangefilt) {
    var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzz';
    return dc.filters.RangedFilter(low,high);
  });
});

we get

kpiMoveChart.filterHandler(function(dimension, filters) {
    if(filters.length === 0) {
        dimension.filter(null);
        return filters;
    }
    // actually should only contain one filter but use .map as a convenience
    var filters2 = filters.map(function(rangefilt) {
        var low = keys[Math.ceil(rangefilt[0])], high = keys[Math.ceil(rangefilt[1])] || 'zzzz';
        return dc.filters.RangedFilter(low,high);
    });
    dimension.filterRange(filters2[0]);
    return filters2;
});

In addition, you had one small typo: instead of keys[Math.ceil(rangefilt[1]) || 'zzzz'] it should be keys[Math.ceil(rangefilt[1])] || 'zzzz'

Finally, in your bubble chart, it's usually not necessary to override yAxisMin and friends in order to change the domain of the charts. If you want to fix the domain it's much more elegant to turn off elastic and set the domain directly:

kpiBubbleChart
    .y(d3.scale.linear().domain([-10, 160]))

(Overriding xAxisMin and xAxisMax didn't seem to have any effect because that scale is ordinal, so it's always going to use the list of keys.)

Here's my fork of your fiddle: https://jsfiddle.net/gordonwoodhull/g34Ldwaz/9/

allow brush on ordinal bar chart using dc.js

1 Answers