Unique Items in dc.js DataTable

Question

I have a simple datatable using dc.js. Fiddle here (https://jsfiddle.net/7p5d8g0y/)

My data emerges from the datastore in the following format. Note the array for the category value.

[{"Id":"1","InDate":"31/10/2015","Type":"New","Category":["X1"],"Value":"1.400874145"},
{"Id":"2","InDate":"21/10/2014","Type":"Old","Category":["X1","X2"],"Value":"0"},
{"Id":"3","InDate":"21/10/2014","Type":"New","Category":["X1"],"Value":"4000.4645645665"}]

I then flatten the data out so that there are multiple lines for the multiple category entries

[{"Id":"1","InDate":"31/10/2015","Type":"New","Category":"X1","Value":"1.400874145"},
{"Id":"2","InDate":"21/10/2014","Type":"Old","Category":"X1","Value":"0"},
{"Id":"2","InDate":"21/10/2014","Type":"Old","Category":"X2","Value":"0"},
{"Id":"3","InDate":"21/10/2014","Type":"New","Category":"X1","Value":"4000.4645645665"}]     

The problem is that now I have multiple entries in the datatable for each category. ie see the entries for Id 2

In this instance I only care about displaying the unique ids entries in the datatable.

So my question is how would I go about displaying unique entries in the datatable? Should I be modifying the data from the data source or can I achieve what I want as is?

btw I tried implementing a fake dimension as per this SO question but couldn't get it to work

Answer 1

There are probably quite a few ways to fix this. I'll just mention two possibilities.

1. Use a dimension with array-based keys. The community fork of dc.js supports "tag" dimensions, where a row can be associated with multiple key values. If I understand correctly, you would not need to flatten your data if you use this feature.

2. Use a group instead of a dimension for your data table. This works, as shown in this example, as long as you are okay with descending order. This way you are displaying aggregated data instead of the raw rows. If you need ascending order, you can wrap your group using this adaptor which adds a .bottom(N) method:

   function reversible_group(group) {
       return {
           top: function(N) {
               return group.top(N);
           },
           bottom: function(N) {
               return group.top(Infinity).slice(-N).reverse();
           }
       };
   }