Creating transparent images on the fly with php is actually rather easy. At first it may look difficult but if you have ever created an image on the fly with php you will see that it's not much different.

The best way for me to learn anything new is with an example. Let's start with an array of values that we want to put in a line graph. The array keys will be our X-axis and their corresponding values will be our Y-axis.

$my_values = array (

	1 => 10,	2 => 20,	3 => 25,	4 => 50,
	5 => 0,	6 => 35,	7 => 10,	8 => 85,
	9 => 100,	10 => 90

);

For the sake of simplicity, we will assume that the values (Y-axis) are percentages and we want to create a graph that is 120px x 120px.

Here's the code to create the image:

<?php
// our array of values
$my_values = array(
  1 => 10,  2 => 20,  3 => 25, 4 => 50,
  5 => 0,   6 => 35,  7 => 10, 8 => 85,
  9 => 100, 10 => 90
);

// create the 120px x 120px image
$image = imagecreate(120, 120);

// transparent color
$transparent_color = imagecolorallocate($image, 255, 0, 0);

// border color
$border_color = imageColorAllocate($image, 150, 150, 150);

// axis lines color
$axis_line_color = imageColorAllocate($image, 0, 0, 0);

// graph line color
$graph_line_color = imageColorAllocate($image, 0, 100, 0);

// set the transparent color
imagecolortransparent($image, $transparent_color);

// fill the image with our transparent color
imagefilledrectangle($image,0,0,119,119,$transparent_color); // image border

// draw the border
imagerectangle($image,0,0,119,119,$border_color); // image border

// draw the axis lines
imageline($image,9,111,109,111,$axis_line_color); // x-axis
imageline($image,9,9,9,111,$axis_line_color); // y-axis

// set starting values
$x = 10;
$y = 110;
$space = 10;

// graph the values
foreach($my_values as $key=>$value){
  imageline($image,$x,($y-$value),$x+$space,($y-$my_values[($key+1)]),$graph_line_color);
  $x += $space;
}

// output the image to the browser
header ("Content-type: image/png");
imagepng ($image);
imagedestroy ($image);

?>

The important things to notice are

  $transparent_color = imagecolorallocate($image, 255, 0, 0);
  imagecolortransparent($image, $transparent_color);
  imagefilledrectangle($image,0,0,119,119,$transparent_color);

In the first line we are allocating a color that we will use as the transparent color, in this case red. The second line actually sets the transparent color. Anything that we "paint" red will be considered transparent later on. This color can be anything you wish but you must make sure that it is not a color that you will need in your image! The third line fills our entire image with the transparent color. This makes the entire image transparent. Now all we have to do is add the items on top of that that are not transparent.

What makes this cool is that we can now change the background of the graph rather easily. You could use an image, change the color, anything you wish with out ever having to go back and modify the actual php code. This also makes it much easier to port to other projects since you no longer have to consider what or where the image will be placed.

Now for the final results!

Click any of the following to change the background of the image.