donut chart using json array

Question

I am learning d3 and trying to make use d3 library in my application for showing some visualization chart .i am getting data through web api in the form of json here.

My script:

var data=  "rows":[
    {
        "STATUS" : "Active",
        "count" : "246"  
    },
    {
        "STATUS" : "Not Proceeded With",
        "count" : "40" 
    }
]

var width = 800,
    height = 250,
    radius = Math.min(width, height) / 2;

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

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
    return d.count;
});

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var g = svg.selectAll(".arc")
    .data(pie(data.rows))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        return color(d.data.rows.STATUS);
    });

g.append("text")
    .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {
        return d.data.rows.STATUS;
    });

Now i want to use that data set for creating the donut chart.i have tried but not getting success.can any one plz suggest me any idea how i can do

Answer 1

Couple problems:

1.) Your JSON isn't valid:

var data = { //<- missing bracket
  "rows": [
    {
      "STATUS": "Active",
      "count": "246"
    }, {
      "STATUS": "Not Proceeded With",

      "count": "40"
    }
  ]
} //<- missing bracket

2.) You are not accessing the STATUS attribute correctly for your fill and text label:

return color(d.data.STATUS); //<-- don't need "rows", you only passed in data.rows

Here is is working nicely:

var data= { "rows":[

  {
   "STATUS" : "Active",
"count" : "246"  
  }
 ,   
  {
   "STATUS" : "Not Proceeded With",

"count" : "40" 
  }

   ]};

var width = 800,
    height = 250,
    radius = Math.min(width, height) / 2;

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

var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(radius - 70);

var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
    return d.count;
});



var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var g = svg.selectAll(".arc")
        .data(pie(data.rows))
        .enter().append("g")
        .attr("class", "arc");

    g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
        return color(d.data.STATUS);
    });

    g.append("text")
        .attr("transform", function (d) {
        return "translate(" + arc.centroid(d) + ")";
    })
        .attr("dy", ".35em")
        .style("text-anchor", "middle")
        .text(function (d) {
        return d.data.STATUS;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>