d3pie icon indicating copy to clipboard operation
d3pie copied to clipboard

Showing percentages are wrong

Open pramilkprince opened this issue 10 years ago • 4 comments

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%

d3pie

pramilkprince avatar Feb 05 '15 07:02 pramilkprince

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!

iron-viper avatar Feb 05 '15 10:02 iron-viper

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.

benkeen avatar Feb 09 '15 17:02 benkeen

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

pramilkprince avatar Feb 10 '15 05:02 pramilkprince

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)}

iron-viper avatar Feb 10 '15 11:02 iron-viper