Howdy all! Its been awhile since we had our first part of this tutorial, and there were quite a few questions and comments, I appreciate the feedback! I will try to get to as many of your questions as I can, but there are so many different ways to do this, I encourage you to try your own ways also. That said, lets gets moving on creating images with php, part deux!

Goal Number One: Create a Pie Chart

You dont need much extra knowledge to get you started with pie charts. The main function that will do the work for us here is the ImageFilledArc() Function. First things first we will create our canvas and set up some colors to use below:

<?php
//First thing, we create the canvas.
$ourImage = ImageCreate(500, 500);
//Now we set up our colors, White is first so it will be our background.
//We have a total of 5 colors, one for the background, and 4 for the chart.
$white = ImageColorAllocate($ourImage, 255, 255, 255);
$blue = ImageColorAllocate($ourImage, 0, 0, 255);
$red = ImageColorAllocate($ourImage, 255, 0, 0);
$green = ImageColorAllocate($ourImage, 0, 255, 0);
$yellow = ImageColorAllocate($ourImage, 255, 255, 0);
$black = ImageColorAllocate($ourImage, 0, 0, 0);

Since we set white as our first color, this will serve as our background color, later on we will go over how to use a custom background image for your canvas. Moving on, we’ll draw our first slice of the pie chart:

//Now we draw our pie using ImageFilledArc
ImageFilledArc($ourImage, 200, 200, 225, 200, 0, 90, $blue, IMG_ARC_PIE);

Ok lets go over what we just did above.

• First we used the ImageFilledArc function, which holds a lot of parameters
• Our first parameter is our canvas which in our case is the $ourImage variable.
• The next two are where you want the partial ellipses centered at, x first, then y. So our x and y points are centered at 200,200.
• Now the next two are the ellipse width and height in that order.
• The next two are very important, they are the partial ellipse start point, and the next is the partial ellipse end point. You can see then the code above will give us 25% of a circle, going from 0-90.
• Next up, is the color, and we have used the $blue variable.
• Lastly, is the style, which we have used the “IMG_ARC_PIE” style. This is a built in style that we will use to create a rounded edge.

Now that we know all of our parameters, we can draw the rest of our shapes on our pie chart:

ImageFilledArc($ourImage, 200, 200, 225, 200, 90, 180, $red, IMG_ARC_PIE);
ImageFilledArc($ourImage, 200, 200, 225, 200, 180, 270, $green, IMG_ARC_PIE);
ImageFilledArc($ourImage, 200, 200, 225, 200, 270, 360, $yellow, IMG_ARC_PIE);

Lets put some text on the chart!

Now that we have our shapes, we can put some text on the charts, letting the reader know which company is which on our pretend chart. I went over how to put text on images in part 1, so if you need to, go back and read that first. Here is the code to put some text on each slice of the chart:

//Lets Put some Text on our pie chart!
//Define Text
$headerText="CreatingDrew Pie Chart";
$companyOne="company 1";
$companyTwo="company 2";
$companyThree="company 3";
$companyFour="company 4";
//Create the Text
ImageString($ourImage, 6, 100, 50, $headerText, $black);//Header Text
ImageString($ourImage, 2, 120, 250, $companyOne, $black);//Company 1
ImageString($ourImage, 2, 120, 150, $companyTwo, $black);//Company 2
ImageString($ourImage, 2, 220, 150, $companyThree, $black);//Company 3
ImageString($ourImage, 2, 220, 250, $companyFour, $black);//Company 4

You will have to mess with the coordinates to get the text exactly where you want it, but I have already done that in the code snippet above.

Finish our chart!

Alright lets finish up here, you will remember from part 1 how to declare the headers and clear the memory, yes? Well in case you forgot, here is the rest of our code to complete our chart:

//Output it with the header function. Also declare the type of image
header ("Content-type: image/png");
ImagePng($ourImage);
//Clean it up!
ImageDestroy($ourImage);
?>

Demo

If you save this as a php file and upload it to your web server, you should get something like the beautiful image below:

You can download all the files and code at the bottom of this post. In part 3, we will cover putting a drop shadow on your pie chart. Lets move on to making a bar graph from an existing image.

Goal Number Two: Make a Bar Graph

Not only do we want a bar graph, but we want to use an exisitng image we have, found here, to serve as the background for our new image. This way we can just make the bars and not have to worry about drawing all the lines etc. This technique is essential for part 3 as we will allow user input to create an image from a selection of images as the background.
You will need the blank chart pictured below:

Create the background canvas

To do this we will use the “ImageCreateFromPng()” function, which takes a pre-existing .png image and allows us to draw more images onto it. In the code below I will setup a canvas from the blank graph above, setup our colors, and draw 3 rectangles on the chart:

<?php
//First thing, we create the canvas from an exisiting image
$ourImage = ImageCreateFromPng("http://creatingdrew.com/demo/img/blank_chart.png");

//Setup colors
$blue = ImageColorAllocate($ourImage, 0, 0, 255);
$red = ImageColorAllocate($ourImage, 255, 0, 0);
$green = ImageColorAllocate($ourImage, 0, 255, 0);
$black = ImageColorAllocate($ourImage, 0, 0, 0);
//Draw 3 charts
ImageFilledRectangle($ourImage, 130, 229, 160, 275, $blue);
ImageFilledRectangle($ourImage, 230, 225, 260, 75, $red);
ImageFilledRectangle($ourImage, 325, 225, 355, 75, $green);

Now what would a graph be without a key/legend? So lets setup some text, and make some colored cubes for the legend:

//Make a legend with text and small colored rectangles.
$legend="LEGEND";
$creatingDrew="=CreatingDrew.com's Annual Revenue";
$eBay="=ebay.com's Annual Revenue";
$stumbleupon="=StumbleUpon.com's Annual Revenue";
//Make Cubes for legend.
ImageFilledRectangle($ourImage, 80, 60, 95, 45, $blue);
ImageFilledRectangle($ourImage, 80, 85, 95, 70, $red);
ImageFilledRectangle($ourImage, 80, 110, 95, 95, $green);

Next, we will put our text, as we learned in part 1, next to our small legend cubes, and clean up:

//Begin Writing Text For Legend.
ImageString($ourImage, 5, 80, 20, $legend, $black);
ImageString($ourImage, 2, 100, 47, $creatingDrew, $black);
ImageString($ourImage, 2, 100, 72, $eBay, $black);
ImageString($ourImage, 2, 100, 97, $stumbleupon, $black);
//Output it with the header function. Also declare the type of image
header ("Content-type: image/png");
ImagePng($ourImage);
//Clean it up!

ImageDestroy($ourImage);
?>

Demo time!

Were done, lets checkout the final image:

Looks like CreatingDrew is going through a little bit of a rough patch, but I’m sure the government could help me out

Part 3-Transparency and User Input

Stay tuned for part 3, where we will use all of the fundamentals we have learned and go all out with a script that accepts user input. We will also touch on transparency and fonts if I can squeeze them in. You can download all the files and images used in this tutorial by clicking the image below.