title: dc.js: stacked barchart cant display
body: <p>I'm making a stacked barchart using the Dimensional Charting javascript library dc.js, which is based on d3 and crossfilter. I am new in dc.js library. I am trying to display the stacked barchart using a csv file. I can't understand how to create a stacked barchart following the csv format.</p>
  
  <pre><code>State_Name   Age_19_Under   Age_19_64   Age_65_84   
   AL      26.9             62.3            9.8               
   AL      23.5             60.3            14.5              
   NW      24.3             62.5            11.6              
   NW      24.6             63.3            10.9              
   BR      24.5             62.1            12.1              
   BR      24.7             63.2            10               
   GH      25.6             58.5            13.6             
   GH      24.1             61.6            12.7             
   KS      24.8             59.5            13.5              
  </code></pre>
  
  <p>i am trying following code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
     var stacked = dc.barChart("#chart");
    d3.csv("{% static 'sampledata/healthdata111.csv' %}", function(error, experiments) {
  
     var ndx = crossfilter(experiments);
     var all = ndx.groupAll();
  
     var stateDim=ndx.dimension(function (d){
      return d.State_Name;
     });
  
     var eventsByDate = stateDim.group().reduce(
          function (p, v) {
              p.Age_19_Under += v.Age_19_Under;
              p.Age_19_64 += v.Age_19_64;
              p.Age_65_84 += v.Age_65_84;
              return p;
          },
          function (p, v) {
              p.Age_19_Under -= v.Age_19_Under;
              p.Age_19_64 -= v.Age_19_64;
              p.Age_65_84 -= v.Age_65_84;
              return p;
          },
          function () {
              return {
                  Age_19_Under: 0,
                  Age_19_64: 0,
                  Age_65_84: 0
              };
          }
    );
  
    var colorRenderlet = function (chart) {
      chart.selectAll("rect.bar")
              .on("click", function (d) {
                  function setAttr(selection, keyName) {
                      selection.style("fill", function (d) {
                          if (d[keyName] == "Age_19_Under") return "#63D3FF";
                          else if (d[keyName] == "Age_19_64") return "#FF548F";
                          else if (d[keyName] == "Age_65_84") return "#9061C2";
                      });
                  }
                  setAttr(_chart.selectAll("g.stack").selectAll("rect.bar"), "layer");
                  setAttr(_chart.selectAll("g.dc-legend-item").selectAll("rect"), "name")
              });
  };
  
   stacked
          .margins({top: 50, right: 20, left: 50, bottom: 50})
          .width(500)
          .height(200)
          .gap(50)
          .dimension(stateDim)
          .group(eventsByDate, "Age_19_Under")
          .valueAccessor(function (d) {
              return d.value.Age_19_Under;
          })
          .stack(eventsByDate, "Age_19_64", function (d) {
              return d.value.Age_19_64;
          })
          .stack(eventsByDate, "Age_65_84", function (d) {
              return d.value.Age_65_84;
          })
          .x(d3.time.scale().domain([0,5000]))
          .xUnits(d3.time.days)
          .centerBar(true)
          .elasticY(true)
          .brushOn(false)
          .renderlet(colorRenderlet);
         // .legend(dc.legend().x(100).y(0).itemHeight(13).gap(5));
  
       dc.renderAll();
  
    });
  
  &lt;/script&gt;
  </code></pre>