PHP grow percentage bar

Question

I'm not sure how to put this into words, but I'll try my best. So I have a number. $number = 201 for example. This number rounds upto the next hundred. So 300, for example. I want to show my progress bar to show 201/300. Or if $number = 23 I want the progress bar to show 23 out of 100. Or $number = 506, shows 506/600.

So right now, I understand that the bootstrap progress bar runs by percentage. So 100%. So everything is fine, until $number passes over 100. Because it can't work where $number = 100 out of 200, because 100 would show up as 100%.

I'm pretty sure what I need, is a simple bit of maths, but right now, i can't think of how to do this.

<div class="progress" style="margin-bottom:0px">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: <?php echo $number; ?>%;">
    <?php echo $number; ?>
  </div>
</div>

Thank you

Edit: This is not a duplicate of how to round up to the nearest 10. This has already been done. using ceil($number / 100) * 100; This question is about how to make the percentage bar show something like 450 out of 500

450/500*100 will give u the same in out of 100. Is there an issue with that? — nithinTa, Oct 11 '17 at 13:27
Have you tried setting the aria-valuemax property to your maximum value ? — Bilal Akbar, Oct 11 '17 at 13:29
@tan in this scenario, I want 400 to be showing as 0, 450 to be showing as 50% and 500 showing at 100% — Jack Jacke, Oct 11 '17 at 13:29
`aria-valuemax` is only used for accessibility, it does not affect the appearance of the progress bar. — Terry, Oct 11 '17 at 13:31

Terry · Accepted Answer · 2017-10-11T13:36:19.353

It's actually quite simple: you want to round the value to the nearest 100, and this can be done by using ceil($number / 100) * 100. After you've gotten the "max" level, you can then calculate the ratio:

<?php
  // Get the next closest 100
  $nextHundred = ceil($number / 100) * 100;

  // Calculate ratio against nextHundred
  $ratio = $number / $nextHundred * 100;
?>

With this logic, you will get:

23% for 23, because it is evaluated using 23÷100
90% for 450, because it is evaluated using 450÷500

However, if you want to 450 to give you 50% (because you want to evaluate it as (450-400)÷(500-400)), you are basically asking for the modulus of 100:

// Calculate modulus
$ratio = $number % 100;

In either case, you can use $ratio in place of $number in your logic. Remember that you should also be updating the aria-valuenow for accessibility reasons. To display the ratio in your progress bar, instead of using $ratio you simply echo $number.'/'.$nextHundred.

<div class="progress" style="margin-bottom:0px">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="<?php echo $ratio; ?>" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: <?php echo $ratio; ?>%;">
    <?php echo $number.'/'.$nextHundred; ?>
  </div>
</div>

Thank you, your second example worked great. With $nextHundred, at 500 it shows 500. Can somehow I be able to make it show 600? Like 501 will show 600, is there anyway I can get 500 too as well? — Jack Jacke, Oct 11 '17 at 13:41

score 0 · Answer 2 · answered Oct 11 '17 at 13:56

This is actually even simpler using basic maths. The int/float value received divided by the int/float percentage max value, then times that all by 100.

E.g. 50 of 200 and 35 of 400

 50/200 * 100 = 25. (25%)
 35/400 * 100 = 8.75 (8.75%)

So just use:

$percentage = (($number / $max) * 100)

Then if you want to display this via string, to just use $number and $max for your "x out of y" percentage bar.

PHP grow percentage bar

2 Answers2