1

I'm creating a donut chart that has 3 sections:

enter image description here

When the user hovers over each one of the colored sections it displays a percentage of 100%. Currently each section are as follows; green is 78%, yellow is 13%, and red is 8%. If you add all those together is does NOT equal 100%, it equals 99%

Each section has values which are whole numbers, coming from the end-point, and I'm trying to convert everything to percentages.

For this chart I have three values:

var values = [1397, 234, 149];

Those values need to equal 100% when added:

var sum = values.reduce((a, b) => a + b, 0); // this works great

To determine the percentage for each section I use:

var value = 0;

values.forEach(function(number) {
    console.log(number + ' = ' + (number / sum) * 100);
    result += (number / sum) * 100;
});

Which produces the following:

1397 = 78.48314606741573
234 = 13.146067415730336
149 = 8.370786516853933
result = 100

Now this is where I think the problem lies. I cannot display the floating point value because, well, it's not a percentage value. I decided to use Math.round() to create whole numbers which I'm thinking is not the proper way.

How can I convert each one of the floating values to create percentages that equal to 100%? Is there an alternative to Math.round()?

7
  • Well how would you do that with pencil and paper?
    – Pointy
    Oct 4, 2016 at 16:58
  • Pencil and paper? Really? Just to clarify, I DID try working this for quite some time before coming here. No need for pointless comments.
    – Mike
    Oct 4, 2016 at 17:03
  • Why is this marked as exact duplicate? Please provide a link to the question that is exact, I would be glad to follow it.
    – Mike
    Oct 4, 2016 at 17:04
  • 1
    @Bergi has marked it as a duplicate of the question which is linked to just below the title.
    – Tom Fenech
    Oct 4, 2016 at 17:22
  • 1
    @pointy - I appreciate your feedback.
    – Mike
    Oct 4, 2016 at 17:58

1 Answer 1

5

The issue is that you are rounding. Given that each number has a fraction that results in each being floored, you are losing said fractions in the end result. If you sum each of the fractions, you get 1. Which is what you're missing. This is generally how these types of charts are displayed.

However, if you are concerned about the totals not equaling 100% you may have to do some "fudging" of the results. One way to do this would be to look at each fraction and increase the number with the largest fraction by 1 to account for this. You could also just increase the largest whole number by 1 as well, but may not be as accurate as the former. This would give you a result of 79%, 13%, and 8%, which equals 100.

1
  • Thanks for explaining it it out. Me being new to JS, I thought maybe there was a function that might have taken care of this. I'll talk to the client and discuss the fudge idea.
    – Mike
    Oct 4, 2016 at 17:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.