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()?

Mike
  • 809
  • 1
  • 10
  • 23
  • Well how would you do that with pencil and paper? – Pointy Oct 04 '16 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 04 '16 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 04 '16 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 04 '16 at 17:22
  • Got it, thanks. Still learning SO. – Mike Oct 04 '16 at 17:22
  • @Mike my comment was a suggestion to pursue an approach like that described in the accepted answer. It wasn't "pointless". The issue is not specific to JavaScript or programming in any way; if you're presenting percentages as integers but require that they add to 100% in any similar situation, you have to "cheat" a little by giving or taking a percentage point to/from one or more constituent values. – Pointy Oct 04 '16 at 17:50
  • 1
    @pointy - I appreciate your feedback. – Mike Oct 04 '16 at 17:58

1 Answers1

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.

Jared Gillespie
  • 96
  • 5
  • 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 04 '16 at 17:33