title: dc.js: filter & redraw chart on click
body: <p>I rendered a stacked bar and then I'm trying to re-draw the chart with new filter on clicking a button. Now, as I click the button the previous axes remains but the chart disappears and doesn't re-draw. I don't know what I'm missing here..
  Here is the JSFiddle for this <a href="https://jsfiddle.net/iSudeep/b7woztjw/" rel="nofollow">stackedBar</a>.</p>
  
  <pre><code>function myFunc(){
  var dimForHour = cf.dimension(function(d) { return d.date; });
      dimForHour.filter([hour, today]);
  
  var dimByChannel = cf.dimension(function(d) { return d.channelUUID; });
  var groupAvgChan = dimByChannel.group().reduce(
  function reduceAdd(p, v) {
      p.bytesTxd = p.bytesTxd + v.bytesTxd;
      p.count = p.count + 1;
      p.avg = p.bytesTxd / p.count;
      p.avgTot = p.avgTot + p.avg;
      p.avgPrcnt = (p.avg / p.avgTot) * 100;
      if(p.max &lt; v.bytesTxd) { p.max = v.bytesTxd; }
      p.maxTot = p.maxTot + p.max;
      p.maxPrcnt = (p.max / p.maxTot) * 100;
      return p;
  },
  function reduceRemove(p, v) {
      p.bytesTxd = p.bytesTxd - v.bytesTxd;
      p.count = p.count - 1;
      p.avg = p.bytesTxd / p.count;
      p.avgTot = p.avgTot - v.avgTot;
      p.avgPrcnt = (p.avg / p.avgTot) * 100;
      if(p.max &gt; v.bytesTxd) { p.max = v.bytesTxd; }
      p.maxTot = p.maxTot - p.max;
      p.maxPrcnt = (p.max / p.maxTot) * 100;
      return p;
  },
  function reduceInitial() {
      return {
          bytesTxd:0, count:0, avg:0, avgTot:0, 
          avgPrcnt:0, max:0, maxTot:0,maxPrcnt:0};
                                             });
  /*chanUtil = dc.barChart("#chanUtil")
                                      chanUtil
                                      .dimension(dimByChannel)
                                      .group(groupAvgChan,"Avg Utilization %").valueAccessor(function(d) { return d.value.avgPrcnt; })
                                      .stack(groupAvgChan,"Max Utilization %", function(d) { return d.value.maxPrcnt; })
                                      .x(d3.scale.ordinal().domain(data.map(function (d) { return d.channelUUID })))
                                      .xUnits(dc.units.ordinal);*/
  
  dc.redrawAll();
  }
  </code></pre>