Displaying a percentage bar using PHP

PHP is an excellent language that is very versatile and powerful. One of the recent projects I have done with PHP involved creating a percentage bar using the gd2 library. In this article I will teach you how to make this simple and effective percentage bar and how you can use it in your web pages. I have used this PHP generated percentage bar in a number of web pages but it is most useful in cases when you need to give a graphical representation of some percentage. For example, if you are running a site in which you give each user a certain amount of storage, it's nice to have a little percentage graph like this one so the user can tell by a quick glance if they are close to using up all their storage. I have also used this PHP percentage graph in voting scripts to show how many users have voted for each option.

Well, let's go ahead and get started. First of all you need to make sure you have the gd2 library installed and working in PHP. you can do this with the phpinfo() function. In the output of phpinfo() you should have a "gd" section and it should say that "GD Support" is "enabled" and that the "GD Version" is "2.0 or higher". You might be able to get this graph to work in an earlier version of the gd library but I have not tested it in such an environment.

Alright, now I am going to give you the code. I have placed this code in a file called "graph.php" on my server so I will refer to it this way throughout the rest of the article but you are welcome to call it whatever you wish.

<?php
    // returns a PNG graph from the $_GET['per'] variable
    $per = imagecreate(302,7);
    $background = imagecolorallocate($per, 0xFF, 0xFF, 0xFF);
    $foreground = imagecolorallocate($per, 0x00, 0x8A, 0x01);
    $border = imagecolorallocate($per, 0x99, 0x99, 0x99);
    if ($_GET['per'] > 0)
    {
        $grad = imagecreatefrompng("images/grad.png");
        $per2 = imagecopy($per, $grad, 1, 1, 0, 0, ($_GET['per'] * 3), 5);
        imagerectangle($per, 0, 0, 301, 6, $border);
    }
    header("Content-type: image/png");
    imagepng($per, NULL, 5);
?>

Now, in order for this to work properly you need to place this grad.png file in an images folder. The images folder should be in the same directory as the graph.php file. This image is needed to give the graph a gradient look. The graph starts out green and slowly fades to black. This is done using the grad.png file. Now, in order to use the script we just need to add an img tag to our document like the one below:

<img src="/media/examples/graph.php?per=76.82" alt="76.82% graph" />

The img tag above will now give us the following image:

I hope that this article about creating a percentage bar with PHP has been of interest to you. If you have any problems implementing this please let me know and I will be glad to help.