Accepted answer

Finally I created Grouped Bar Chart using JSON data. I have written web services which will send JSON data to D3.

My JSON is same as above I posted in Question

Only the change I have done in D3 is ..

d3.json("rooturi/rest/ordernumbertracks", function(error, data) {
  var ageNames = d3.keys(data.ordernumbertrack[0]).filter(function(key) { return key !== "state";

data.ordernumbertrack.forEach(function(d) {
  d.ages = { return {name: name, value: +d[name]}; });

x0.domain( { return d.state; }));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y.domain([0, d3.max(data.ordernumbertrack, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")

  .attr("class", "y axis")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")

var state = svg.selectAll(".state")
  .attr("class", "g")
  .attr("transform", function(d) { return "translate(" + x0(d.state) + ",0)"; });

I can't expect It is as simple as that :)

Related Query

More Query from same tag