Creating a dynamic gauge in React using percentages

Question

I am creating a BMI calculator and I am trying to create a gage so that as that it reflects the BMI. I am using a gage using 'react-gauge-chart` and it is rendered like this

   <GaugeChart
        id="gauge-chart"
        percent={gageCalc()}
        nrOfLevels={3}
        colors={["#FFFF00", "#228B22", "#FF0000"]}
      />

This is gageCalc() and the dictionary I used:

  const gageCalc = () => {
    try {
      var c = [Math.round(calcBMI())];
      var x = dict[Math.round(calcBMI())];
      if (c < 16) return 0.0;
      if (c > 30) return 1;
      return x;
    } catch (e) {
     // does nothing right now
    }
  };

var dict = {
    16: 0.0,
    17: 0.16,
    18: 0.33,
    19: 0.4,
    20: 0.4,
    21: 0.5,
    22: 0.5,
    23: 0.5,
    24: 0.66,
    25: 0.66,
    26: 0.7,
    27: 0.825,
    28: 0.825,
    29: 0.9,
    30: 1,
  };

The dictionary sort of works but isn't the most accurate. I just kind of spread the percentages out as best I could. calcBMI() simply returns the BMI of the person. So my problem is that the gauge's needle is set using a percentage based on the value returned from gageCalc(). Other than my dictionary, I don't know how to make the needle on the BMI gauge be accurate.

For example, if someone has a BMI of 22, then they have normal BMI and the needle will be in the green area of the gauge, but if they have a BMI of 28, then I need the needle to fall in the red zone. This is what the gauge looks like:

This is the chart I am following:

Underweight (yellow) = Below 18.5
Healthy Weight (green) = 18.5 to 24.9
Overweight (red) = 30 or greater

Is there a formula that might do this for me? Is there a better gauge I can use or is my dictionary the best way to do this. Thanks!

Answer 1

Okay some of your information is contradictory so I have made some assumptions and tried to use my common sense to resolve discrepancies, I have made the following assumptions

• 16 bmi translates to 0% on the chart
• 30 bmi translates to 100% on the chart

I have taken the thresholds

• 16-18.5 = underweight (yellow)
• 18.5-25 = Healthy (green)
• 25-30 = Overweight (red) - I extended this boundary since there was a gap on the info you gave

We must treat each of these ranges like its own 33% of the chart, and so we are trying to calculate a specific value that lies between the ranges 0-33, 33-66 and 66 - 100.

This means that your visual representation will be distorting the data somewhat, however from the other requirements it seems this is required.

What I have is a basic formula I have come up with for each segment

if (bmi >= lowerBoundary && < upper boundary)

return (bmi - lowerBoundary) / (upper boundary - lower boundary) / a third to get 33% based answer then add a modifier depending on which segment your in (either 0, 0.33 or 0.66)

This gave me the following if block

 const gageCalc = bmi => {
    var result = 0;
    if (bmi >= 16 && bmi <= 18.5) {
      result = getPercentage(bmi, 16, 18.5, 0);
    } else if (bmi > 18.5 && bmi < 25) {
      result = getPercentage(bmi, 18.5, 25, 0.33);
    } else if (bmi >= 25 && bmi <= 30) {
      result = getPercentage(bmi, 25, 30, 0.66);
    }
    return result;
  };

  function getPercentage(bmi, lowerBound, upperBound, segmentAdjustment) {
    return (
      (bmi - lowerBound) / (upperBound - lowerBound) / 3 + segmentAdjustment
    );
  }

I have a demo of this code with your react-chart-guage ready to play with here

Answer 2

One option is the following:

Underweight (yellow) = Below 18.5 --> 0-33%
Healthy Weight (green) = 18.5 to 24.9 --> 34-67%
Overweight (red) = 25 or greater --> 67 - 100%

If you evenly plot the BMIs, you can say a 0% is 12.1 and a 100% is 31.3 (I took the difference in the green zone and added/subtracted to the yellow/red.)

Then your math is

if(BMI>31.3){
    x=100%
} else if (BMI<12.1){
    x=0%
} else {
    x= ((BMI -12.1)/19.2) * 100%
}

19.2 is the difference between max/min above.