Volodymyr Osypov blog

April 21, 2008

Bar diagram (graph) in PHP using GD

Filed under: PHP — Tags: , , , — admin @ 10:25 pm

Today we'll program a function which biulds bar graph using GD library for PHP. For each bar diagram we need datas and also names for these data. So in our example our function will have array $ar ($ar['name']=data;) and $title for diagram title as input.

PLAIN TEXT
PHP:
  1. <?
  2.  
  3. function GraphBars($ar,$title) {
  4.  
  5. //Now we need some coordinates and dimensions for our diagram.
  6. $diagramWidth=500;
  7. $diagramWidth2=450;
  8. $diagramHeight=400;
  9. $diagramHeight2=350;
  10.  
  11. // We have rectangle picture $diagramWidth x $diagramHeight and field for diagram $diagramWidth2 x $diagramHeight 2.
  12. // Offset from the left side where to start diagram output.
  13. $leftoffset=40;
  14.  
  15. // and Legend offset:
  16. $legendOffset=50;
  17.  
  18. // Now we need to determine with of each bar. Count of bars is the count of $ar array with data. They will have equal width, so the width will be:
  19. $boxWidth=floor($diagramWidth2/count($ar));
  20.  
  21. // Maximum value (needed for scaling)
  22. $maxval=max($ar);
  23.  
  24. // Now we should know how many pixels in 1 of our values.
  25. $perc=$diagramHeight2/$maxval;
  26.  
  27. // GD function to create image
  28. $image = imageCreate($diagramWidth, $diagramHeight+100);
  29.  
  30. // Now we need to determine some colours
  31. //Background:
  32. $colorBackgr = imageColorAllocate($image, 220,220,220);
  33.  
  34. //Text :
  35. $colorText = imageColorAllocate($image, 0, 0, 0);
  36.  
  37. // White colour:
  38. $w = imageColorAllocate($image, 255, 255, 255);
  39.  
  40. // Axes colour
  41. $axiscolour = imageColorAllocate($image, 100, 100, 100);
  42.  
  43. // Bar 1 colour:
  44. $colors[0] = imagecolorallocate($image, 182,110,29);
  45.  
  46. // Bar 2 colour:
  47. $colors[1] = imagecolorallocate($image, 132,64,255);
  48.  
  49. //Rectangle for the diagram:
  50. imageFilledRectangle($image, 0, 0, $diagramWidth - 1, $diagramHeight - 1, $colorBackgr);
  51.  
  52. // So now we can build bars
  53.  
  54. // each bar left x coordinate is $leftoffset2
  55. $leftoffset2=$leftoffset;
  56. // $i we need to alternate bar colours
  57. $i=0;
  58. foreach ($ar as $name =&gt; $val) {
  59. // build bar
  60. imagefilledrectangle($image,$leftoffset2+1,$diagramHeight-(25+ceil($perc*$val)),$leftoffset2+$boxWidth,$diagramHeight-25,$colors[($i%2)]);
  61. // write bar title "vertically"
  62. imagettftext ($image, 8, 270, $leftoffset2+($boxWidth/2)-5, $diagramHeight-20, $colorText, "arialcyr.ttf", $name);
  63. $i++;
  64. $leftoffset2+=$boxWidth;
  65. }
  66.  
  67. // Print diagram title
  68. imagettftext ($image, 14, 0, 10, 18, $colorText, "arialcyr.ttf", $title);
  69.  
  70. // Vertical axis on the left side
  71. // Horizontal axes
  72. // maximum value
  73. ImageString ($image, 2, $leftoffset-20, $diagramHeight-(25+ceil($perc*$maxval)), $maxval, $colorText);
  74. imageline($image,$leftoffset-5, $diagramHeight-(25-1+ceil($perc*$maxval)),$leftoffset+$diagramWidth2,$diagramHeight-(25-1+ceil($perc*$maxval)),$axiscolour);
  75. // 0
  76. ImageString ($image, 2, $leftoffset-20, $diagramHeight-25, 0, $colorText);
  77. imageline($image,$leftoffset-5, $diagramHeight-(25-1+ceil($perc*3*$maxval/4)),$leftoffset+$diagramWidth2,$diagramHeight-(25-1+ceil($perc*3*$maxval/4)),$axiscolour);
  78. // 1/4
  79. ImageString ($image, 2, $leftoffset-20, $diagramHeight-(25+ceil($perc*($maxval/4))), ceil($maxval/4), $colorText);
  80. imageline($image,$leftoffset-5, $diagramHeight-(25-1+ceil($perc*$maxval/4)),$leftoffset+$diagramWidth2,$diagramHeight-(25-1+ceil($perc*$maxval/4)),$axiscolour );
  81. // 1/2
  82. ImageString ($image, 2, $leftoffset-20, $diagramHeight-(25+ceil($perc*($maxval/2))), ceil($maxval/2), $colorText);
  83. imageline($image,$leftoffset-5, $diagramHeight-(25-1+ceil($perc*$maxval/2)),$leftoffset+$diagramWidth2,$diagramHeight-(25-1+ceil($perc*$maxval/2)),$axiscolour);
  84. // 3/4
  85. ImageString ($image, 2, $leftoffset-20, $diagramHeight-(25+ceil($perc*(3*$maxval/4))), ceil(3*$maxval/4), $colorText);
  86. imageline($image,$leftoffset-1, $diagramHeight-25,$leftoffset-1, $diagramHeight-(25+ceil($perc*$maxval)),$axiscolour);
  87.  
  88. // Just copyright text
  89. imagettftext ($image, 10, 0, 10, $diagramHeight+90, $colorText, "arialcyr.ttf", "www.aurorascorpio.com");
  90.  
  91. // Output picture
  92. header("Content-type:  image/png");
  93. imagepng($image);
  94. // create an interlaced image for better loading in the browser
  95. imageInterlace($image, 1);
  96. // mark background color as being transparent
  97. imageColorTransparent($image, $colorBackgr);
  98.  
  99. return;
  100. }
  101. ?>

Don't forget to have arialcyr.ttf font in your script folder. Run it and you will see a diagram picture in your browser.

DEMO: http://www.aurorascorpio.com/test/graphs/diagrambartest.php

1 Comment »

  1. good script!

    Comment by Segega — April 22, 2008 @ 8:23 am

RSS feed for comments on this post. TrackBack URL

Leave a comment

Powered by WordPress