Issue with Grouped Bar Chart using D3.js

Question

I have written the below code to display grouped bar chart using d3. js,

function creategroupedbarchart()
    {
        var margin = { top: 20, right: 20, bottom: 30, left: 40 },
                    width = 960 - margin.left - margin.right,
                    height = 500 - margin.top - margin.bottom;
        var x0 = d3.scale.ordinal()
            .rangeRoundBands([0, width], .1);
        var x1 = d3.scale.ordinal();
        var y = d3.scale.linear()
            .range([height, 0]);
        var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
        var xAxis = d3.svg.axis()
            .scale(x0)
            .orient("bottom");
        var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left");


        var svg = d3.select("body").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 + ")");
        var data = [{ "label": "Category A", "value1":50,"value2":100},
                    { "label": "Category B", "value1": 100, "value2": 200  },
                    { "label": "Category C", "value1": 150, "value2": 300  },
                    { "label": "Category D", "value1": 200, "value2": 400  }];

        var categories = d3.keys(data[0]).filter(function (key) { return key !== "label"; });
        data.forEach(function(d) {
            d.values = categories.map(function(name) {return {name: name, value: +d[name]}; })});

        x0.domain(data.map(function (d) { return d.label; }));
        x1.domain(categories).rangeRoundBands([0, x0.rangeBand()]);
        y.domain([0, d3.max(data, function (d) { return d3.max(d.values, function (d) { return d.value; }); })]);
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis)
              .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Proposals");
            var cateogary = svg.selectAll(".label")
                .data(data)
              .enter().append("g")
                .attr("class", "g")
                .attr("transform", function (d) { return "translate(" + x0(d.label) + ",0)"; });
        cateogary.selectAll("bar")
                .data(function (d) { return d.values; })
              .enter().append("rect")
                .attr("width", x1.rangeBand())
                .attr("x", function (d) { return x1(d.label); })
                .attr("y", function (d) { return y(d.value); })
                .attr("height", function (d) { return height - y(d.value); })
                .style("fill", function (d) { return color(d.label); });
            var legend = svg.selectAll(".legend")
                .data(categories.slice().reverse())
              .enter().append("g")
                .attr("class", "legend")
                .attr("transform", function (d, i) { return "translate(0," + i * 20 + ")"; });
            legend.append("rect")
                .attr("x", width - 18)
                .attr("width", 18)
                .attr("height", 18)
                .style("fill", color);
            legend.append("text")
                .attr("x", width - 24)
                .attr("y", 9)
                .attr("dy", ".35em")
                .style("text-anchor", "end")
                .text(function (d) { return d; });
    }

The above code resulted as,

When I execute the above script I'm able to display chart but with only one column in that. Please help me in finding out, why the second column is not showing up.

Thanks in Advance, Gupta.

Answer 1

Your code was actually creating two columns, but they where stacked, please see screenshot below:

You need to update your code from:

 d.values = categories.map(function(name) {return {name: name, value: +d[name]}; })});

To:

d.values = categories.map(function(name) {return {label: name, value: +d[name]}; })});     

Please see working example: http://jsfiddle.net/yqz2646v/2/