Javascript bmi calculator pointer position

Question

I'm building a BMI (Body Mass Index) Calculator and everything works fine but now I want to add an image with a pointer on it indicating the result of BMI.

My problem is that I don't know what formula to use in order to calculate where the pointer will fall and to position the pointer correctly on image.

So if the result is 21.5 I want the pointer to be somewhere where the 21.5 will be on the image.

Please see the image attached to see exactly what I want to achieve

thank you

Answer 1

Seeing how I myself am very new to javascript and I'm not really sure how you image is constructed (if it's all a big box or several lesser boxes), I'll just give you my point of view.

Assuming you have four seperate boxes and we take the green one as an example. If the box range is from 20 to 25 BMI then I would approach it as followed

MaxBMI - MinBMI = Range (in the case 20 and 25, Range is 5)

then take your current BMI (in this case 21.5)

CurBMI - MinBMI = DistanceFromMin (in this case Distance is 1.5)

Then simply take (lengthOfBox / Range) * DistanceFromMin and you know the position of the arrow.

If this didn't answer your question at all I hope you can specify the problem a bit better. (This was really my first answer ever on StackOverflow :P)

Answer 2

How about using percentages?

lets say your image is 200px, have a bmi of 20 at left/margin-left:20% of your 200px image?

If you can provide more details on you iomplementation with a link of some code I can be more clear with the answer