DC.js stack in line chart not showing

Question

I'm having trouble rendering a stack in a line chart.

I have a reduction which calculates three averages. I can show one of these Avg in the .group, but it doesn't work in stack

timeConstChart
.dimension(datesDim)
.group(evalConsReduced,"Buena", function(d){return d.value.buenaAvg}) // works
.stack(evalConsReduced,"Regular",function (d) {return d.value.regularAvg}) // <- Doesn't work
.stack(evalConsReduced,"Mala",function (d) {return d.value.malaAvg}) // <- Doesn't work neither
.x(d3.time.scale().domain([minDate,maxDate]))
.y(d3.time.scale().domain([0,100]));

The weird part is if I ignore the group's "return d.value.buenaAvg", I can get the result from d.value.regularAvg

jsfiddle

Note: This is my first time using crossfilter but I can already tell my reduce functions are not optimal and they can be improved. Any directions here will also be appreciated.

Gordon Gordon · Accepted Answer · 2017-12-21T03:40:21

It's probably possible to improve those reduce functions, but they are the right basic idea. You will have to count each of the values in some way or another, and compute the average for each one.

Perhaps there are clever ways to write less code, but what you are doing is clear.

It looks like where you went wrong is the use of toFixed - this returns a string, and lots of trouble can happen when you try to aggregate strings.

For example,

0.3 + 0.1 === 0.4

but

'0.3' + '0.1' === '0.30.1'

I think the same thing is happening in your stacks, but somewhere dc.js does a sanity check and throws out the NaNs.

Here is a fork of your fiddle with toFixed removed.

As expected, the three stacks add up to a green line at 1. (I've added .clipPadding(2) because otherwise the top line can get clipped, making it hard to see.)

DC.js stack in line chart not showing

1 Answers