title: How to show only filtered entries dc.js?
body: <p>I am trying to create dc.js bar chart with a mini bar chart filter so that when you select on filter it applies it to the bigger chart. But it still shows the rest of entries only they are hidden. I want the x-axis to show the filtered set not complete set. How to do this ? Here is a <a href="http://jsfiddle.net/bipinroshan/tuc8z93L/2/" rel="nofollow noreferrer">jsfiddle</a>. Result looks like :</p>
  
  <p><img src="https://i.stack.imgur.com/XxgVI.png" alt="Result"></p>
  
  <p>Here's the code</p>
  
  <pre><code>var data = [ 
    { 'Expt': 1, 'Run': 1, 'Speed': 85, 'title': 'Title1'  }, 
    { 'Expt': 1, 'Run': 2, 'Speed': 34, 'title': 'Title2'  }, 
    { 'Expt': 1, 'Run': 3,  'Speed': 90, 'title': 'Title3' }, 
    { 'Expt': 1, 'Run': 4, 'Speed': 107, 'title': 'Title4' },
    { 'Expt': 1, 'Run': 5, 'Speed': 85, 'title': 'Title5'  }, 
    { 'Expt': 1, 'Run': 6, 'Speed': 34, 'title': 'Title6'  }, 
    { 'Expt': 1, 'Run': 7,  'Speed': 90, 'title': 'Title7' }, 
    { 'Expt': 1, 'Run': 8, 'Speed': 107, 'title': 'Title8' }
  ];
  
  var ndx           = crossfilter(data),
  runDimension      = ndx.dimension(function(d) {return +d.Run;}),
  filterDimension   = ndx.dimension(function(d) {return +d.Run;}),
  speedSumGroup     = runDimension.group().reduceSum(function(d){return d.Speed})
    var chart = dc.barChart("#test");
    chart
      .width(768)
      .height(280)
      .gap(20)
      .x(d3.scale.linear().domain([0, data.length + 1]))
      .brushOn(false)
      .centerBar(true)
      .renderLabel(true)
      .xAxisPadding(1)
      .yAxisLabel("Y Axis")
      .elasticX(true)
      .dimension(runDimension)
      .group(speedSumGroup)
      .renderTitle(true).title(function (d) {
        return 'test: ' + d.value;
          })
      .renderHorizontalGridLines(true)
      .label(function (d) {
              console.log(d);
              return 'test';
          });
  
    chart.render();
    var chart2 = dc.barChart("#brush");
    chart2
      .width(768)
      .height(180)
      .gap(20)
      .x(d3.scale.linear().domain([0, data.length + 1]))
      .brushOn(true)
      .centerBar(true)
      .renderLabel(true)
      .xAxisPadding(1)
      .yAxisLabel("Y Axis")
      .elasticX(true)
      .dimension(filterDimension)
      .group(speedSumGroup)
          .elasticY(true)
      .renderTitle(true).title(function (d) {
        return 'test: ' + d.value;
          })
      .renderHorizontalGridLines(true)
      .label(function (d) {
              console.log(d);
              return 'test';
          });
    chart2.render();
  </code></pre>