dc and crossfilter - calculating percentage within records

Question

I'm trying to calculate and plot percentage (%) in one of my dc charts.

I have read the API and multiple examples regarding reduce functions (add, remove & init etc) I referred to 1st & 2nd for my codes.

I want to calculate decay percentage ( sum(decay_data)/sum(all_data) ; decay_data is defined in data by "decay_ind==1" )

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.

In the code, please just see "percentgroup" and "datedimension" only, others are for separate charts.

My code so far :

 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);

what am I missing here? Any approach/suggestions would be very helpful.

UPDATE

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.

I'm summing up a variable called "Recharge revenue", in the console - add function gives me, random/junk values. Remove function gives me infinity.

My new 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);
        });
    });

The graph is still empty for obvious reasons (console displays)

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.

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)

Basically, the only thing working is count in graphs, if I use any sum, average, I'm getting random values and no graph plot.

Any suggestions/feedback will be most welcome.

UPDATE 2 :

Here's the fiddle

Dataset has two buckets and two durations

It's showing junk/random values for both total and average. Please help me fix the issue now.

Answer 1

The numbers are in string format, had to be parsed into integer for the functions to read them, the values were junk as it was concatenating them.

Solution code :

function(p, v) {
        ++p.count;
        p.total += parseInt(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 -= parseInt(v.recharge_revenue);
        return p;
    }