dc.js charts not linked

Question

I have two barCharts exactly equivalent except for the .brushOn option :

pnlPerDaybarChart
    .height(300)
    .width(700)
    .dimension(dims.date)
    .group(groups.date.pnlSum)
    .valueAccessor(function(d) {
        return Math.abs(d.value);
    })
    .renderTitle(false)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xUnits(d3.time.days)
    .colors(colorChoice)
    .colorAccessor(colorAccessorPosNeg)
    .brushOn(false)
    .elasticY(true)
    .margins({left: 70 ,top: 10, bottom: 30, right: 50})
    .centerBar(true);

pnlPerDaybarChartBrush
    .height(100)
    .width(700)
    .dimension(dims.date)
    .group(groups.date.pnlSum)
    .valueAccessor(function(d) {
        return Math.abs(d.value);
    })
    .renderTitle(false)
    .x(d3.time.scale().domain([minDate,maxDate]))
    .xUnits(d3.time.days)
    .colors(colorChoice)
    .colorAccessor(colorAccessorPosNeg)
    .brushOn(true)
    .elasticY(true)
    .margins({left: 70 ,top: 10, bottom: 30, right: 50})
    .centerBar(true);

They render the way I expect but when I use the brush on pnlPerDaybarChartBrush, dc.js doesn't update the other one.

Also, clicking on a bar in pnlPerDaybarChart doesn't modify pnlPerDaybarChartBrush rendering (or any of the other charts on the webpage).

Is this the expected behaviour ?

What I was expecting is :

when I click on a single day in the chart without brush it automatically renders all charts with data for that specific day.
when I use the brush it also renders the filtered chart without brush

Here is the jsFiddle

@Chapo - Both the charts are same. There will be so change if you do a selection. Are you looking a range chart? In the sense, are you trying a chart like that Area chart in this [**`link`**](http://nickqizhu.github.io/dc.js/) — Unknown User, Feb 18 '14 at 09:19
@UnknownUser Thank you very much. `.rangeChart` is exactly what I was looking for. That answers my second point. But what about the first one ? When I click on the chart without brush it doesn't filter the other charts. — Chapo, Feb 18 '14 at 09:29
It will not filter. Because you are using the second chart as your selection point for the 1st chart. — Unknown User, Feb 18 '14 at 09:30
OK fair enough. But let's assume I have made a brush selection. It filters the chart without brush. Now I click on one of the bars of that chart. And I want other graphs on the webpage to get filtered accordingly to that bar selection. Is that possible ? (those other charts are already linked to the brush barChart at the moment) — Chapo, Feb 18 '14 at 09:37

score 1 · Answer 1 · answered Feb 18 '14 at 17:43

It doesn't look like dc.js bar charts support click-to-filter by default. The brush function is expected to be the way you filter a bar or line chart (but as you've discovered, it has its own complications).

If your data is too dense to filter it precisely with the brush, one option would be to allow the user to zoom in on the range chart with mouse or touch events:
http://jsfiddle.net/r4YBS/4/

The only change is adding

    .mouseZoomable(true);

at the end of the definition of the brushable bar chart.

Alternately you could implement a custom click listener, which then calls the .filter() method directly.

Right, click-to-filter is the brushing behavior for *ordinal* bar charts. — Gordon, Mar 03 '17 at 13:07

score 0 · Answer 2 · answered Feb 18 '14 at 09:31

0

Fiddle for your requirement.

You are of course right.

.rangeChart is the property you'd need to use it.

Hope it helps.

answered Feb 18 '14 at 09:31

Unknown User

3,598
9
43
81

Thanks for the answer. That is one part of the question though. See updated [jsFiddle](http://jsfiddle.net/r4YBS/3/). I would like to be able to click on a bar in the top `barChart` and that would update the `pieChart`. Any ideas ? – Chapo Feb 18 '14 at 09:50
You have 5Y of time history. You want one specific day. You'll filter roughly using the brush then select the single day you are interested in. Why doesn't it make sense ? – Chapo Feb 18 '14 at 10:04
Sorry I just don't see how a stacked bar chart is going to help me. I simplified the example to only 5 categories but there are a lot more so a stacked bar chart would basically be unreadable. Plus selecting one bar in 1500 observations without zooming is beyond my capabilities. – Chapo Feb 18 '14 at 10:18

dc.js charts not linked

2 Answers2

Linked