Complex Tallies / Aggregation dc.js

Question

I'm working on a dashboard to help companies analyze their cost across many dimensions.

I have it mostly working up at: https://jsfiddle.net/gkke38wk/4/

There are a few things I cannot seem to get working.

SHOW COUNT OF UNIQUE PO BY CONTRACTOR:

I have been able to show this accurately on the Data-Table as you can see in the fiddle, but for some reason nothing I try on the rowChart will show anything but total PO's rows, not Unique PO (This is flattened data, and each line item is a row in the datatable, so one PO may have many rows. FOR EXAMPLE, Bill has only submitted one PO, but it has two lines. The chart shows (2) for Bill).

  contractorChart
        .dimension(contractors)
        .group(contractorGroup)

  contractorChart
        .dimension(uniqueDim)
        .group(contractorGroup)

SHOW TOTAL AMOUNT OF PO

On the Data Table which is mostly working, I want the total column to show the aggregated total of all rows for that PO, not just the first match. In my uniqueDim function, it only works by aggregating unique PO numbers, not the entire PO object. I'm not sure how to aggregate the total.

Ethan Jewett Ethan Jewett · Accepted Answer · 2016-04-25T19:39:51

In rowCharts, the displayed keys and values are determined solely by the group. The dimension is used only for filtering, so switching out the dimension shouldn't result in any change in the displayed values. You'll need to have your group track unique POs rather than the dimension. This is a bit hard to do correctly and efficiently, but I'd recommend using Reductio exception aggregation, in which case it is just a matter of defining a Reductio reducer and a value accessor on your chart:

  reductio()
    .exception(function(d) { return d.po; })
    .exceptionCount(true)(contractorGroup)      

  contractorChart
        .width(800)
        .height(200)
        .margins({ top: 20, left: 10, right: 10, bottom: 20 })
        .dimension(contractors)
        .group(contractorGroup)
        .ordinalColors(['#3182bd', '#6baed6', '#9ecae1', '#c6dbef', '#dadaeb'])
        .valueAccessor(function(d) { return d.value.exceptionCount; })
        .label(function (d) {
            return d.key;
        })
        .title(function (d) {
            return d.value;
        })
        .elasticX(true)
        .xAxis().ticks(4);

As far as the data table, you have the right idea of creating a "fake dimension" as suggested in the dc.js FAQ, but you actually want a fake dimension with an aggregated value. So base it on a group instead:

var uniqueDim = {
    bottom: function (num) {
      var pos = poDimension.top(Infinity);
      // Uses top because the version of Crossfilter being used
      // doesn't support group.bottom.
      return poGroup.top(num)
        .filter(function(d) { return d.value > 0; })
        .map(function(d) {
            var currPo = pos.filter(function(g) { return g.po === d.key; })[0];
          return {
            po: d.key,
            total: d.value,
            contractor: currPo.contractor,
            complexity: currPo.complexity
          };
      });
    }
  };

Working example of both: https://jsfiddle.net/33228p1d/2/

Complex Tallies / Aggregation dc.js

2 Answers