Simple Horizontal Bar Graph using php

Question

I have seen a facebook application in which clicking on a radio button renders a graph.

As you can see below:

I wanted to know whether t

Answer 1

PChart looks promising.

This blog entry details 6 candidates and their pros/cons. Most of them have quite stylised rendering. A quick look suggests that ezComponent's bar chart is quite straightforward (in terms of presentation) and perhaps what you're looking for.

I think the unusual aspect of your request is the horizontal orientation of the bar chart, but given that most of the above libraries look powerful, that shouldn't be a headache.

Answer 2

You can do it with just CSS by setting the background-position of an background image of a span.

Let's say that the maximum width of the bar is 200 pixels. The HTML and CSS for this bar might look something like this:

<label>49%</label><span class="bar">Sweaters with leggings</span>

And CSS:

span.bar {
    background: url(bar_bg.png) 0 0 repeat-y;
    display: block;
    width: 200px;
    line-height: 20px;
}

Notice the background image? For that, you need a 400px * 1px sized image, where the leftmost 200 pixels is colored with the color you want the bars to be, the rest being white or transparent. If you set this background to the span with background position of 0 0, the bar will be 100% colored, and if you put background position of -200px 0, the bar will be blank. So, you'll just have to determine where to set your background position among these extremes for each of your values.

First you have to find the maximum of the values you want to represent. The maximum value has an background position of 0 0, whereas value of 0 has background position of -200px 0.

The PHP code to calculate and apply the background position goes like this:

$values = array(
            49 => 'Sweaters with leggings',
            37 => 'Scarves with everything',
            14 => 'Cute knit hats and gloves');

// Find the maximum percentage
$max = max(array_keys($values));

foreach($values as $percentage => $label) {
    // Calculate the position, maximum value gets position 0, smaller values approach 200
    $pos = 200 - ($percentage / $max) * 200;
    // Output the label that shows the percentage
    echo '<label>'.$percentage.'%</label>';
    // Output the span, apply style rule for the background position
    echo '<span class="bar" style="background-position: -'.$pos.'px 0;">'.$label.'</span>';
}

If you want to use different coloured bar for the highest value as in your example, you can just do another background image and apply a class to the span with the highest value:

echo '<span class="bar '.($value == $max ? 'bar_max' : '').'" style="background-position: -'.$pos.'px 0;">'.$value.'</span>';

And in CSS:

span.bar.bar_max {
    background: url(bar_max_bg.png) 0 0 repeat-y;
}

And that's it, no need for extra DIV's or external libraries, just two simple background images. If you're handy, you can even combine the two images into one. Please let me know if this is helpful, and also if I didn't explain something clear enough.

Answer 3

actually, generating this kind of graph is pretty easy - just use two DIVs - one is a 100% width bar, another DIV is in that first DIV making background colored % you require. you can even include text in that. easy, just plain HTML/CSS.

UPDATE:

HTML:

<div class="bar">
    <div class="percentage" style="width:66%">This is 66% wide div</div>
</div>

CSS:

.bar { width: 99%; border: 1px solid #000; }
.percentage { background: #000; }