Simple graph bar using gd. calculating difference in percentage

Views: 38 Last modified: August 03rd, 2011 Comments: 1

This script will calculate the difference in percentage between 2 numbers (difference between: X and Y but it must be like X < Y). According to the result, it will create a image (customizable graph bar) showing the difference in percentage. The image contains a string as well, which is the result of the calculation in percentage.

Customizable settings

  • IMG Width
  • IMG Height
  • IMG background color
  • IMG match color
  • IMG font color
  • IMG font size

How it works

Just save the first piece of code in a separate php file. For example: bar.php.
After that, on the particular page (Can’t be bar.php), where you want to add one of those bars, you use the XHTML/HTML img element to show the bar.

If you want to change the calculation, for instance, you would like to know the match rate between 2 numbers, you can change this line:

# Calculate percentage
$per = ($_GET['c1'] < $_GET['c2']) ? (($_GET['c1'] / $_GET['c2']) *100) : (($_GET['c2'] / $_GET['c1']) *100);

bar.php

<?php
/**
 * percentage bar
 * File: bar.php
 * @author Laurens ten Ham
 * @version 0.5.3
 */
# Header Content Type
header("Content-type: image/png");

// Bar Settings
$args = array(
            # Image settings
            'width' =>  $_GET['width'],
            'height' => $_GET['height'],
            # Background color
            'bg_rgb' => GetRGB($_GET['bgcolor']),
            # Color for difference
            'match_rgb' => GetRGB($_GET['diffcolor']),
            # Font color
            'ft_rgb' => GetRGB($_GET['fontcolor']),
			# 1, 2, 3, 4, 5
            'fontsize' => $_GET['fontsize']
            );

# Calculate percentage
$per = ($_GET['c1'] < $_GET['c2']) ? (100 - (($_GET['c1'] / $_GET['c2']) *100)) : (100 - (($_GET['c2'] / $_GET['c1']) *100));

/**
 * GetRGB()
 * Convert hex color to RGB equivalent
 * @param string $hex
 * @return array $rgb_N
 */
function GetRGB($hex)
{
    # Create array elements from 2
    $rgb = str_split($hex, 2);

    # New array
    $rgb_N = array();

    # Foreach of the elements, convert to decimal
    foreach ($rgb as $p)
        $rgb_N[] = hexdec($p); #Hexadecimal to decimal

    //berekend alles
    return $rgb_N;
}

# Text in image
$Text = sprintf('%.1f', $per);

# Create the image identifier
$bar = imagecreate($args['width'], $args['height']);
  # BackGround color
  $BackGround = imagecolorallocate($bar, $args['bg_rgb'][0], $args['bg_rgb'][1], $args['bg_rgb'][2]);
    # Font color
    $FontColor = imagecolorallocate($bar, $args['ft_rgb'][0], $args['ft_rgb'][1], $args['ft_rgb'][2]);
      # Filled area color
      $FontColor2 = imagecolorallocate($bar, $args['match_rgb'][0], $args['match_rgb'][1], $args['match_rgb'][2]);
    # Filled area
    imagefilledrectangle($bar, 0,0, (($args['width']/100) * $Text), $args['height'], $FontColor2);
  # The string in the image
  imagestring($bar, $args['fontsize'], (($args['width'] / 2) - strlen($Text)), (($args['height'] + $args['fontsize']) / 2 - ($args['fontsize'] * 2)), $Text.'%', $FontColor);
 # Output image
 imagepng($bar);
# Free memory and destroy image
imagedestroy($bar);
?>

Include the img on another page

<?php
// Example 1
echo '<img src="bar.php?width=250&height=40&bgcolor=000000&diffcolor=24ff14&fontcolor=ff0000&fontsize=3&c1=481&c2=358" alt="">';

// Example 2 Settings
$w = 250;
$h = 40;
$bg_c = '000000';
$diff_c = '24ff14';
$font_c = 'ff0000';
$font_s = 3;
$c1 = 358;
$c2 = 481;

// Example 2
echo '<img src="bar.php?width='.$w.'&height='.$h.'&bgcolor='.$bg_c.'&diffcolor='.$diff_c.'&fontcolor='.$font_c.'&fontsize='.$font_s.'&c1='.$c1.'&c2='.$c2.'" alt="" />';

?>

Off course you can create this URL dynamically!

For example, we calculated the difference between 481 and 358, as you can see in the example above here.
It returns this image.

VN:F [1.9.13_1145]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.13_1145]
Rating: 0 (from 0 votes)
    Bluehost

    Mail this!

    To: From:Sum {1+4} =  
    1. This becomes handy for my stats page!

      Thanks!
    Anything to add ?

        You must be logged in to post a comment.