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

Sorry for off topic but have you tried C3.js ? Its a D3 based chart. Take a lot (http://c3js.org/samples/chart_donut.html) — aleksandar, Jul 01 '15 at 17:16
No i didn't heard about C3.Js...?can u plz help me in d3 ..actually i know i am doing very small mistake .. — sam140, Jul 01 '15 at 17:21

score 2 · Accepted Answer · answered Jul 01 '15 at 17:28

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>

Hi Mark..Thanks a lot mark for your suitable help i really appreciate for that ..:) — sam140, Jul 01 '15 at 17:32

donut chart using json array

1 Answers1