Dc.js charts are not related

Question

I have two barChartsequivalents besides the parameter .brushOn:

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 display what I expect, but when I use the brush on pnlPerDaybarChartBrush, it dc.jsdoes not update another.

In addition, clicking on the panel in pnlPerDaybarChartdoes not change the rendering pnlPerDaybarChartBrush(or any other diagram on the web page).

Is this the expected behavior?

I expected:

• when I click on one day on a chart without a brush it automatically displays all the charts with data for that particular day.
• when i use a brush it also displays a filtered chart without a brush

Here is jsFiddle

Answer 1

, dc.js -. , (, , ).

, , :
http://jsfiddle.net/r4YBS/4/

    .mouseZoomable(true);

.

, .filter().

Answer 2

Fiddle .

, , .

.rangeChart - , .

, .