Casey Casey - 1 month ago 22
Javascript Question

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

NEW Portion of Question: The fiddle I posted in my solution works. 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?

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);

//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 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;

//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 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});
//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(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(); // 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 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;
};

Answer

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;
};