balancing a scale

Question

Hey guys i have a formula the percentage of cals_in vs cals_out (out of 200%)

i created a scale to show the difference in the values in terms of percentage. The problem is I wanna convert the difference in terms of pixels height to move the scale up or down

function setScalesToValue(fValue) {

   document.getElementById("cals_in").style.bottom = (183 + fValue) + "px";
   document.getElementById("cals_out").style.bottom = (183 -  fValue) + "px";

}

The initial scale position is 183, then the diff is then added or subtracted to show the projections on the scale. It's not working too well and I'm seeking anyone's help to use the return percentage to move the scale

NB: the fValue cannot be more than 20px.

Any guidance will b appreciated.

Answer 1

Warning: I'm very tired, this is very untested, and I rarely mess with javascript - so I hope this makes sense.

The point is to decide the maximum difference that will push the scale all the way. When you get the real difference, you see what percent of the maximum you have. Then you just get that percent of 20 pixels. Of course, anything over 100% you just correct to 100% so you don't go over 20 pixels. (I hope this code works)

var difference;
var max_expected_difference;
var diff_percent;
var fValue;

diff_percent = difference/max_expected_difference;
diff_percent = Math.round(diff_percent*100)/100;

if (diff_percent>1) diff_percent = 1;
if (diff_percent

In case this isn't clear, you will add to the 183px in either case. fValue should be negative if the difference is negative.

Edit: It looks like I misunderstood how you are implementing this, but the basic idea will still work fine for you. Honestly, if you maximum calorie change is 200% then a shortcut to your your fValue is devide your %difference by 10 and round off the decimal. So 148% would be 15px, 81% would be 8px, etc...