dc.js: Composite Chart filtering/labeling

Question

I have the following composite chart made in dc.js:

  barChart
    .dimension(savingsDimension)
    .colors('#009900')
    .centerBar(true)
    .elasticY(true)
    .title(function(d) { return d.key + ": " + d.value; });

  barChart2
    .dimension(savingsDimension)
    .colors('#000099')
    .centerBar(true)
    .elasticY(true)
    .title(function(d) { return d.key + ": " + d.value; });

  var lineChart = dc.lineChart(compositeChart)
    .dimension(savingsDimension)
    .colors('red')
    .useRightYAxis(true)
    .renderDataPoints({
      radius: 3,
      fillOpacity: 0.5,
      strokeOpacity: 0.8
    });

  var xUnits = data.map(function (d) {return d.short_date; }).sort();

  compositeChart
    .width(1300)
    .height(350)
    .x(d3.scale.ordinal().domain(xUnits))
    .xUnits(dc.units.ordinal)
    .xAxisLabel('Month')
    .brushOn(false)
    .elasticY(true)
    .margins({left: 80, top: 10, right: 190, bottom: 80})
    .legend(dc.legend().x(1160).y(220).itemHeight(13).gap(5))
    .compose([barChart, barChart2,
      lineChart
    ]).renderlet(function(chart){
      chart.selectAll("g.x text")
        .attr('transform', "rotate(-65)")
        .attr('x', -20);
    });

    barChart.group(fSavingsDimensionGroup, ' First Savings');
    barChart2.group(sSavingsDimensionGroup, 'Second Savings');

The first thing I am having trouble with is making it so that I can select an x-range on this composite chart which will then filter all of my other charts. Right now, I can select certain bars and filter it that way, but I can't select a range like in this example: http://dc-js.github.io/dc.js/examples/filtering.html

I tried using .controlsUseVisibility(true) but it just errors out.

Also, even though I have .centerBar(true) on both my bar charts, the labels still aren't centered. Not sure what I am doing wrong there.

Edit #1:

Changed the code to:

compositeChart
    .width(1300)
    .height(350)
    .x(d3.time.scale().domain([savingsDimension.bottom(1)
     [0].billing_period_start, savingsDimension.top(1)
     [0].billing_period_start]))
     [0].billing_period_start, savingsDimension.top(1) 
     [0].billing_period_start))
    .xAxisLabel('Month')
    .elasticY(true)
    .margins({left: 80, top: 10, right: 190, bottom: 80})
    .legend(dc.legend().x(1160).y(220).itemHeight(13).gap(5))
    .renderlet(function(chart){
      chart.selectAll("g.x text")
        .attr('transform', "rotate(-65)")
        .attr('x', -36)
        .attr('y', -20);
    });

compositeChart.xAxis().tickFormat(d3.time.format('%m-%Y')).ticks(24);
compositeChart.xUnits(d3.time.months)

And the chart now looks like:

The bars are weirdly spaced out and I have no idea why. I can now select a range on the chart, but it doesn't actually do any sort of filtering to the chart or any other chart on the page.

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

Currently the filtering behavior is selected by the type of x scale, so to get continuous brushing you could use a quantitative scale such as d3.time.scale(), convert your dates to date objects, and then use xAxis().tickFormat() to display them the way you want.

Here is the feature request to allow the range brush on ordinal charts. It is mainly a question of how to design the feature in a general way.

You are moving the tick labels with your renderlet, so you should adjust the displacement there in order to center your labels.

dc.js: Composite Chart filtering/labeling

1 Answers