score:3

First, lets think about two separate graphs of 2 sets of data. The scales are the same. It will look like this:

http://jsfiddle.net/MmEjF/50/

OK. That's all well and good, but how do we get from there to a stacked chart?

Well, we need to make sure each tick has both pieces of data.

Then, when plotting each tick, it should have the first piece of data plotted from 0, and the second should be plotted not from zero, but offset by the amount of the first data.

With that in mind, other pieces fall into place: the y axis must be from 0 to max of the sum of the two pieces of data.

var data = [{"year":2013,"month":3,"day":5,"count1":18, "count2":3},
            {"year":2013,"month":3,"day":6,"count1":3, "count2":11},
            {"year":2013,"month":3,"day":7,"count1":10,"count2": 8}, 
            {"year":2013,"month":3,"day":8,"count1":18, "count2": 4}];

var maxValue = d3.max(data, function (d) {
  return d.count1 + d.count2;
});

var yScale = d3.scale.linear()
  .domain([0, maxValue])
  .range([0, height]);

Now, it's easier to treat each set of bars as a group, and add the bars to that group:

   var bars = svg.selectAll(".bar")
      .data(data).enter()
      .append("g")
      .attr("class","bar")
      .attr("transform", function(d){
        return "translate("+xTimeScale(d.date)+",0)"
      });

    var count1Bars = bars.append("rect")
      .attr("class", "count1")
      .attr("height", function(d){return yScale(d.count1)})
      .attr("y", function(d){return height - yScale(d.count1)})
      .attr("width", barWidth);

    var count2Bars = bars.append("rect")
      .attr("class", "count2")
      .attr("height", function(d){return yScale(d.count2)})
      .attr("y", function(d){return height - yScale(d.count1) -yScale(d.count2)})
      .attr("width", barWidth);

    var count1text = bars.append("text")
      .text(function(d){return d.count1})
      .attr("y", function(d){return height})
      .attr("x", barWidth / 2);

    var count2text = bars.append("text")
      .text(function(d){return d.count2})
      .attr("y", function(d){return height - yScale(d.count1)})
      .attr("x", barWidth / 2);

Now, this is just a rough example to get you on your way: http://jsfiddle.net/MmEjF/49/

Good luck! Just think about what you need, and things tend to fall into place from there!


Related Query

More Query from same tag