Dc.js - Reduce Function Selected From Radio Button

In the last few weeks I have been playing a lot with dc.js while trying to create a simple personal dashboard. I managed to implement a pop-up menu to select the time granularity I

Solution 1:

I managed to fix the main issue that was on the reduce functions.

The solution is to just use these reduce functions:

// Custom reduce functionsfunctiondash_reduceAdd(p, v) {
    ++p.count;
    p.conSum += v.consPow;
    p.prodSum += v.prodPow;
    p.consAvg = p.conSum/p.count;
    p.prodAvg = p.prodSum/p.count;
    return p;
}
functiondash_reduceSub(p, v) {
    --p.count;
    p.conSum -= v.consPow;
    p.prodSum -= v.prodPow;
    p.consAvg = p.count ? p.conSum / p.count : 0;
    p.prodAvg = p.count ? p.prodSum / p.count : 0;
    return p;
}
functiondash_reduceInit() {
    return { count:0, conSum:0, prodSum:0, consAvg:0, prodAvg:0 };
}

Use a unique grouped dimension for "stackChart" and "volumeChart". like this:

powByTime =
        dateDim
            .group(function (d) { return gran[0](d); })
            .reduce(dash_reduceAdd, dash_reduceSub, dash_reduceInit);

Inside the "building" of the stackChart the value accessors for consumed and produced like this:

stackChart.valueAccessor(function(d) { return d.value.conSum; });

and this:

stackChart.stack(powByTime, "Produced Power [kW]", function(d) { return d.value.prodSum; })

And finally just select in the valueAccessor like this:

// Map the selected mode to the correct valueAccessor valuevar accessors = {
    sum: {consPow: 'conSum', prodPow: 'prodSum'},
    avg: {consPow: 'consAvg', prodPow: 'prodAvg'}
};

// Listen for changes on the aggregation mode and update the valueAccessor
d3.selectAll('#select-operation input')
    .on('click', function() {
        var aggrMode = this.value;
        stackChart.valueAccessor(function(d) { var sel = accessors[aggrMode]['consPow']; return d.value[sel]; });
        dc.redrawAll();
    });

Now this works for the problem I asked, but if you are reusing this (that's why I posted the solution), please note that this introduces other issues:

• I can't access/modify the value accessor of the ".stack" layer...I only managed to add new layer till now...
• When hovering with the mouse over a point in the chart, the value for "consumed" (base layer) is correct but the one for the production (stacked layer) is wrong (it displays the value of the "consumed power").

I didn't figure out yet how to solve them, I will open another thread in case or post the full solution in the future if I manage. Hope this can help someone else.