Question

i’m creating a very simple dynamic bar-chart ( CSS / PHP ) where basically what i need to display is the total number of user contacts where each bar-width is the number of the contacts in px (each contact = 1 pixel) very trivial no?

 _______.____________________600px
|       |                        |
| mario | ===== (54) px          |
| julie | ========= (65) px      |
| john  | === (40) px            |
| mary  | ============= (70) px  |
|_______|________________________|
        0%   30%   50%   80%   100%

now, my problem is that the graph-container should be of fixed width let’s say 600px, so, what happen if one of theese have more than 600 contacts? yes i know, it screw up. 😉

so, how to convert to percentage in a way that each total scale accordingly and never reach the end of the graph?

thank’s in advance.

Answer 1

Sum all of your values (54 + 65 + 40 +70 = 229), calculate the percentage of each value (54/229 = 23.58%), and then apply that percentage to 600px (600 * .2358 = 141.48). You can then set that value as the width of your bar (so the first bar would be 141px).

In code it might look something like this (although you would probably calculate these values in a loop):

$total = 229;
$bar1 = 54;
$bar1Length = round(600 * ($bar1/$total)); // 141