Home > Miscellaneous > Making graphs with PHP

Making graphs with PHP

February 26th, 2010

Like I promised yesterday, here's the tutorial for creating little fancy graphs.

Actual result:

SOURCE

First things first. Figure out what offsets you will need to display the graph in. Easiest way is to do this by drawing up a little box on a piece of paper or in paint. If you're too lazy for this, there's one after the jump:

And you need to know that the X and Y-coordinates you need always start at the top left.

Let us jump right into the beginning and create an actual image.

$img = imagecreate(160,110);
imagecolorallocatealpha($img, 247,247,247,127);

They speak for theirselves. We're making an image 160 pixels wide by 110 pixels high (110 pixels is easy to make this work with; 5 pixels margin and you have 100 pixels height left. Thats 1 pixel for each percent.). Then we assign the background colour for this image. Namely rgb(247,247,247), but beware because the last argument we passed is the transparency, where 0 means completely opaque and 127 completely see-through.

So now we have a 160x110 pixel transparent image. What I like to do now is add a black line that defines the lower bound, or the line that represents zero in this case. But before we can do this, we need to assign some colours.

$black = imagecolorallocate($img,0,0,0);
$graph = imagecolorallocate($img,47,116,168);
$shadow = imagecolorallocate($img,195,195,195);

Now it's time to draw the actual line, for this we use the function imageline(handle, Xstart, Ystart, Xend, Yend, colour). The X is the offset to the right. Since it's a horizontal line we'll draw the line from 5 - 155 and leave a 5 px border. The height at which we need to draw is 110 - margin, so 105 pixels deep.

imageline($img, 5, 105, 155, 105, $black);

We now have the base line, and we know how much higher it can go (100 px). But since the coordinates start at the top left instead of bottom left like in a graph, we will need the complement of the height. So for example:

$y = (105 - $value);

Let's assume you have all values in an array. We'll read them in to our own array with X and Y coordinates so we can use it with imagefilledpolygon(). Thing is, if we want a filled graph (we do), we'll also need to specify the baseline so it knows from where to fill. And instead of starting on top of the base, we'll start 1 px higher.

$points = array(
	5, 104,
	155, 104,
);
$pos = 0;
foreach ($array as $key => $value) {
	$points[] = ($pos+= 5);
	$points[] = 104-$value;
}

I'll assume you have an array with size 30 so we can draw a point every 5px. If you don't, put this before the points key to fill in some random numbers.

$array = array();
for ($i = 0; $i <= 30; $i++)
	$array[] = rand(30,70);

And don't forget to show it with imagefilledpolygon(handle, pointArray, pointCount, colour):

imagefilledpolygon($img, $points, count($points)/2, $graph);

Now we'll have created this:

Bit bleak isn't it?
I'm no graphical designer by far, but I do like the looks of adding a little shadow behind the actual graph.
Try inserting this part before the foreach() loop:

$highlight = array(3, 104, 153, 104);

And editing the loop that it says this instead:

$pos = 0;
foreach ($array as $key => $value) {
	$highlight[] = ($pos + 3); // Two pixels to the left
	$highlight[] = 104 - $value + 3;  // And three pixels up
	$points[] = ($pos+= 5);
	$points[] = 104-$value;
}

And don't forget to show this polygon BEFORE you output the actual graph.

imagefilledpolygon($img, $highlight, count($highlight)/2, $shadow);

And last, but definitely not least, output the graph:

header('Content-Type: image/png');
imagepng($img);

Result:

Ta da!

Popularity: 17% [?]

