title: dc.js - How set brush (with specific width) to barChart on load
body: <p>On load i see this, all data set without filters:<br>
  <a href="https://i.stack.imgur.com/l6tCg.png" rel="nofollow noreferrer">Picture: what i have</a></p>
  
  <p>I want to see this, brush(selector) picked last 21 day already on load:<br>
  <a href="https://i.stack.imgur.com/O9GXi.png" rel="nofollow noreferrer">Picture: what i want</a><br>
  <a href="https://stackoverflow.com/questions/36897568/dc-js-how-set-brush-with-specific-width-to-barchart-on-load#comment61389921_36897568">Solved! click for answer</a>  </p>
  
  <p>Here i saw similar question, but not works for me<br>
  <a href="https://stackoverflow.com/questions/17281653/dc-js-is-it-possible-to-show-the-user-grab-handles-upon-page-load">dc.js - is it possible to show the user grab handles upon page load</a></p>
  
  <pre><code>var lineChart = dc.lineChart(".chart-line-graph");
  var dateRangeChart = dc.barChart('.chart-date-range');
  
  var hourDim = ndx.dimension(function(d) {return d.hour;});
  var valueByHour = hourDim.group().reduceSum(function(d) {return d.value;});
  var minDate = hourDim.bottom(1)[0].date;
  var maxDate = hourDim.top(1)[0].date;
  
  lineChart
      .renderArea(true)
      .width(1360)
      .height(350)
      .transitionDuration(200)
      .margins({top: 30, right: 50, bottom: 45, left: 80})
      .dimension(hourDim)
      .mouseZoomable(true)
      .rangeChart(dateRangeChart)
      .brushOn(false)
      .x(d3.time.scale().domain([minDate,maxDate]))
      .elasticY(true)
      .group(value)
      .renderHorizontalGridLines(true);
  
  var dayDim = ndx.dimension(function (d) {return d.day;});
  var groupByDayDim = moveDays.group();
  
  dateRangeChart
      .width(1360)
      .height(35)
      .margins({top: 0, right: 50, bottom: 20, left: 80})
      .dimension(moveDays)
      .group(volumeByMonthGroup)
      .centerBar(false)
      .gap(1)
      .x(d3.time.scale().domain([minDate,maxDate]))
      .round(d3.time.week.round)
      .alwaysUseRounding(true)
      .xUnits(d3.time.days);
  dateRangeChart
      .yAxis().ticks(0);  
  </code></pre>
  
  <p>If i add this:  </p>
  
  <pre><code>lineChart
      .filter(dc.filters.RangedFilter(d3.time.day.offset(xrange[1], -21), d3.time.day.offset(xrange[1], 1)))  
  </code></pre>
  
  <p>Then barChart are filtered, but not selected</p>