DC.js numberDisplay with crossfilter get total records

Question

I am trying to understand how to use crossfilter with dc.js. I have the following data and I would just like to start by populating a numberDisplay with the total number of objects within the data. Then secondly populating how many records there are for bills losses.

var data = [
  {
    "team": "bills",
    "location": "home",
    "outcome": "loss"
  },
  {
    "team": "dolphins",
    "location": "away",
    "outcome": "loss"
  },
  {
    "team": "jets",
    "location": "home",
    "outcome": "loss"
  },
  {
    "team": "jets",
    "location": "home",
    "outcome": "win"
  },
  {
    "team": "dolphins",
    "location": "home",
    "outcome": "loss"
  },
  {
    "team": "dolphins",
    "location": "away",
    "outcome": "win"
  },
  {
    "team": "dolphins",
    "location": "home",
    "outcome": "win"
  },
  {
    "team": "dolphins",
    "location": "away",
    "outcome": "loss"
  }
]

DC.JS numberDisplay takes a group but I have not been able to figure out how to simply count the number of records to start with.

var cf = crossfilter(data);
var team = cf.dimension(function(d) { return d.team })
var teams = team.group().reduceCount();

this seems to only return the value for the first key? reduceSum() and groupAll() haven't worked either.

var numberDisplayElem = dc.numberDisplay("#number-display-elem");
    numberDisplayElem
        .group(teams);

Basically just trying to get the total to populate the numberDisplay, and then a single numberBack of filtered values like total bills losses, etc. Having trouble getting started. TIA.

Gordon Gordon · Accepted Answer · 2017-03-31T04:33:19

An ordinary crossfilter group has multiple bins based on the key function.

If you want to count all the records without binning them, try using a groupAll instead:

var numRecords = cf.groupAll();
numberDisplayElem
  .group(numRecords)
  .valueAccessor(x => x);

DC.js numberDisplay with crossfilter get total records

1 Answers