score:2

Accepted answer

Json Data

[{"name":"jhon","hours":"8","months":"June","emp_id":"1"},
 {"name":"jack","hours":"6","months":"June","emp_id":"2"},
 {"name":"jim","hours":"7","months":"June","emp_id":"3"},
 {"name":"tim","hours":"4","months":"June","emp_id":"4"},
 {"name":"jhon","hours":"6","months":"July","emp_id":"1"},
 {"name":"jack","hours":"7","months":"July","emp_id":"2"},
 {"name":"jim","hours":"8","months":"July","emp_id":"3"},
 {"name":"tim","hours":"6","months":"July","emp_id":"4"},
 {"name":"jhon","hours":"8","months":"August","emp_id":"1"},
 {"name":"jack","hours":"9","months":"August","emp_id":"2"},
 {"name":"jim","hours":"7","months":"August","emp_id":"3"},
 {"name":"tim","hours":"8","months":"August","emp_id":"4"}]

And The Answer ---------------------------------------------------------

Grouped Bar Graph Image https://i.stack.imgur.com/1ud5S.png

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
  stroke:black
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<svg width="600" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

    var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

                var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
                    y = d3.scaleLinear().rangeRound([height, 0]);



    var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

    d3.json("http://localhost:8888/index.php?r=emp/gethours", function(d) {


                    var ymaxdomain=d3.max(d,function(d){return d.hours;});
                        x.domain(d.map(function(d) {return d.months}));
                        y.domain([0,ymaxdomain]);

                    var x1=d3.scaleBand().rangeRound([0, x.bandwidth()]);
                        x1.domain(d.map(function(d) {return d.emp_id;}));

                         g.selectAll(".bar")
                        .data(d)
                        .enter().append("rect")
                        .attr("x", function(d,i) {return (x(d.months)+x1(d.emp_id)); })

                        .attr("y", function(d) {return y(d.hours); })
                        .attr("width",x1.bandwidth())
                        .attr("height", function(d) { return height - y(d.hours); })
                        .attr("fill", function(d,i) { return z(d.emp_id); });

                            g.append("g")
                            .attr("class", "axis")
                            .attr("transform", "translate(0," + height + ")")
                            .call(d3.axisBottom(x));

                                g.append("g")
                                .attr("class", "axis")
                                .call(d3.axisLeft(y))
                                .append("text")
                                .attr("x", 2)
                                .attr("y", y(y.ticks().pop()) + 0.5)
                                .attr("dy", "0.32em")
                                .attr("fill", "#000")
                                .attr("font-weight", "bold")
                                .attr("text-anchor", "start")
                                .text("Hours");

});

</script>

score:0

like in https://bl.ocks.org/mbostock/3887051 you need a second x axis to move your rect for each "group". look at var x1; its domain is .rangeRound([0, x0.bandwidth()]);.

in your code you can the do

   var  d = [
        {"name":"jhon","hours":"9","months":"August","group":0},
        {"name":"jack","hours":"8","months":"August","group":1},
        {"name":"jhon","hours":"7","months":"July","group":0},
        {"name":"jack","hours":"6","months":"July","group":1},
        {"name":"jhon","hours":"4","months":"June","group":0},
        {"name":"jack","hours":"5","months":"June","group":1}
    ]

x1.domain([0,1]) 
...
.attr("x", function(d) { return x(d.months)+x1(d.group) })

score:0

oh i found your problem change

var ydomain=d3.extent(d,function(d){return d.hours;});

to

var ymaxdomain=d3.max(d,function(d){return d.hours;});
    y.domain([0,ymaxdomain]);

your minimum value on the y axis was 4 instead of 0

Edit : also you have to do move the definition of the range of x1 AFTER defining the x domain :

    x.domain(d.map(function(d,i) {return d.months}));
// this should go after
     var x1=d3.scaleBand().rangeRound([0, x.bandwidth()]);

Related Query

More Query from same tag