Showing percentages are wrong

[pramilkprince]

The segment percentages showing on d3pie chart is wrong ,because the sum of percentage is not 100%. The configuration object developed by d3pie generator is given below.
var pie = new d3pie("pieChart", {
"header": {
"title": {
"fontSize": 34,
"font": "courier"
},
"subtitle": {
"color": "#999999",
"fontSize": 10,
"font": "courier"
},
"location": "pie-center",
"titleSubtitlePadding": 10
},
"footer": {
"color": "#999999",
"fontSize": 10,
"font": "open sans",
"location": "bottom-left"
},
"size": {
"canvasWidth": 642,
"pieInnerRadius": "52%",
"pieOuterRadius": "70%"
},
"data": {
"sortOrder": "label-desc",
"content": [
{
"label": "green",
"value": 3,
"color": "#2fc339"
},
{
"label": "Donald Rumsfeld",
"value": 4,
"color": "#eb2da5"
},
{
"label": "The Zombie Apocalypse",
"value": 4,
"color": "#cb2121"
},
{
"label": "Planes with/out snakes",
"value": 5,
"color": "#ae83d5"
}
]
},
"labels": {
"outer": {
"format": "label-percentage1",
"pieDistance": 3
},
"mainLabel": {
"fontSize": 11
},
"percentage": {
"color": "#100d0d",
"fontSize": 11,
"decimalPlaces": 0
},
"value": {
"color": "#cc8143",
"fontSize": 11
},
"lines": {
"enabled": true
}
},
"tooltips": {
"enabled": true,
"type": "placeholder",
"string": "{label}: {value}, {percentage}%",
"styles": {
"fadeInSpeed": 121
}
},
"effects": {
"pullOutSegmentOnClick": {
"effect": "linear",
"speed": 400,
"size": 8
}
},
"misc": {
"colors": {
"segmentStroke": "#000000"
}
}
});
The following figure shows the total percentage is 99%

[iron-viper]

Today I ran into the same problem. I decided it follows,
The file d3pie.js I made a change in the method of getPercentage.
There Were:
getPercentage: function(pie, index) {
return Math.floor((pie.options.data.content[index].value / pie.totalSize) * 100);
}
/*****************************************************************************************/
was:
getPercentage: function(pie, index) {
return Math.round((pie.options.data.content[index].value / pie.totalSize) * 100);
}

I replaced the floor method to method round. And everything started working fine!

[benkeen]

Hey! Yes, it may not always add up to 100% due to rounding issues. @patil-nileshb committed a fix which will ensure the options.labels.percentage.decimalPlaces setting will be honoured in the outer labels (which I'll get into the next release soon), but the problem you noted will still occur. @iron-viper's fix has also been added (.round(), not .floor()) so that'll help.

Once the next release is available you'll be able to use the options.labels.percentage.decimalPlaces setting to ensure the values add up better.

[pramilkprince]

Hi, iron-viper, what change I have to implement in d3pie.min.js to solve problem

[iron-viper]

Hi, pramilkprince.
Search:
getPercentage:function(a,b){return Math.floor(a.options.data.content[b].value/a.totalSize*100)}

Replace:
getPercentage:function(a,b){return Math.round(a.options.data.content[b].value/a.totalSize*100)}