Question

I have one page that displays a bar graph, and the values can vary from a tiny range (0 to 30) to a large range (0 to 10000).

My problem is displaying it in a div that has a maximum height, in my case the bars can’t be more than 90px.

One example:

Knowing that the maximum height is 90px, what I thought of doing is to check which is the highest bar (meaning this one is the 100%), and then the others are percentages of that one. This way I can control the height (the biggest will have 90px) of each and remain within the limis of the height.

My code so far: (the values in this code are not related to the image above)

$limitedHeight = 90;

$bar1 = 300;
$bar2 = 700;
$bar3 = 150;

$biggestBar = max(array($bar1, $bar2, $bar3));

//knowing this, I will force each bar to the limited height:
//first, for each, get the percentage:
$bar1Percent = intval(($bar1 * 100) / $biggestBar);
$bar2Percent = intval(($bar2 * 100) / $biggestBar);
$bar3Percent = intval(($bar3 * 100) / $biggestBar);

//then, force the new heights:
$bar1Height = intval(($bar1Percent * $limitedHeight) / 100);
$bar2Height = intval(($bar2Percent * $limitedHeight) / 100);
$bar3Height = intval(($bar3Percent * $limitedHeight) / 100);

//place the height into the bars:
echo '<div class="bar1" style="height: ' . $bar1Height . 'px"></div>
<div class="bar2" style="height: ' . $bar2Height . 'px"></div>
<div class="bar3" style="height: ' . $bar3Height . 'px"></div>';

My question:

Is this the right approach?
Or does anyone have a better solution?

(This solution could have one problem: if bar “A” is just “10”, and bar “B” is “1000”, the calculated (limited) height will have a huge difference, but I suppose it is what it is, the proportion is respected).

Answer 1

You can calculate a single scale factor that you apply to all bars:

$scale = $limitedHeight / $biggestBar;

$bar1Height = intval($bar1 * $scale);
$bar2Height = intval($bar2 * $scale);
$bar3Height = intval($bar3 * $scale);

That will just simplify your calculations a little, but the overall approach seems sound. And the problem with the huge height difference is inevitable when you’re using a linear scale.