bar chart and line chart are not interacting in dc.js

Question

I want to draw a bar chart and line chart, both with same dimension and group. So, I expect, when I brush line chart selecting time range in it, the bar chart gets updated. However, this is not happening. Here is my code. Any help will be greatly appreciated

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js" charset="utf-8"></script>

<div id="dc-freq-chart"  style="height: 600px;  width: 100%"/>
<div id="dc-time-chart"  style="height: 600px;  width: 100%"/>

<script type="text/javascript">
var freqChart = dc.barChart("#dc-freq-chart");
var timeChart = dc.lineChart("#dc-time-chart");

var controllerElement = document.querySelector('[ng-app=zeppelinWebApp]');
var scope = angular.element(controllerElement).scope().compiledScope;
var dateArray = scope.days;

var data = [];
for (var i =0; i < dateArray.length; i++)
{
   data[i] = JSON.parse(dateArray[i]) 
}

var dateFormat = d3.time.format('%d/%m/%Y');
data.forEach(function (d) {
    d.dd = dateFormat.parse(d.Date);
});


var ndx = crossfilter(data);
var dateDim = ndx.dimension(function(d){
    return d3.time.day(d.dd);
})
var flights = dateDim.group();

// freqChart (barchart) properties
freqChart
    .width(1000)
    .height(500)
    .margins({top: 20, left: 50, right: 10, bottom: 40})
    .dimension(dateDim)
    .transitionDuration(500)
    .group(flights)
    .gap(1)
    .brushOn(false)
    .title(function(d){
      return d.data.key
      + "\nNumber of Flights on this day: " + d.data.value;
      })
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))     
    .elasticY(true)
    .elasticX(true)
    .xAxisLabel("Day")
    .yAxisLabel("Number of flights")
    .xUnits(d3.time.days)
    .xAxis().ticks(d3.time.days, 1);

// timechart (line chart) properties
timeChart
    .width(1000)
    .height(250)
    .margins({top: 10, right: 30, bottom: 30, left: 50})
    .dimension(dateDim)
    .group(flights)
    //.transitionDuration(500)

    .brushOn(true)
    .renderArea(true)
    .elasticY(true)
    .elasticX(true)
    .x(d3.time.scale().domain(d3.extent(data, function(d) { return d3.time.day(d.dd); })))     
    .xAxisLabel("Day")
    .yAxisLabel("Number of flights")
    .xAxis().ticks(d3.time.days, 1);

dc.renderAll();

</script>

Answer 1

Yes. I used rangeChart function and that helped. Thanks.