dc js - Create Multiple Column Dimension

Question

I'm trying to summarize the data table using dc.js and I'm using dynaTable plugin for for pagination and other options.

Normally in the dc.js data table we get the entire data displayed in the data. But I'm trying to summarize the data like a pivot table and display it on the web and when the selection happens the data table needs to change.

I've done it by creating a dimension and group and i passed that group to dynaTable. And it's working fine.

Suppose I have 5 columns of data. I can create a dimension on any column of it.

Example : I'm creating a dimension on the first columns and grouping on the value of the last column, say it is A-20, B-42, C-50, D-20.. Now my group contains that values and variable.

But i'm looking to create a dimension combining 2-3 columns.

Example:

A,AA,20
A,AB,10
A,AC,30
A,AD,80
B,BA,30
B,BB,40
B,BC,50
B,BD,90
C,CA,70
C,CB,20
C,CC,10
C,CD,80
D,DA,30
D,DB,40
D,DC,60
D,DD,80

Is it possible to create a dimension on multiple columns like that?

If so please help me.

Here is the fiddle: http://jsfiddle.net/3v68c/3/

Answer 1

You can also create a single dimension directly in dc.js as an array of multiple key fields, if you look at the simple specific chart example for a series chart on dc.js Github you can see how this is done.

Answer 2

If you provide a JSFiddle or something similar I can provide you a working example. But the answer is yes, you can define a dimension based on as many columns as you want. You just need to have a delimiter that isn't used in any of the values. Let's say you have columns a, b, and c and you're going to use delimiter ',' . Then you:

var xfilter = crossfilter(data); 
var multidimension = xfilter.dimension(function (d) {   
  return d.a + ',' + d.b + ',' + d.c;
});

Answer 3

I created a jsfiddle for this at http://jsfiddle.net/djmartin_umich/7R9wd/. It could use some cleaning up but it gets the point across.

1) Create your dimension with the concatenated fields (like Ethan suggested). I created a new dimension because you probably want your graph to use the date only dimension. In this case I converted the date to a string before concatenating.

 var dateLableDim = ndx.dimension(function(d) { return parseDate(d3.time.day.floor(d.date)) + " - " + d.label });

2) Store the actual date and label as part of the grouping method:

var dateDimTotal = dateDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);

    function reduceAdd(p, v) {
        p.date = parseDate(d3.time.day.floor(v.date));
        p.label = v.label;
        ++p.count;
        p.total += v.value;
        if (p.count == 0) {
            p.average = 0;
        } else {
            p.average = p.total / p.count;
        };
        return p;
    }

3) Refer to those fields in your dataTable (or dynaTable):

var datatable = $('.table').dataTable({
        "aaData" : dateDimTotal.top(Infinity),
        "bDestroy": true,
        "aoColumns": [
            { "mData": function(d) { return d.value.label; }, "sDefaultContent": ""},                
            { "mData": function(d) { return d.value.date; }, "sDefaultContent": ""},
            { "mData": function(d) { return d.value.count; }, "sDefaultContent": ""},
            { "mData": function(d) { return d.value.average; }, "sDefaultContent": ""}
        ]
    })