Miscellaneous

  1. February 9th, 2011 at 03:25 | #1

    i in co-operation it Kalkran.COM » Making graphs with PHP at once im your rss reader

  2. February 24th, 2011 at 09:34 | #2

    Making graphs with PHP at once im your rss reader

  3. Joe
    May 10th, 2011 at 16:27 | #3

    this post gave me aids

  4. June 26th, 2011 at 02:14 | #4

    打酱油的,路过博主博客。

  5. July 9th, 2011 at 01:10 | #5

    文章很不错 值得学习 呵呵

  6. September 9th, 2011 at 14:01 | #6

    Very nice site! is it yours too http://aieopxy.com/osoaqqv/4.html

  7. December 2nd, 2011 at 13:14 | #7

    Hello!
    http://ipodtouchtopsite.com/ ,vigrx plus,

  8. December 15th, 2011 at 13:30 | #8

    Aloha!
    http://socialmphl.com/ ,propecia online,

  9. February 23rd, 2012 at 17:21 | #9

    Aloha!
    http://yourklonopin.com ,klonopin online,

  10. March 3rd, 2012 at 18:35 | #10

    Sorry but,
    http://ambien24x7.com ,buy ambien,

  11. March 9th, 2012 at 11:52 | #11

    Aloha!
    http://www.ativan24x7nopre.com ,buy lorazepam,

  12. March 9th, 2012 at 17:48 | #12

    Sorry but,
    http://klonopin24here.com/ ,klonopin pills,

  13. March 12th, 2012 at 18:56 | #13

    Hello!
    http://www.coolvimax.com/ ,buy vimax,

  14. March 14th, 2012 at 11:37 | #14

    Perfect!
    http://p-adipex24x7.com ,adipex p,

  15. March 20th, 2012 at 21:11 | #15

    Sorry but,
    http://vimax-pills4you.com/ ,vimax,

  16. March 23rd, 2012 at 19:44 | #16

    Hi there!
    http://www.adipex-pdiet.com/ ,adipex p,

  17. March 25th, 2012 at 18:47 | #17

    Aloha!
    http://klonopin24h.com/ ,buy klonopin,

  18. March 25th, 2012 at 18:52 | #18

    Hello!
    http://ativan24h.com/ ,generic lorazepam,

  19. March 28th, 2012 at 17:23 | #19

    Good site,
    http://ambien4sleep.com/ ,generic zolpidem,

  20. April 2nd, 2012 at 18:47 | #20

    Good site,
    http://www.adipex-375norx.com/ ,adipex p,

  21. April 2nd, 2012 at 19:26 | #21

    Perfect!
    http://www.phentermine-375norx.com/ ,phentermine 37.5,

  22. April 5th, 2012 at 20:19 | #22

    Sorry but,
    http://klonopin-4you.com ,klonopin,

  23. April 7th, 2012 at 20:19 | #23

    Sorry but,
    http://xanax-4all.com ,xanax,

  24. April 9th, 2012 at 16:50 | #24

    Good site,
    http://vigrx4plus.com ,vigrx reviews,

  25. April 9th, 2012 at 17:39 | #25

    Hello!
    http://vimax2pills.com ,cheap vimax,

  26. April 10th, 2012 at 15:48 | #26

    Sorry but,
    http://xanax365d.com ,xanax,

  27. April 19th, 2012 at 14:51 | #27

    Aloha!
    http://vimax-24×7.com ,vimax penis enlargement,

  28. April 19th, 2012 at 15:54 | #28

    Hello!
    http://vigrx-24×7.com ,buy vigrx,

  29. April 22nd, 2012 at 06:09 | #29

    Good site,
    http://vigrx.so/ ,vigrx plus,

  30. May 5th, 2012 at 17:38 | #30

    Good site,
    http://zolpidem-g.webs.com/ ,zolpidem without prescription,

  31. May 10th, 2012 at 08:25 | #31

    What a nice job buddy

  32. May 14th, 2012 at 17:13 | #32

    Hi there!
    http://thetragicallyunhip.com/ ,adipex p,

  33. May 15th, 2012 at 10:18 | #33

    Hi there!
    http://vimax4pills.com/ ,cheap penis enlargement,

  34. August 1st, 2012 at 07:23 | #34

    围观,学习了!

  35. September 30th, 2012 at 05:11 | #35

    quick easy payday loans bbb payday loans online best payday loans people bad credit

  36. November 24th, 2012 at 18:16 | #36

    Amazing! This blog looks just like my old one!
    It’s on a completely different subject but it has pretty much the same page layout and design. Excellent choice of colors!

  37. July 5th, 2013 at 19:48 | #37

    Hello Dear, are you in fact visiting this web site daily, if so afterward you will
    definitely take pleasant know-how.

  38. November 27th, 2013 at 08:42 | #38

    I’ve been surfing online more than 4 hours today, yet I never found any interesting
    article like yours. It’s pretty worth enough for me.
    In my view, if all webmasters and bloggers made
    good content as you did, the web will be much more useful than ever before.

  39. November 29th, 2013 at 16:24 | #39

    I don’t know whether it’s just me or if perhaps everybody else encountering problems with your blog.
    It appears as though some of the text on your content are running off the screen.
    Can somebody else please comment and let me know if this is happening to them as well?
    This might be a problem with my web browser because I’ve had this happen previously.

    Thank you

  40. December 13th, 2013 at 01:57 | #40

    Hey! This is kind of off topic but I need some guidance from an established blog.
    Is it hard to set up your own blog? I’m not very techincal but I can
    figure things out pretty quick. I’m thinking about setting up my own but I’m not sure where to begin.

    Do you have any tips or suggestions? Cheers

  41. December 16th, 2013 at 15:22 | #41

    I am not sure where you are getting your info, however good
    topic. I needs to spend a whille studying more or understanding more.
    Thank you for great info I was searching for this information for my mission.

  42. December 23rd, 2013 at 20:42 | #42

    Hello to all, how is the whole thing, I think every one is getting more from this web site, and
    your views are good in support of new users.

  43. December 25th, 2013 at 22:31 | #43

    My brother suggested I might like this blog. He used to be totally right.
    This post actually made my day. You can not believe simply how much time
    I had spent for this information! Thanks!

  44. December 31st, 2013 at 22:08 | #44

    Hey would you mind stating which blog platform you’re using?

    I’m looking to start my own blog soon but I’m having a
    tough time deciding between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design and style seems different then
    most blogs and I’m looking for something completely unique.

    P.S Apologies for being off-topic but I had to ask!

  45. January 10th, 2014 at 18:21 | #45

    If you would like to obtain a good deal from this article then you have to
    apply such strategies to your won weblog.

  46. January 19th, 2014 at 07:11 | #46

    You really make it seem so easy with your presentation but I find this topic to be actually something that I think I
    would never understand. It seems too complicated and very
    broad for me. I am looking forward for your next post, I’ll try to get the hang of it!

  47. March 16th, 2014 at 02:18 | #47

    whoah this blog is great i really like studying your posts.

    Stay up the good work! You recognize, many people are searching
    round for this info, you could help them greatly.

  48. May 1st, 2014 at 00:31 | #48

    What’s up to every single one, it’s really a fastidious for me to pay a quick visit this website, it includes priceless Information.

  49. May 3rd, 2014 at 09:30 | #49

    Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your webpage?
    My blog is in the exact same area of interest as yours and my
    visitors would genuinely benefit from a lot of the information you present
    here. Please let me know if this okay with you. Thank you!

  50. May 29th, 2014 at 19:08 | #50

    Usually I don’t learn article on blogs, but I wish to say that this write-up very pressured me to take a
    look at and do so! Your writung style has been amazed me.
    Thank you, quite nice post.

  1. No trackbacks yet.