d3/dc.js - How to create a stacked bar chart while telling crossfilter to treat elements in an array as separate records?

Question

NEW: The fiddle I posted in my solution works (https://jsfiddle.net/jnf84n7c/). However, when I try to implement the tactics in my project, I'm having issues. When I click on a graph that isn't the first graph, I'm getting an error message.

Uncaught TypeError: a.group.all is not a function (error located in dc.min.js)

Any idea why it works in the fiddle but not when applied in my ruby-on-rails application?

New code

var data = [
    {"key":"KEY-1","state":"MA","status":["A","R","C"],"items":["orange","meat","bread"],"date":"Y16"},
    {"key":"KEY-2","state":"MA","status":["A","O"],"items":["apple","bread"],"date":"Y15"},
    {"key":"KEY-3","state":"TX","status":["O"],"items":["bread"],"date":"Y16"},
    {"key":"KEY-4","state":"TN","status":["A","R"],"items":["apple","bread"],"date":"Y16"},
    {"key":"KEY-5","state":"TN","status":["A","O"],"items":["apple","orange"],"date":"Y15"},
    {"key":"KEY-6","state":"TN","status":[],"items":[],"date":"Y14"}
];
var cf = crossfilter(data);
var dates       = cf.dimension(function(d){ return d.date; });
var datesGroup  = dates.group();
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group();
var itemsDim    = cf.dimension(function(d){ return d.items; });
var itemsGroup  = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all  = myAllFunction;
var states_items_group_apple  = states.group().reduce(reduceAdd_apple,  reduceRemove_apple,  reduceInitial_items);
var states_items_group_bread  = states.group().reduce(reduceAdd_bread,  reduceRemove_bread,  reduceInitial_items);
var states_items_group_orange = states.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat   = states.group().reduce(reduceAdd_meat,   reduceRemove_meat,   reduceInitial_items);
var itemsGroup1  = itemsDim.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2  = itemsDim.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3  = itemsDim.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all  = myAllFunction;
itemsGroup2.all  = myAllFunction;
itemsGroup3.all  = myAllFunction;
var status       = cf.dimension(function(d){ return d.status; });
var statusGroup1 = status.groupAll().reduce(reduceAdd_group1, reduceRemove_group1, reduceInitial_group).value();
var statusGroup2 = status.groupAll().reduce(reduceAdd_group2, reduceRemove_group2, reduceInitial_group).value();
var statusGroup3 = status.groupAll().reduce(reduceAdd_group3, reduceRemove_group3, reduceInitial_group).value();
var statusGroup4 = status.groupAll().reduce(reduceAdd_group4, reduceRemove_group4, reduceInitial_group).value();
statusGroup1.all = myAllFunction;
statusGroup2.all = myAllFunction;
statusGroup3.all = myAllFunction;
statusGroup4.all = myAllFunction;
var statusGroup  = status.groupAll().reduce(reduceAdd_group, reduceRemove_group, reduceInitial_group).value();
statusGroup.all  = myAllFunction;
var row = dc.rowChart("#rowchart");
row.height(170)
   .dimension(itemsDim)
   .group(itemsGroup)
   .ordering(function(d){return -d.value;})
   .renderLabel(true)
   .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
   .xAxis().ticks(3);
row.filterHandler(myFilterFunction);
var pie1 = dc.pieChart("#piechart1");
pie1.height(75).width(75)
    .dimension(dates)
    .group(datesGroup);
var pie2 = dc.pieChart("#piechart2");
pie2.height(75).width(75)
    .dimension(states)
    .group(statesGroup);
var pie3 = dc.pieChart("#piechart3");
pie3.height(75).width(75)
    .dimension(status)
    .group(statusGroup);
pie3.filterHandler(myFilterFunction);
var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(states)
   .group(states_items_group_bread,  'bread')
   .stack(states_items_group_orange, 'orange')
   .stack(states_items_group_apple,  'apple')
   .stack(states_items_group_meat,   'meat')
   .valueAccessor(function(p){ return p.value.count; })
   .renderHorizontalGridLines(true)
   .renderLabel(true)
   .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100))
   .gap(10)
   .elasticX(true).elasticY(true)
   .yAxisLabel("count")
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal)
   .margins({top:30,left:50,right:10,bottom:50});    
