javascript - d3.js / dc.js - How do I define a stacked bar graph's dimension and group when the data set has multiple variables? -

i have similar question 1 posted here: how create multiline chart using dc.js

i new stackoverflow, means unable add comments or have asked additional information on post. so, apologize redundancy.

i have data structured like:

var data = {   {"id": 'id_value1', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'a',"v2":'a',"v3":'c',"v4":'d',"v5":'b'}},   {"id": 'id_value2', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'a',"v2":'b',"v3":'d',"v4":'c',"v5":'a'}},   ...   {"id": 'id_valuen', ..., "dates": {"name": {"d1":"  0-91","d2":" 92-182","d3":"183-273","d4":"274-364","d5":"365+"}, "value": {"v1":'a',"v2":'a',"v3":'a',"v4":'-',"v5":'-'}} } 

i create bar graph has "0-91","92-182","183-273","274-364","365+" x-axis variables. want have stacked such each layer count each individual letter (a,b,c,d). data stored such d1 corresponding date v1 value, v2 value date d2, , on. in other words,

id         ...  0-91  92-182  183-273  274-364  365+ id_value1  ...            c        d        b id_value2  ...      b       d        c        ... id_valuen  ...                   -        - 

i post picture of want, again (since new) unable to. know make more sense see asking for.

i have tried:

var ndx = crossfilter(data);  // data var dim = ndx.dimension(function(d) {return d.id;}); var group1 = dim.group().reducecount(function(d) {return d.dates.value.v1;}); var group2 = dim.group().reducecount(function(d) {return d.dates.value.v2;}); var group3 = dim.group().reducecount(function(d) {return d.dates.value.v3;}); var group4 = dim.group().reducecount(function(d) {return d.dates.value.v4;}); var group5 = dim.group().reducecount(function(d) {return d.dates.value.v5;}); var compositechart = dc.compositechart("#bar")     .width(1850).height(150)     .dimension(dim)     .group(group1)     .valueaccessor(function(d) {return d.value;})     .x(d3.scale.ordinal())     .xunits(dc.units.ordinal)     .compose([         dc.barchart(compositechart).group(group1).gap(10),         dc.barchart(compositechart).group(group2).gap(10),         dc.barchart(compositechart).group(group3).gap(10),         dc.barchart(compositechart).group(group4).gap(10),         dc.barchart(compositechart).group(group5).gap(10)     ]); 

but doesn't work. closest have managed want create 5 different graphs, 1 each date. following bit of code demonstrates this:

var chart1 = dc.barchart("#chart1"); var dim1 = ndx.dimension(function(d) {return d.dates.name.d1;}); var a1 = dim1.group().reducesum(function(d) {if(d.dates.value.v1 === "a"){return +1;}else{return 0;}}); var b1 = dim1.group().reducesum(function(d) {if(d.dates.value.v1 === "b"){return +1;}else{return 0;}}); var c1 = dim1.group().reducesum(function(d) {if(d.dates.value.v1 === "c"){return +1;}else{return 0;}}); var d1 = dim1.group().reducesum(function(d) {if(d.dates.value.v1 === "d"){return +1;}else{return 0;}});  var chart2 = dc.barchart("#chart2"); var dim2 = ndx.dimension(function(d) {return d.dates.name.d2;}); var a2 = dim2.group().reducesum(function(d) {if(d.dates.value.v2 === "a"){return +1;}else{return +0;}}); var b2 = dim2.group().reducesum(function(d) {if(d.dates.value.v2 === "b"){return +1;}else{return +0;}}); var c2 = dim2.group().reducesum(function(d) {if(d.dates.value.v2 === "c"){return +1;}else{return +0;}}); var d2 = dim2.group().reducesum(function(d) {if(d.dates.value.v2 === "d"){return +1;}else{return +0;}});  ...  var chart5 = dc.barchart("#chart5"); var dim5 = ndx.dimension(function(d) {return d.dates.name.d5;}); var a5 = dim5.group().reducesum(function(d) {if(d.dates.value.v5 === "a"){return +1;}else{return 0;}}); var b5 = dim5.group().reducesum(function(d) {if(d.dates.value.v5 === "b"){return +1;}else{return 0;}}); var c5 = dim5.group().reducesum(function(d) {if(d.dates.value.v5 === "c"){return +1;}else{return 0;}}); var d5 = dim5.group().reducesum(function(d) {if(d.dates.value.v5 === "d"){return +1;}else{return 0;}});  chart1     .width(110).height(450)     .dimension(dim1)     .group(a5, "a's")     .stack(b5, "b's")     .stack(c5, "c's")     .stack(d5, "d's")     .y(d3.scale.linear().domain([minall,maxall]))     .x(d3.scale.ordinal())     .xunits(dc.units.ordinal)     .elasticy(false)     .yaxislabel("count")     .ordinalcolors(["#008600","#80ff80","#ff80ff","#860086"])     .margins({top:20, left:60, right:10, bottom:120});  chart2     .width(50).height(450)     .dimension(dim2)     .group(a2, "a's")     .stack(b2, "b's")     .stack(c2, "c's")     .stack(d2, "d's")     .y(d3.scale.linear().domain([minall,maxall]))     .x(d3.scale.ordinal())     .xunits(dc.units.ordinal)     .elasticy(false)     .ordinalcolors(["#008600","#80ff80","#ff80ff","#860086"])     .margins({top:20, left:-1, right:10, bottom:120});  ...  chart5     .width(50).height(450)     .dimension(dim5)     .group(a5, "a's")     .stack(b5, "b's")     .stack(c5, "c's")     .stack(d5, "d's")     .y(d3.scale.linear().domain([minall,maxall]))     .x(d3.scale.ordinal())     .xunits(dc.units.ordinal)     .elasticy(false)     .ordinalcolors(["#008600","#80ff80","#ff80ff","#860086"])     .margins({top:20, left:-1, right:10, bottom:120}); 

the problem these 5 graphs either won't have same flexible y-axis or have same non-flexible y-axis. want able click on other graphs in dashboard result being graphs in dashboard updated include/exclude selection. don't have issue with. can't create stacked bar graph. wanted give reason why need y-axis flexible.

i using d3.js, dc.js, , crossfilter.js. data stored in json file , included in html source file. have background information, ask question.

how define chart's dimension , group type of data create bar chart desire?