CODEWITHSUNDEEP
dc.jscrossfilter
Elena
Elena

Reputation: 11

Display max value of a dimension in a numberDisplay dc.js

I have a csv file with temperatures for several cities with this format:

city    maxTemp
Vienna  25.5
Prague  24.4
Paris   24.3
Berlin  23.3
Athens  33.1

I'm creating a dashboard and I would like to show in a numberDisplay the maximum temperature from the cities filtered (when clicking other DC.js charts).

I have managed to get the maximum value from the dimension, but I can't manage to make it change when the cities are filtered and I don't know what group and valueAccessor should I use to display the maximum temperature in the numberDisplay. How do I solve this problem?

Here is what I've tried:

function show_avg_temp(ndx,element) {

   var maxTempDim = ndx.dimension(dc.pluck('maxTemp'));

   maxMaxTemp = maxTempDim.top(1)[0].maxTemp;

   console.log(maxMaxTemp);

   dc.numberDisplay(element)
      .group(??)
      .valueAccessor(??)
      .formatNumber(d3.format('.2'));
}

Upvotes: 1

Views: 257

Answers (1)

Gordon
Gordon

Reputation: 20120

A little context

One confusing thing about the numberDisplay is that it works best with a groupAll object but it also works with a regular group (with some difficulty).

We recently added methods to clarify similar problems with the dataTable and dataCount, and I opened an issue to do the same with numberDisplay.

Anyway, that's still not quite what you need, since there is no efficient way to compute a min or max with a group or groupAll. The obvious way to reduce a maximum is to see if each added value is greater than the current max, but in order to remove, you basically need everything sorted.

A solution

So, long story short, and as you know already: what you're doing is basically right but you need a way to feed that live number to the numberDisplay.

Easiest way is to fake the .value() function that a groupAll object would have, and also tell the numberDisplay that a value is just a value:

function dim_max_groupAll(dim, field) {
  return {
    value: function() {
      return dim.top(1)[0][field];
    }
  };
}
numberDisplay
  .group(dim_max_groupAll(maxTempDim, 'maxTemp'))
  .valueAccessor(x => x);

This "fake groupAll" ensures that whenever the numberDisplay is redrawn, the fresh top value will be taken from the dimension.

Upvotes: 1

Related Questions