title: dc and crossfilter - calculating percentage within records
body: <p>I'm trying to calculate and plot percentage (%) in one of my dc charts.</p>
  
  <p>I have read the API and multiple examples regarding reduce functions (add, remove &amp; init etc)
  I referred to <a href="http://jsfiddle.net/gordonwoodhull/vct0dzou/8/" rel="nofollow">1st</a> &amp; <a href="https://github.com/dc-js/dc.js/issues/21" rel="nofollow">2nd</a> for my codes.</p>
  
  <p>I want to calculate decay percentage ( sum(decay_data)/sum(all_data) ; decay_data is defined in data by "decay_ind==1" )</p>
  
  <p>I'm still not getting anything in the graph due to some issue, the value accessor is also used but, there could be some issue in that.</p>
  
  <p>In the code, please just see "percentgroup" and "datedimension" only, others are for separate charts.</p>
  
  <p>My code so far :</p>
  
  <pre><code> var chart = dc.pieChart("#test");
  var chart2 = dc.barChart("#test2");
  var chart3 = dc.barChart("#test3");
  
    console.log(data[0]);
    //Filtering only target population
    data = data.filter(function (d) { return d.target_ind == "1"; });
  
    var ndx  = crossfilter(data);
  
  
    bucketDimension  = ndx.dimension(function(d) {return "Bucket : " +d.decay_bucket;});
    speedSumGroup = bucketDimension.group().reduceSum( function(d) { return d.Count ;});
  
    dateDimension  = ndx.dimension(function(d) {return d.duration ;});
    rechGroup = dateDimension.group().reduceSum ( function(d) { return d.recharge_revenue ;});
  
      var percentGroup = dateDimension.group().reduce(
          //add
          function(p, v) {
              ++p.count;
              p.decay += (v.decay_ind === '1' ? p.recharge_revenue : 0);
              p.total += p.recharge_revenue;
              p.percent = p.count ? p.decay/p.total : 0;
              return p;
          },
          function(p, v) {
              --p.count;
              p.decay -= (v.decay_ind === '1' ? p.recharge_revenue : 0);
              p.total -= p.recharge_revenue;
              p.percent = p.count ? p.decay/p.total : 0;
              return p;
          },
          function() {
              return {
                  count: 0,
                  decay : 0,
                  total : 0,
                  percent : 0
  
              };
          }
          );
  
  
          chart3
          .width(768)
          .height(480)
          .x(d3.scale.ordinal())
          .xUnits(dc.units.ordinal)
          //.brushOn(false)
          .yAxisLabel("Decay %")
          .dimension(dateDimension)
          //.group(decayGroup)
  
          .on('renderlet', function(chart) {
              chart.selectAll('rect').on("click", function(d) {
                  console.log("click!", d);
              });
          });
  
  
        chart3.valueAccessor(function (p) {
          return p.value.percent;
          })
          .group(percentGroup);
  </code></pre>
  
  <p>what am I missing here? 
  Any approach/suggestions would be very helpful.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Okay, I've corrected a few mistakes and now, just trying to get the sum to understand these functions better and see them in the console. Added all values in duration dimension also.</p>
  
  <p>I'm summing up a variable called "Recharge revenue", in the console - add function gives me, random/junk values. Remove function gives me infinity.</p>
  
  <p>My new code :</p>
  
  <pre><code>var percentGroup = dateDimension.group().reduce(
      //add
      function(p, v) {
          ++p.count;
          p.total += v.recharge_revenue;
          //p.percent = p.count ? p.decay/p.total : 0;
          console.log(p.total);
          return p;
      },
      //remove
      function(p, v) {
          --p.count;
          p.total -= v.recharge_revenue;
          return p;
      },
      //init
      function() {
          return {
              count: 0,
              total : 0,
  
          };
      }
      );
  
  chart3
      .width(768)
      .height(480)
      .x(d3.scale.ordinal())
      .xUnits(dc.units.ordinal)
      //.brushOn(false)
      .yAxisLabel("Decay %")
      .dimension(dateDimension)
      .valueAccessor(function (p) {
      return p.value.total;
       })
      .group(percentGroup)
      .on('renderlet', function(chart) {
          chart.selectAll('rect').on("click", function(d) {
              console.log("click!", d);
          });
      });
  </code></pre>
  
  <p>The graph is still empty for obvious reasons (console displays)</p>
  
  <p>Please help me fix this, I just can't get what's wrong here. Once sum is done, I want to go about calculating percentage.</p>
  
  <p>Another caveat : I have a column "Count" in my dataset (csv), is that causing the problem here by any chance? (changed to another name, still not working)</p>
  
  <p>Basically, the only thing working is <em>count</em> in graphs, if I use any sum, average, I'm getting random values and no graph plot.</p>
  
  <p>Any suggestions/feedback will be most welcome.</p>
  
  <p><strong>UPDATE 2 :</strong></p>
  
  <p>Here's the <a href="http://jsfiddle.net/vct0dzou/23/" rel="nofollow">fiddle</a></p>
  
  <p>Dataset has two buckets and two durations </p>
  
  <p>It's showing junk/random values for both total and average. Please help me fix the issue now.</p>