Heatmap DC.js - how to filter multiple items manually

Question

I'm working on a heatmap chart using dc.js. During the page loads, i want to manually filter the heatmap.

For example, if it filter using this heatmap.filter("30,0"); it works when the page loads. but when i try to filter multiple values using the .filter() function, it didnt work.

I tried doing this just for testing.

    var test = [];

    test.push("30,0");
    test.push("40,2");
    heatmapChart.filter(test);

Though it works if its only one item, but if i add another array item, the chart breaks. Is there a specific way to filter multiple items manually?

Gordon Gordon · Accepted Answer · 2018-03-12T18:40:18

Yes, but there are a few layers of weird between here and there.

First, the actual filter items are constructed using dc.filters.TwoDimensionalFilter - I think your comma separated strings are only working by accident.

Second, the chart has already overridden .filter() so if you want to get at the base version which can handle multiple items, you need to call chart._filter() instead.

Finally, and weirdest of all, the syntax for filtering on multiple items is to supply an array containing a single array of filter items.

Putting these all together,

    var ff = [dc.filters.TwoDimensionalFilter([0,2008]),
              dc.filters.TwoDimensionalFilter([3,1994]),
              dc.filters.TwoDimensionalFilter([9,2000])];
    heatmapChart._filter([ff]);

works with the heatmap filtering example. Note the array of array of filters!

Heatmap DC.js - how to filter multiple items manually

1 Answers