Simple Horizontal Bar Graph using php

Posted on

Simple Horizontal Bar Graph using php – Here in this article, we will share some of the most common and frequently asked about PHP problem in programming with detailed answers and code samples. There’s nothing quite so frustrating as being faced with PHP errors and being unable to figure out what is preventing your website from functioning as it should like php and graph . If you have an existing PHP-based website or application that is experiencing performance issues, let’s get thinking about Simple Horizontal Bar Graph using php.

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

As you can see below:

alt text

alt text

I wanted to know whether there is any similar graph library through which i can generate the same graph in php.



Solution :

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.



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


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

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: {
    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: {
    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.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *