Doing calculations with dc.js numberDisplay

Question

I would like to make further calculations from the values of two separate numberDisplays in dc.js

Here's the code,

function makeGraphs(data) {

xf = crossfilter(data);
all = xf.groupAll();
txntypeDim = xf.dimension(function(d) { return d.txntype; });
sumAllTXN = txntypeDim.groupAll().reduceSum(function(d) {return d.txnamount;});

numberRecordsND = dc.numberDisplay("#number-records-nd",groupname)
numberRecordsTXN = dc.numberDisplay("#number-records-txn",groupname)

   numberRecordsND
    .formatNumber(d3.format("d"))
    .valueAccessor(function(d){return d; })
    .group(all);

   numberRecordsTXN
    .formatNumber(function(d){return d; })
    .valueAccessor( function(d) { return d; } )
    .group(sumAllTXN);

dc.renderAll(groupname);

}

I want to show the percentage of numberRecordsTXN/numberRecordsND in another div. Is there any way to achieve this?

Edit: solution code;

function makeGraphs(data) {

xf = crossfilter(data);
all = xf.groupAll();
txntypeDim = xf.dimension(function(d) { return d.txntype; });
sumAllTXN = txntypeDim.groupAll().reduceSum(function(d) {return d.txnamount;});

numberRecordsND = dc.numberDisplay("#number-records-nd",groupname)
numberRecordsTXN = dc.numberDisplay("#number-records-txn",groupname)
numberRecordsAVG = dc.numberDisplay("#number-records-avg",groupname)

   numberRecordsND
    .formatNumber(d3.format("d"))
    .valueAccessor(function(d){return d; })
    .group(all);

   numberRecordsTXN
    .formatNumber(function(d){return d; })
    .valueAccessor( function(d) { return d; } )
    .group(sumAllTXN);

   numberRecordsAVG
   .formatNumber(d3.format("d"))
   .valueAccessor(function(d){return d; })
   .group(groupall_percent(numberRecordsTXN, numberRecordsND));

dc.renderAll(groupname);

};

function groupall_percent(numerator, denominator) {
  return {
    value: function() {
      return numerator.value() / denominator.value();
    }
  };
};

Please use [dc.js] for questions about the charting library. [dc] is a classic unix calculator utility. — Gordon, May 02 '19 at 13:10

score 1 · Accepted Answer · answered May 03 '19 at 10:51

The input to the numberDisplay is really simple - it is expecting a groupAll object for its group (confusing I know) and this is just an object with a .value() method.

So, you can easily create a fake groupAll which produces a percentage from two other groupAlls:

function groupall_percent(numerator, denominator) {
  return {
    value: function() {
      return numerator.value() / denominator.value() * 100;
    }
  };
}

You would use the resulting object just like the other groupAlls in your example.

But please note that your example doesn't follow your description. A percentage is always a count divided by another count and multiplied by 100. But your example is a sum of amounts divided by a count, which is an average.

To use this code for an average, you would remove the * 100 part.

Thank you Gordon. You're right, I was looking for the average not the percentage. The code worked exactly as I wanted. Thank you! I'll add the solution code to my question. — Shaibal Ahmed, May 05 '19 at 04:57

Doing calculations with dc.js numberDisplay

1 Answers1