Stacked Chart With Data Array In D3 Js

I have try to customize my existing code of Stacked Bar graph with the help of this link https://bl.ocks.org/mbostock/1134768. I have done this graph with the help of given link bu

Solution 1:

Here is solution about my confusion on how can i show the total count on y axis because in my array data there is key 'total' which is total count of all states such as 'A','B' & 'C' shown in array data

vardata = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

So as there is a total key in array data and i have to show as label on y axis.Here is my full code

var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

var xData = ["A", "B", "C"];

  var parseDate = d3.time.format("%m/%Y").parse;

var margin = {top: 20, right: 50, bottom: 30, left: 50},
        width = 500 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

var y = d3.scale.linear()
        .rangeRound([height, 0]);

var color = d3.scale.category20();
//console.info(color(0));var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#pie").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
      d.month = parseDate(d.month);
      xData.forEach(function(c) {
        d[c] = +d[c];
      });

    })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};
    });
});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x;
}));

y.domain([0,
   d3.max(data, function(d) { return d.total; })
    ])
  .nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            returncolor(i);
        });

layer.selectAll("rect")
        .data(function (d) {
            return d;
        })
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            returnx(d.x);
        })
        .attr("y", function (d) {
            returny(d.y + d.y0);
        })
        .attr("height", function (d) {
            // console.info(d.y0, d.y, y(d.y0), y(d.y))returny(d.y0) - y(d.y + d.y0);
        })
        .attr("width", x.rangeBand() -1);


svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
}

Solution 2:

In case you are trying to add a new dataset with key "total", try to add key "total" in your xData array like following and it should be Visible on chart.

var xData = ["total", "A", "B", "C"];