How can hide dc.js row chart values if values equal zero

Question

How can we hide if row chart values equal zero in dc.js after filtering .We have a code like this:

    var kurum=data.dimension(function(d){return ""+ d.KURUM;});
    var kurumGroup=kurum.group().reduceSum(function(d){return +d.INSIDANS});

    kurumRowMapChart
                    .width(300)
                    .height(200)
                    .margins({top: 5, left: 10, right: 10, bottom: 20})
                    .dimension(kurum)
                    .group(kurumGroup)
                    .colors(d3.scale.category10())
                    .elasticX(true)
                    .ordering(function(d) { return -d.value })
                    .xAxis().ticks(4);

This code works normally but we want to hiding when has filter if values equal zero.

Thanks

Answer 1

You can create a "fake group" which removes the bins containing zeros when .all() is called:

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value != 0;
            });
        }
    };
}

using it like this:

var filtered_group = remove_empty_bins(kurumGroup);

kurumRowMapChart.dimension(kurum)
    .group(filtered_group)
    ...

https://github.com/dc-js/dc.js/wiki/FAQ#remove-empty-bins

The idea is to create an object which sits between crossfilter and dc.js which looks like a crossfilter group and filters it on demand.

Here is a somewhat complicated example intended to test the transitions between varying numbers of bars:

http://dc-js.github.io/dc.js/transitions/ordinal-row-transitions.html

(Currently the transitions are not very good but it demonstrates remove_empty_bins well.)