Cannot get the dc piechart to display correctly

Question

I am using javascript to make a html dashboard. I am having problems with displaying the pie chart. I am wishing to use the table 'add length' data set to populate the pie chart. The add length data has the following json format.

[{"Add Length":30.0,"Week Ahead":59.16,"Last Week":0.0,"Q1 2017":0.0,"Q3 2017":0.0,"Q1 2017 Total":83.68,"Q3 2017 Total":83.21,"Target":0.0,"Natural Delivery Equiv %":0.0},{"Add Length":60.0,"Week Ahead":40.84,"Last Week":100.0,"Q1 2017":0.0,"Q3 2017":0.0,"Q1 2017 Total":0.0,"Q3 2017 Total":0.0,"Target":0.0,"Natural Delivery Equiv %":0.0}]

The add length table displays on the dashboard as follows.

However when I display the pie chart on the dashboard I get the following image.

From reading online this should work. This should have the pie chart populated by the add length table with the "Week Ahead" column. The bit of javascript I am using is given below.

queue()
.defer(d3.json, "/txtimes1")
.defer(d3.json, "/txtimes2")
.defer(d3.json, "/txtimes3")
.defer(d3.json, "/txtimes4")
.defer(d3.json, "/txtimes5")
.await(makeGraphs);

function makeGraphs(error,txtimes1,txtimes2,txtimes3,txtimes4,txtimes5) {

var addl = txtimes1;
var channel = txtimes2;
var sale = txtimes3;
var daypart = txtimes4;
var day = txtimes5;
//Create a Crossfilter instance
//var ndx1 = crossfilter(prog);
var ndx1 = crossfilter(addl);
var ndx2 = crossfilter(channel);
var ndx3 = crossfilter(sale);
var ndx4 = crossfilter(daypart);
var ndx5 = crossfilter(day);

var AddlDim = ndx1.dimension(function (d) {
    return d["Week Ahead"];
});

var sentimentName = ndx1.dimension(function (d) {
    return d["Week Ahead"];
});

var sentimentGroup = sentimentName.group(function (d) {
    return d["Add Length"];
});

var sentimentPie = dc.pieChart("#sentiment-pie");

var addlength = dc.dataTable("#addl");

var pspace ="\xa0\u0025\xa0\xa0\xa0";
var space ="\xa0\xa0\xa0\xa0";
var colour1="red";
var colour2="orange";
var colour3="FEE11";
var colour4="green";
var colour5="blue";
var colour6="purple";
var colour7="darkred";
var colour8="pink";

sentimentPie
    .width(415)
    .height(415)
    .radius(200)
    .innerRadius(50)
    .dimension(sentimentName)
    .group(sentimentGroup)

    .render()

    .label(function (d) {
        if (sentimentPie.hasFilter() && !sentimentPie.hasFilter(d["Week Ahead"])) {
            return d["Week Ahead"] + '(0%)';
        }
        var label = d.key;

            label += ' (' + d.key + '%)';

        return label;
    });

addlength
    .dimension(AddlDim)
    .group( function (d) { return ''; })
    .sortBy(  function(d) { return d["Week Ahead"]; })

    .columns([{
               label: "Add Length " + space,
               format: function (d) { return d["Add Length"]+space; }
              },
              {
               label: " Week Ahead " + space,
               format: function (d) { return  (d["Week Ahead"] + pspace).fontcolor(colour1); }
               },
              {
               label: "Last Week " + space,
               format: function (d) { return (d["Last Week"] + pspace).fontcolor(colour2); }
               },
              {
               label: "Q1 2017 " + space,
               format: function (d) { return (d["Q1 2017"] + pspace).fontcolor(colour3); }
               },
              {
               label: "Q3 2017 " + space,
               format: function (d) { return (d["Q3 2017"] + pspace).fontcolor(colour4); }
               },
              {
               label: "Q1 2017 Total " + space,
               format: function (d) { return (d["Q1 2017 Total"] + pspace).fontcolor(colour5); }
               },
              {
               label: "Q3 2017 Total " + space,
               format: function (d) { return (d["Q3 2017 Total"] + pspace).fontcolor(colour6); }
               },
              {
               label: "Target " + space,
               format: function (d) { return (d["Target"] + pspace).fontcolor(colour7); }
               },
              {
               label: "Natural Delivery Equiv " + space,
               format: function (d) { return (d["Natural Delivery Equiv %"] + pspace).fontcolor(colour8); }
               }
             ])

    .size(180)
    .beginSlice(0)
    .endSlice(10)
    .order(d3.descending);

If anyone could tell me why this isn't working, I would be most grateful.

Thanks

My dashboard

Answer 1

I resolved the problem:

In order for the pie chart to be populated it requires a reduceSum.

var AddlGroup = AddlName.group().reduceSum(function (d) {return d["Week Ahead"]; 
});

This sums the values within that group. However, since there's one entry for each group, it returns the single row value for each row.