var bar2 = dc.barChart("#barchart2");
bar2.width(500).height(200)
    .dimension(itemsDim)
    .group(itemsGroup1,'MA')
    .stack(itemsGroup2,'TN')
    .stack(itemsGroup3,'TX')
    .renderHorizontalGridLines(true)
    .renderLabel(true)
    .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
    .gap(10)
    .yAxisLabel("count")
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
    .margins({top:30,left:50,right:10,bottom:50});
bar2.filterHandler(myFilterFunction);
var bar3 = dc.barChart("#barchart3");
bar3.width(500).height(200)
    .dimension(status)
    .group(statusGroup1,"bread")
    .stack(statusGroup2,"apple")
    .stack(statusGroup3,"orange")
    .stack(statusGroup4,"meat")
    .renderHorizontalGridLines(true)
    .renderLabel(true)
    .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
    .gap(10)
    .yAxisLabel("count")
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .margins({top:30,left:50,right:10,bottom:50});
bar3.filterHandler(myFilterFunction);
dc.renderAll();
function reduceAdd(p,v){
    if (v.items[0] === "") return p;
    v.items.forEach(function(val,idx){
        p[val] = (p[val] || 0) + 1;
    });
    return p;
}
function reduceRemove(p,v){
    if (v.items[0] === "") return p;
    v.items.forEach(function(val,idx){
        p[val] = (p[val] || 0) - 1;
    });
    return p;
}
function reduceInitial(){
    return {
        bread: 0,
        apple: 0,
        orange: 0,
        meat: 0
    };
}
function reduceAdd1(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "MA"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove1(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "MA"){
        v.items.forEach(function(val,idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd2(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TN"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove2(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TN"){
        v.items.forEach(function(val,idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd3(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TX"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove3(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TX"){
        v.items.forEach(function(val,idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd_apple(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceRemove_apple(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceAdd_bread(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceRemove_bread(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceAdd_orange(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceRemove_orange(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceAdd_meat(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceRemove_meat(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceAdd_group1(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if (val1 === "bread"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceRemove_group1(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "bread"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceAdd_group2(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "apple"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceRemove_group2(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "apple"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceAdd_group3(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "orange"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceRemove_group3(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "orange"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceAdd_group4(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "meat"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceRemove_group4(p,v){
    if (v.items[0]  === "") return p;
    if (v.status[0] === "") return p;
    v.items.forEach(function(val1,idx1){
        if(val1 === "meat"){
            v.status.forEach(function(val2,idx2){
                if(idx1 === idx2){
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });
        }
    });
    return p;
}
function reduceAdd_group(p,v){
    if (v.status[0] === "") return p;
    v.status.forEach(function(val,idx){
        p[val] = (p[val] || 0) + 1;
    });
    return p;
}
function reduceRemove_group(p,v){
    if (v.status[0] === "") return p;
    v.status.forEach(function(val,idx){
        p[val] = (p[val] || 0) - 1;
    });
    return p;
}
function reduceInitial_group(){
    return {
        A: 0,
        O: 0,
        C: 0,
        R: 0
    };
}
function reduceInitial_items(){
    return {
        count: 0,
        state: ''
    };
}
//filter function:
function myFilterFunction(dimension,filters){
    dimension.filter(null);
    if (filters.length === 0)
        dimension.filter(null);
    else
        dimension.filterFunction(function(d){
            for(var i=0; i<d.length; i++){
                if (filters.indexOf(d[i]) >= 0) return true;
            }
            return false;
        });
    return filters;
}
function myAllFunction(){
    var newObject = [];
    for(var key in this){
        if(this.hasOwnProperty(key) && key != "all"){
            newObject.push({
                key: key,
                value: this[key]
            });
        }
    }
    return newObject;
};

Old Question: I'm sorry to create another question. Unfortunately, I am unable to comment on the other posts to ask my question. The two questions that are similar to mine are: dc.js - how to group by unique id and Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?

I am using the code as explained in the latter one. However, I want to be able to stack. As you will be able to see in the jsfiddle, the bottom bar graph does not list the items in the x-axis, stacking the different state counts. Any help would be greatly appreciated. Thank you!

Here's the original fiddle: https://jsfiddle.net/7qwqcakr/1/

I nearly have it with this fiddle: https://jsfiddle.net/wq0ed5hr/ But the stacked bar charts are all one color even though the legend has them as different colors. How do I fix the color issue?

Fixed the color issue: https://jsfiddle.net/rmc2zpr4/

Now the only problem deals with the "counting issue" as explained in my solution and comments below.

Here's the updated code:

var data = [
    {"key":"KEY-1","state":"MA","items":["orange","meat","bread"],"date":"Y16"},
    {"key":"KEY-2","state":"MA","items":["apple","bread"],"date":"Y15"},
    {"key":"KEY-3","state":"TX","items":["bread"],"date":"Y16"},
    {"key":"KEY-4","state":"TN","items":["apple","bread"],"date":"Y16"},
    {"key":"KEY-5","state":"TN","items":["apple","orange"],"date":"Y15"},
    {"key":"KEY-6","state":"TN","items":[],"date":"Y14"}
];
var cf = crossfilter(data);
var dates       = cf.dimension(function(d){ return d.date; });
var datesGroup  = dates.group().reduceCount(function(d){ return d.key; });
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group().reduceCount(function(d){ return d.key; });
var itemsDim    = cf.dimension(function(d){ return d.items; });
var itemsGroup  = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all  = myAllFunction;
var statesDim   = cf.dimension(function(d){ return d.state; });
var states_items_group_apple  = statesDim.group().reduce(reduceAdd_apple,  reduceRemove_apple,  reduceInitial_items);
var states_items_group_bread  = statesDim.group().reduce(reduceAdd_bread,  reduceRemove_bread,  reduceInitial_items);
var states_items_group_orange = statesDim.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat   = statesDim.group().reduce(reduceAdd_meat,   reduceRemove_meat,   reduceInitial_items);
var items        = cf.dimension(function(d){ return d.items; })
var itemsGroup1  = items.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2  = items.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3  = items.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all  = myAllFunction;
itemsGroup2.all  = myAllFunction;
itemsGroup3.all  = myAllFunction;
var row = dc.rowChart("#rowchart");
row.height(170)
   .dimension(itemsDim)
   .group(itemsGroup)
   .ordering(function(d){return -d.value;})
   .renderLabel(true)
       .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
   .xAxis().ticks(3);
row.filterHandler(myFilterFunction);
var pie1 = dc.pieChart("#piechart1");
pie1.height(75).width(75)
    .dimension(dates)
    .group(datesGroup);
var pie2 = dc.pieChart("#piechart2");
pie2.height(75).width(75)
    .dimension(states)
    .group(statesGroup);
var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(statesDim)
   .group(states_items_group_bread,  'bread')
   .stack(states_items_group_orange, 'orange')
   .stack(states_items_group_apple,  'apple')
   .stack(states_items_group_meat,   'meat')
   .valueAccessor(function(p){ return p.value.count; })
   .renderHorizontalGridLines(true)
   .renderLabel(true)
   .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100))
   .gap(10)
   .elasticX(true).elasticY(true)
   .yAxisLabel("count")
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal)
   .margins({top:30,left:50,right:10,bottom:50});
var bar2 = dc.barChart("#barchart2");
bar2.width(500).height(200)
    .dimension(items)
    .group(itemsGroup1,'MA')
    .stack(itemsGroup2,'TN')
    .stack(itemsGroup3,'TX')
    .renderHorizontalGridLines(true)
    .renderLabel(true)
    .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
    .gap(10)
    .yAxisLabel("count")
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .ordinalColors(["#008600","#80FF80","#FF80FF","#860086"])
    .margins({top:30,left:50,right:10,bottom:50});
bar2.filterHandler(myFilterFunction);
dc.renderAll();
//reduce functions:
function reduceAdd(p,v){
    if (v.items[0] === "") return p;
    v.items.forEach(function(val,idx){
        p[val] = (p[val] || 0) + 1;
    });
    return p;
}
function reduceRemove(p,v){
    if (v.items[0] === "") return p;
    v.items.forEach(function(val,idx){
        p[val] = (p[val] || 0) - 1;
    });
    return p;
}
function reduceInitial(){
    return {
        bread: 0,
        apple: 0,
        orange: 0,
        meat: 0
    };
}
function reduceAdd1(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "MA"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove1(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "MA"){
        v.items.forEach(function(val, idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd2(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TN"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove2(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TN"){
        v.items.forEach(function(val,idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd3(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TX"){
        v.items.forEach(function(val,idx){
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceRemove3(p,v){
    if (v.items[0] === "") return p;
    if (v.state === "TX"){
        v.items.forEach(function(val,idx){
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });
    }
    return p;
}
function reduceAdd_apple(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceRemove_apple(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceAdd_bread(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceRemove_bread(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceAdd_orange(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceRemove_orange(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceAdd_meat(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count += (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceRemove_meat(p,v){
    if (v.items[0] === "") return p;
    p.state = v.state;
    v.items.forEach(function(val,idx){
        p.count -= (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceInitial_items(){
    return {
        count: 0,
        state: ''
    };
}
function myFilterFunction(dimension,filters){
    dimension.filter(null);
    if(filters.length === 0)
        dimension.filter(null);
    else
        dimension.filterFunction(function(d){
            for(var i=0; i<d.length; i++){
                if(filters.indexOf(d[i]) >= 0) return true;
            }
            return false;
        });
    return filters;
}
function myAllFunction(){
    var newObject = [];
    for(var key in this){
        if(this.hasOwnProperty(key) && key != "all"){
            newObject.push({
                key: key,
                value: this[key]
            });
        }
    }
    return newObject;
};

Answer 1

The first thing you need to do is upgrade to:

• dc.js 2.0 betas
• Crossfilter 1.4.0-beta.06 (Crossfilter now lives here: https://github.com/crossfilter/crossfilter)
• Reductio (recommended) so that you don't have to manually build custom groupings - this not strictly necessary, but groupings are the source of a lot of problems, so I'd recommend using Reductio or Universe to leverage the work of those who came before.

Next, with all this new goodness, we can simplify things a ton. Here is an updated fiddle using the new features of these libraries: https://jsfiddle.net/ff8ox8vq/

I'll go through them in a little detail in the complete code sample below.

var data = [
    {"key":"KEY-1","state":"MA", "items":["orange", "meat", "bread"], "date":"Y16"},
    {"key":"KEY-2","state":"MA", "items":["apple", "bread"], "date":"Y15"},
    {"key":"KEY-3","state":"TX", "items":["bread"], "date":"Y16"},
    {"key":"KEY-4","state":"TN", "items":["apple", "bread"], "date":"Y16"},
    {"key":"KEY-5","state":"TN", "items":["apple", "orange"], "date":"Y15"},
    {"key":"KEY-6","state":"TN", "items": [], "date":"Y14"}
];

var cf = crossfilter(data);

No change above.

//dimensions and groups:
var dates       = cf.dimension(function(d){ return d.date; });
var datesGroup  = dates.group();
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group()

.reduceCount is the default setting of a group. Calling it on a new group doesn't do anything. reduceCount also doesn't take any parameters (unlike reduceSum). So we just get rid of it.

var itemsDim    = cf.dimension(function(d){ return d.items; }, true);
var itemsGroup  = itemsDim.group();

This is where it starts to get interesting. Crossfilter 1.4.0 supports an "Array dimension" flag on a dimension call. If we set this to true, Crossfilter knows that items is an array and will be smart about how it handles it. You no longer have to override the .all method or anything like that. It's handled internally.

var addValueGroup = function(reducer, key) {
    reducer
    .value(key)
    .filter(function(d) { return d.items.indexOf(key) !== -1; })
    .count(true)
}

Utility function for adding item-specific counts to the state groups.

// Reductio nest to break down states by item
var reducer = reductio().count(true)
addValueGroup(reducer, "orange")
addValueGroup(reducer, "meat")
addValueGroup(reducer, "bread")
addValueGroup(reducer, "apple")

reducer(statesGroup);

Configure the grouping of statesGroup. Reductio just builds custom reduce functions. What happens here is that we maintain a top-level count of all records in a state, then we create filtered counts for each type of item. Do a console.log(statesGroup.all()) after this runs to see the structure of the resulting group.

//graphs:
var row = dc.rowChart("#rowchart");
row
    .renderLabel(true)
    .height(200)
    .dimension(itemsDim)
    .group(itemsGroup)
    .ordering(function(d){return -d.value;})
    .xAxis().ticks(3);

var pie1 = dc.pieChart("#piechart1");
pie1
  .height(75)
  .width(75)
  .dimension(dates)
  .group(datesGroup);

No change.

var pie2 = dc.pieChart("#piechart2");
pie2
  .height(75)
  .width(75)
  .dimension(states)
  .group(statesGroup)
  .valueAccessor(function(d) { return d.value.count; });

Our Reductio reducer changes the structure of the group somewhat, so we need a valueAccessor.

var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(states)
   .group(statesGroup, 'orange', sel_stack('orange'))
   .stack(statesGroup, 'meat', sel_stack('meat'))
   .stack(statesGroup, 'bread', sel_stack('bread'))
   .stack(statesGroup, 'apple', sel_stack('apple'))
   .renderHorizontalGridLines(true)
   .renderLabel(true)
   .legend(dc.legend())
   .gap(10)
   .yAxisLabel("count")
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal);

Just works with no fancy custom filter functions or anything. dc.js and Crossfilter know what to do. There does seem to be a bug in dc.js with ordinal stacked bar charts, unfortunately, so you'll have to color the bars correctly post-render at the moment :-( Maybe Gordon will chime in with a hint here.

dc.renderAll();

function sel_stack(i) {
    return function(d) {
        return d.value[i] ? d.value[i].count : 0;
    };
}

Slight change due to the updated group structure, and a little safety in case you mis-type one of the item keys.

Answer 2

I fixed the colored stack problem and counting issue to how I'd like the counting to be done. I am using D3.js verison 2.5.5, crossfilter.js version 1.3.11, and dc.js and dc.css of version 2.1.0 dev. https://jsfiddle.net/jnf84n7c/

var data = [
    {"key":"KEY-1","state":"MA", "status":["A","R","C"], "items":["orange", "meat", "bread"], "date":"Y16"},
    {"key":"KEY-2","state":"MA", "status":["A","O"], "items":["apple", "bread"], "date":"Y15"},
    {"key":"KEY-3","state":"TX", "status":["O"], "items":["bread"], "date":"Y16"},
    {"key":"KEY-4","state":"TN", "status":["A","R"], "items":["apple", "bread"], "date":"Y16"},
    {"key":"KEY-5","state":"TN", "status":["A","O"], "items":["apple", "orange"], "date":"Y15"},
    {"key":"KEY-6","state":"TN", "status":[], "items": [], "date":"Y14"}
];

var cf = crossfilter(data);

//dimensions and groups:
var dates       = cf.dimension(function(d){ return d.date; });
var datesGroup  = dates.group();//.reduceCount(function(d){ return d.key; });
var states      = cf.dimension(function(d){ return d.state; });
var statesGroup = states.group();//.reduceCount(function(d){ return d.key; });
var itemsDim    = cf.dimension(function(d){ return d.items; });
var itemsGroup  = itemsDim.groupAll().reduce(reduceAdd, reduceRemove, reduceInitial).value();
itemsGroup.all  = myAllFunction;
var states_items_group_apple  = states.group().reduce(reduceAdd_apple,  reduceRemove_apple,  reduceInitial_items);
var states_items_group_bread  = states.group().reduce(reduceAdd_bread,  reduceRemove_bread,  reduceInitial_items);
var states_items_group_orange = states.group().reduce(reduceAdd_orange, reduceRemove_orange, reduceInitial_items);
var states_items_group_meat   = states.group().reduce(reduceAdd_meat,   reduceRemove_meat,   reduceInitial_items);
var itemsGroup1  = itemsDim.groupAll().reduce(reduceAdd1, reduceRemove1, reduceInitial).value();
var itemsGroup2  = itemsDim.groupAll().reduce(reduceAdd2, reduceRemove2, reduceInitial).value();
var itemsGroup3  = itemsDim.groupAll().reduce(reduceAdd3, reduceRemove3, reduceInitial).value();
itemsGroup1.all  = myAllFunction;
itemsGroup2.all  = myAllFunction;
itemsGroup3.all  = myAllFunction;
var status       = cf.dimension(function(d){ return d.status; });
var statusGroup1 = status.groupAll().reduce(reduceAdd_group1, reduceRemove_group1, reduceInitial_group).value();
var statusGroup2 = status.groupAll().reduce(reduceAdd_group2, reduceRemove_group2, reduceInitial_group).value();
var statusGroup3 = status.groupAll().reduce(reduceAdd_group3, reduceRemove_group3, reduceInitial_group).value();
var statusGroup4 = status.groupAll().reduce(reduceAdd_group4, reduceRemove_group4, reduceInitial_group).value();
statusGroup1.all = myAllFunction;
statusGroup2.all = myAllFunction;
statusGroup3.all = myAllFunction;
statusGroup4.all = myAllFunction;
var statusGroup  = status.groupAll().reduce(reduceAdd_group, reduceRemove_group, reduceInitial_group).value();
statusGroup.all  = myAllFunction;

//graphs:
var row = dc.rowChart("#rowchart");
row.height(170)
   .dimension(itemsDim)
   .group(itemsGroup)
   .ordering(function(d){return -d.value;})
   .renderLabel(true)
       .ordinalColors(["#008600", "#80FF80", "#FF80FF", "#860086"])
   .xAxis().ticks(3);
row.filterHandler(myFilterFunction);

var pie1 = dc.pieChart("#piechart1");
pie1.height(75).width(75)
    .dimension(dates)
    .group(datesGroup);

var pie2 = dc.pieChart("#piechart2");
pie2.height(75).width(75)
    .dimension(states)
    .group(statesGroup);

var pie3 = dc.pieChart("#piechart3");
pie3.height(75).width(75)
    .dimension(status)
    .group(statusGroup);
pie3.filterHandler(myFilterFunction);

var bar = dc.barChart("#barchart");
bar.width(500).height(200)
   .dimension(states)
   .group(states_items_group_bread,  'bread')
   .stack(states_items_group_orange, 'orange')
   .stack(states_items_group_apple,  'apple')
   .stack(states_items_group_meat,   'meat')
   .valueAccessor(function(p){ return p.value.count; })
   .renderHorizontalGridLines(true)
   .renderLabel(true)
   .legend(dc.legend().x(100).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(100))
   .gap(10)
   .elasticX(true).elasticY(true)
   .yAxisLabel("count")
   .x(d3.scale.ordinal())
   .xUnits(dc.units.ordinal)
   .margins({top:30, left:50, right:10, bottom:50});
//bar.filterHandler(myFilterFunction);
//bar.on("renderlet", function(_chart){
//    _chart.selectAll("rect.bar").on("click", _chart.onClick);
//});

var bar2 = dc.barChart("#barchart2");
bar2.width(500).height(200)
    .dimension(itemsDim)
    .group(itemsGroup1, 'MA')
    .stack(itemsGroup2, 'TN')
    .stack(itemsGroup3, 'TX')
    .renderHorizontalGridLines(true)
    .renderLabel(true)
    .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
    .gap(10)
    .yAxisLabel("count")
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
    .ordinalColors(["#008600", "#80FF80", "#FF80FF", "#860086"])
    .margins({top:30, left:50, right:10, bottom:50});
bar2.filterHandler(myFilterFunction);

var bar3 = dc.barChart("#barchart3");
bar3.width(500).height(200)
    .dimension(status)
    .group(statusGroup1, "bread")
    .stack(statusGroup2, "apple")
    .stack(statusGroup3, "orange")
    .stack(statusGroup4, "meat")
    .renderHorizontalGridLines(true)
    .renderLabel(true)
    .legend(dc.legend().x(60).y(0).horizontal(1).itemHeight(13).gap(6).legendWidth(400).itemWidth(60))
    .gap(10)
    .yAxisLabel("count")
    .x(d3.scale.ordinal())
    .xUnits(dc.units.ordinal)
//    .ordinalColors(["#008600", "#80FF80", "#FF80FF", "#860086"])
    .margins({top:30, left:50, right:10, bottom:50});
bar3.filterHandler(myFilterFunction);

dc.renderAll();  // render graphs

//reduce functions:
function reduceAdd(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    v.items.forEach (function(val, idx) {
        p[val] = (p[val] || 0) + 1; //increment counts
    });
    return p;
}
function reduceRemove(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    v.items.forEach (function(val, idx) {
        p[val] = (p[val] || 0) - 1; //decrement counts
    });
    return p;
}
function reduceInitial() {
    return {
        bread: 0,
        apple: 0,
        orange: 0,
        meat: 0
    };  
}
function reduceAdd1(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "MA"){
        v.items.forEach (function(val, idx) {
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceRemove1(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "MA"){
        v.items.forEach (function(val, idx) {
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceAdd2(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "TN"){
        v.items.forEach (function(val, idx) {
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceRemove2(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "TN"){
        v.items.forEach (function(val, idx) {
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceAdd3(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "TX"){
        v.items.forEach (function(val, idx) {
            p.bread  += (val === 'bread'  ? 1 : 0);
            p.apple  += (val === 'apple'  ? 1 : 0);
            p.orange += (val === 'orange' ? 1 : 0);
            p.meat   += (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceRemove3(p, v) {
    if (v.items[0] === "") return p;    // skip empty values
    if (v.state === "TX"){
        v.items.forEach (function(val, idx) {
            p.bread  -= (val === 'bread'  ? 1 : 0);
            p.apple  -= (val === 'apple'  ? 1 : 0);
            p.orange -= (val === 'orange' ? 1 : 0);
            p.meat   -= (val === 'meat'   ? 1 : 0);
        });    
    }
    return p;
}
function reduceAdd_apple(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count += (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceRemove_apple(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count -= (val === 'apple' ? 1 : 0);
    });
    return p;
}
function reduceAdd_bread(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count += (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceRemove_bread(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count -= (val === 'bread' ? 1 : 0);
    });
    return p;
}
function reduceAdd_orange(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count += (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceRemove_orange(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count -= (val === 'orange' ? 1 : 0);
    });
    return p;
}
function reduceAdd_meat(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count += (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceRemove_meat(p, v){
    if (v.items[0] === "") return p;    // skip empty values
    p.state = v.state;
    v.items.forEach(function(val, idx){
        p.count -= (val === 'meat' ? 1 : 0);
    });
    return p;
}
function reduceAdd_group1(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "bread"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceRemove_group1(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "bread"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceAdd_group2(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "apple"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceRemove_group2(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "apple"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceAdd_group3(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "orange"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceRemove_group3(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "orange"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2){
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceAdd_group4(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "meat"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A += (val2 === 'A' ? 1 : 0);
                p.O += (val2 === 'O' ? 1 : 0);
                p.C += (val2 === 'C' ? 1 : 0);
                p.R += (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceRemove_group4(p, v) {
    if (v.items[0]  === "") return p;    // skip empty values
    if (v.status[0] === "") return p;    // skip empty values
    v.items.forEach(function(val1, idx1){
        if (val1 === "meat"){
            v.status.forEach (function(val2, idx2) {
                if (idx1 === idx2) {
                p.A -= (val2 === 'A' ? 1 : 0);
                p.O -= (val2 === 'O' ? 1 : 0);
                p.C -= (val2 === 'C' ? 1 : 0);
                p.R -= (val2 === 'R' ? 1 : 0);
                }
            });    
        }
    });
    return p;
}
function reduceAdd_group(p, v) {
    if (v.status[0] === "") return p;    // skip empty values
    v.status.forEach (function(val, idx) {
        p[val] = (p[val] || 0) + 1;
    });
    return p;
}
function reduceRemove_group(p, v) {
    if (v.status[0] === "") return p;    // skip empty values
    v.status.forEach (function(val, idx) {
        p[val] = (p[val] || 0) - 1;
    });
    return p;
}
function reduceInitial_group() {
    return {
        A: 0,
        O: 0,
        C: 0,
        R: 0
    };  
}
function reduceInitial_items(){
    return {
        count: 0,
        state: ''
    };
}


//filter function:
function myFilterFunction (dimension, filters) {
    dimension.filter(null);   
    if (filters.length === 0)
        dimension.filter(null);
    else
        dimension.filterFunction(function (d) {
            for (var i=0; i < d.length; i++) {
                if (filters.indexOf(d[i]) >= 0) return true;
            }
            return false;
        });
    return filters; 
}

//all function:
function myAllFunction() {
    var newObject = [];
    for (var key in this) {
        if (this.hasOwnProperty(key) && key != "all") {
            newObject.push({
                key: key,
                value: this[key]
            });
        }
    }
    return newObject;
};