Dc.js - Unable To Plot Line Chart On Average

I'm creating a line chart using dc.js. Link for the fiddle. Challenge I'm facing is. I'm trying to plot a line graph on average of values which is not happening currently. In the f

Solution 1:

This jsfiddle will display average values by date.

Plot of averages:

(it looks almost the same as original plot from your jsfiddle, but y axis values are different)

I'll add some comments on code shortly.

EDIT: Comments:

You were almost done, but needed a couple of peaces of code for the whole app to work.

I rewrote reduceXXX() functions in the following way:

functionreduceAdd(p, v) {
        ++p.count;
        p.total += v.value;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
    }

    functionreduceRemove(p, v) {
        --p.count;
        p.total -= v.value;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
    }

    functionreduceInitial() {
        return {
            count: 0,
            total: 0,
            average: 0
        };
}

So, there is a field average that will be always maintained with correct value. I think such code organization is cleaner, though there may be some alternatives.

I added accessor function too (so that dc.js know what to display):

    .valueAccessor(function(p) { return p.value.average; })

Hope this helps. Let me know if you have additional question, or need clarification.