How to get percentage of the pie chart

Kim2013

unread,

Dec 10, 2013, 8:21:35 PM12/10/13

to d3...@googlegroups.com

Hi All,
Below is my function to load_piechart

and the I want to display the % of each pie as the code high lighted in red but don't know how to get the % of my pie data.
Your help is greatly appreciated.
Thanks,
Kim

function load_piechart(tile, div, params) {
var Item = Backbone.Model.extend({});
// data = Backbone.Collection.extend({
// model: Item,
   // url: "orchestrator-ws/tenants/att/iap/iapOsType?callback="
//});
data = [{"os":"Symbian", "value":20},
{"os":"Android", "value":40},
{"os":"Window", "value":30},
{"os":"Blackberry", "value":5}]

tile.slides.removeAll();
    console.log("This is load_iaps_osversion "   + params.tenantId);
    var margin = 5,
        w = div.width(),
     h = div.height(),
    r = Math.min(w, h) / 2 - margin,
    color = d3.scale.category20c(); //builtin range of color

var html = "";
    html += $("<div />").append(
                $("<div />").attr("id", "svg_iap_pie")
            ).html();
    tile.slides.push(html);
    tile.counter(data.length);



    var vis = d3.select("#svg_iap_pie")
    .append("svg:svg") //create the SVG element inside the <body>
.data([data]) //associate our data with the document
.attr("width", w) //set the width and height of our visualization (these will be attributes of the <svg> tag
.attr("height", h)
.append("svg:g") //make a group to hold our pie chart
.attr("transform", "translate(" + r + "," + r + ")")

var arc = d3.svg.arc()
.outerRadius(r);

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

var arcs = vis.selectAll("g.slice")
.data(pie)
.enter()
.append("svg:g")
.attr("class", "slice");

arcs.append("svg:path")
.attr("fill", function(d, i) { return color(i); } )
.attr("d", arc);

arcs.append("svg:text") //add a label to each slice
.attr("transform", function(d) {

d.innerRadius = 0;
d.outerRadius = r;
return "translate(" + arc.centroid(d) + ")"; //this gives us a pair of coordinates like [50, 50]
})
.attr("text-anchor", "middle") //center the text on it's origin
.text(function(d, i) { return (data[i].os +"(" + " % " + ")" ) ; }); //get the label from our original data array
    console.log("This is load_iaps_osversion END "   );
}

Amelia Bellamy-Royds

unread,

Dec 11, 2013, 2:54:17 PM12/11/13

to d3...@googlegroups.com

To get the percent you just need two values: the total (sum) for all groups, and the value for the individual element. Then it's just a matter of number formatting.

Since your data is static, you can calculate a sum as a separate variable anytime after defining the data.

var total= d3.sum(data, function(d){return d.value;});

Then your text label function would be something like this:

.text(function(d, i) {

return (data[i].os + "( " + d3.round(100* d.value / total, 1) + "% " + ")" ) ;

});

Or create a D3 formatting function and use it to format the percent:

var toPercent = d3.format("0.1%");

and then the text function would be

.text(function(d, i) { return (data[i].os + "( " + toPercent(d.value / total)+ " )" ) ; });

One last thing: currently your text labels get cropped off if they are wider than the pie segment to which they relate and a later pie segment overlaps. You'll need to either re-arrange your code so all the text elements come after all the path elements (annoying) or use transparent colours on your pie sections (easier, but may not look great). Unfortunately, you can't just use a CSS z-index on SVG elements to make the text float to the top -- everything gets drawn in the order they appear in the DOM. The "annoying" version involves adding the labels individually after drawing all the slices, which means repeating the datajoin, and losing the logical grouping of the paths and matching labels.

--ABR

Kim2013

unread,

Dec 11, 2013, 4:19:16 PM12/11/13

to d3...@googlegroups.com

Sorry I didn't work .
We need to convert the d3.round to string

Kim2013

unread,

Dec 11, 2013, 5:44:08 PM12/11/13

to d3...@googlegroups.com

On Tuesday, December 10, 2013 5:21:35 PM UTC-8, Kim2013 wrote:

Reply all

Reply to author

Forward

Message has been deleted