dc.js x axis not refreshing

Question

I am using crossfilter with several charts in combination with dc.js.

When filtering with ring charts, the data in the linechart disappears, but the x-axis remains unchanged and doesn't refresh.

var tempLineChartt1    = dc.lineChart("#chart-line-temp-t1");

   tempLineChartt1
        .width(768)
        .height(480)
        .elasticX(true)
        .x(d3.time.scale().domain([dateDim.bottom(1)[0].dd,dateDim.top(1)[0].dd]))
        .elasticX(true)
        .dimension(dateDim)
        .group(iotmPerDate)
        .renderArea(true)
        .brushOn(false)
        .renderDataPoints(true)
        .clipPadding(10)
        .yAxisLabel("T1")

Gordon Gordon · Accepted Answer · 2016-12-01T17:15:22

I know this has been answered a few times, but I couldn't find a reference to exactly this in a quick search.

Mostly likely you're referring to the fact that bins aren't automatically removed from crossfilter groups. So dc.js sees no reason to change the X domain - elasticX(true) will only kick in when the set of X keys changes, and here the Y values have only dropped to zero.

You can use a "fake group" to filter out these results dynamically:

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

var filtered_group = remove_empty_bins(group) // or filter_bins, or whatever

chart.dimension(dim)
    .group(filtered_group)

https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups

With this in place, each time the line chart is redrawn, the fake group will filter out the zeros as the data is read. Then the line chart will recalculate the domain and zoom to fit.

dc.js x axis not refreshing

1 Answers