Search code examples
d3.jsdc.jscrossfilter

How to show only limited number of records in box plot dc.js

I want to show the most recent 10 bins for box plot.

If a filter is applied to the bar chart or line chart, the box plot should show the most recent 10 records according to those filters.

I made dimension by date(ordinal). But I am unable to get the result.

I didn’t get how to do it with a fake group. I am new to dc.js.

The pic of scenario is attached. Let me know if anyone need more detail to help me.

Image in image i tried some solution by time scale.

Solution

  • You can do this with two fake groups, one to remove the empty box plots, and one to take the last N elements of the resulting data.

    Removing empty box plots:

      function remove_empty_array_bins(group) {
    return {
      all: function() {
        return group.all().filter(d => d.value.length);
      }
    };
  }

    This just filters the bins, removing any where the .value array is of length 0.

    Taking the last N elements:

      function cap_group(group, N) {
    return {
      all: function() {
        var all = group.all();
        return all.slice(all.length - N);
      }
    };
  }

    This is essentially what the cap mixin does, except without creating a bin for "others" (which is somewhat tricky).

    We fetch the data from the original group, see how long it is, and then slice that array from all.length - N to the end.

    Chain these fake together when passing them to the chart:

      chart
    .group(cap_group(remove_empty_array_bins(closeGroup), 5))

    I'm using 5 instead of 10 because I have a smaller data set to work with.

    screenshot

    Demo fiddle.

    This example uses a "real" time scale rather than ordinal dates. There are a few ways to do ordinal dates, but if your group is still sorted from low to high dates, this should still work.

    If not, you'll have to edit your question to include an example of the code you are using to generate the ordinal date group.