dc.js barchart valueAccessor displays object object - dc.js

Question

I was using a dc.js rowChart to display Index averages calculated in custom reduceAdd/reduceRemove functions and it all works fine. Now, I want to change the rowChart to a barChart, and for some reason, the valueAccessor returns [object object] when hovering over the bars (representing the Index column) in the chart, instead of showing the average value. If I print out the avg value in the console though, it is defined correctly.
My csv file is structured like this:
Index,Model,Year,Season
Heat,Model1,1974,0
Heat,Model1,1974,1
Heat,Model1,1974,2
Heat,Model2,1974,3
Heat,Model2,1994,0
Heat,Model2,1994,1
Heat,Model2,1994,2
Heat,Model2,1994,3
Rain,Model1,1974,0
Rain,Model1,1974,1
Rain,Model1,1974,2
Rain,Model2,1974,3
Rain,Model2,1994,0
Rain,Model2,1994,1
Rain,Model2,1994,2
Rain,Model2,1994,3
These are the versions of the libraries:
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.js"></script>
<script type="text/javascript" src="https://rawgithub.com/NickQiZhu/dc.js/master/web/js/crossfilter.js"></script>
<link rel="stylesheet" type="text/css" href="http://tvinci.github.io/webs/css/dc.css"/>
Here is the barChart and the filter definitions:
indexChart = dc.barChart("#chart-index");
var indexDimension = filter.dimension(function(d) { return d.Index; });
var indexGroup = indexDimension.group();
var avgIndexGroup = indexDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);
function reduceAdd(p, v) {
++p.count;
p.total += v.value;
p.average = p.total / p.count
return p;
}
function reduceRemove(p, v) {
--p.count;
p.total -= v.value;
p.average = p.total / p.count
return p;
}
function reduceInitial() {
return {count: 0, total: 0, average: 0};
}
And finally, the chart parameters:
indexChart
.width(300).height(200)
.margins({ top: 10, right: 30, bottom: 30, left: 10 })
.dimension(indexDimension)
.group(avgIndexGroup)
.valueAccessor(function(p) {
//console.log("p.value.average: ", p.value.average) //displays the avg fine
return p.value.average;
})
.elasticY(true)
.gap(0)
.x(d3.scale.ordinal())
.xUnits(dc.units.ordinal); // Tell dc.js that we're using an ordinal x-axis;
indexChart.yAxis().ticks(4);
Any suggestions are welcome. Thanks in advance!