TalkPHP - Bar Chart in PHP

TalkPHP (http://www.talkphp.com/forums.php)

- Advanced PHP Programming (http://www.talkphp.com/advanced-php-programming/)

- - Bar Chart in PHP (http://www.talkphp.com/advanced-php-programming/1629-bar-chart-php.html)

Bar Chart in PHP

Yes its that time again another chart tutorial. This one is going to be a simple bar chart :-)

You can view a demo HERE

Firstly we are going to set a header type as image

PHP Code:


		
			
 header("Content-type: image/jpeg");

Now we are going to set some values in an array to use and then all them all together

PHP Code:


		
			

$data = array('3400','2570','245','473','1000','3456','780');
$sum = array_sum($data);

Now we need to set the height and width of the actual chart itself.

PHP Code:


		
			
$height = 230;
$width = 320;

For the sake of this tutorial do not edit this. Otherwise this may cause errors.

Now we can create the actual chart background or where the chart is actually shown on. However you want to look at it.

PHP Code:


		
			
$im = imagecreate($width,$height); // width , height px

Now we can set the background colour of the graph and also create some colours we are going to use for the bars and the lines.

PHP Code:


		
			
$white = imagecolorallocate($im,255,255,255); 
$black = imagecolorallocate($im,0,0,0);   
$red = imagecolorallocate($im,255,0,0);

Now its time to create the X & Y axis lines.

PHP Code:


		
			

imageline($im, 10, 5, 10, 230, $black );
imageline($im, 10, 230, 300, 230, $black);

PHP Code:


		
			
imageline  ( resource image,x-coordinate first point,y-coordinate first point,x-coordinate second point,y-coordinate second point,colour )

Now we need to set up some information so we can place these bars.

PHP Code:


		
			

$x = 15; // set how far from the side then how far from next bar
$y = 230; // set where bar should reach on the y in this case on the y line we created
$x_width = 20; // Width of each of the bars 
$y_ht = 0; //height of the bars

Now we can start creating the bars themself.

PHP Code:


		
			
for ($i=0;$i<7;$i++)
{
        
  $y_ht = ($data[$i]/$sum)* $height; // work out height and make sure they don't go larger then the image    

     imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$red);
     imagestring( $im,2,$x-1,$y+10,$data[$i],$black);
              
  $x += ($x_width+20); // set the new distance for the next bar 
         
}

Now we can display the final results

PHP Code:


		
			
imagejpeg($im);

This bar chart can easily be upgraded and i will be in the next advance tutorial on bar graphs. Stay tuned. :-)

Full Code

PHP Code:


		
			
<?php
  
           header("Content-type: image/jpeg");
         
        // read the post data
        $data = array('3400','2570','245','473','1000','3456','780');
        $sum = array_sum($data);
        
        $height = 255;
        $width = 320;
        
        $im = imagecreate($width,$height); // width , height px

        $white = imagecolorallocate($im,255,255,255); 
        $black = imagecolorallocate($im,0,0,0);   
        $red = imagecolorallocate($im,255,0,0);   


        imageline($im, 10, 5, 10, 230, $black);
        imageline($im, 10, 230, 300, 230, $black);
    

        $x = 15;   
        $y = 230;   
        $x_width = 20;  
        $y_ht = 0; 
       
        for ($i=0;$i<7;$i++){
        
          $y_ht = ($data[$i]/$sum)* $height;    
          
              imagerectangle($im,$x,$y,$x+$x_width,($y-$y_ht),$red);
              imagestring( $im,2,$x-1,$y+10,$data[$i],$black);
              
          $x += ($x_width+20);  
         
        }
        
        imagejpeg($im);

?>

I've never actually tried to do a bar chart in PHP before! But if it's so easy then I sure will be adding it when I think the website would suit one. I always imagined it'd be rather difficult and that you'd need a 3rd party tool to create them. I forget its name, but there is one out there that does this all for you.

I was messing about with the GD library only the other day, so maybe I should keep going! It encouraged my to look deeper into it after I realised you could apply all sorts of fancy effects to your pictures, and I also found out how to take a screenshot of a website using GD and the Windows COM component.

Yes i have been trying to figure out how to take screenshots of websites. I found out about the screengrab functions PHP has to offer well the latest version. I cant manage to get them to work maybe you can enlighten me on the subject? :-)

PHP Code:


		
			
imagegrabscreen();

imagegrabwindow();

PHP Code:


		
			
<?php

$im = imagegrabscreen();

imagepng($im, "myscreenshot.png");

?>

PHP Code:


		
			
<?php

$browser = new COM("InternetExplorer.Application");

$handle = $browser->HWND;

$browser->Visible = true;

$browser->Navigate("http://www.libgd.org");



/* Still working? */

while ($browser->Busy) {

    com_message_pump(4000);

}

$im = imagegrabwindow($handle, 0);

$browser->Quit();

imagepng($im, "iesnap.png");

?>

Do you get a black screen? If so then you'll need to open up services.msc, go to properties for the Apache service, click the "Log On" tab then tick the box "Allow service to interact with desktop".

Thank you! :-) Works

They should tell you about that on the php.net website. If you could do back-links I might have actually posted, but as you can't, sod them!

Screen shots are only for windows though...correct me if I'm wrong.

Yea. Unfortunately the COM component is only available on Windows. Although maybe it'll work if you have Wine installed? I'm not sure as I'm not into Linux that much, but it's just an idea.

Haven't ran into that specific problem before so it shouldn't pose a problem. We kinda use the same charts (this one is a little bit more degraded AND advanced at the same time) but no errors yet.

PHP version?

I believe version 4 - 5

There is a nice graph extension, namely JPGraph (http://www.aditus.nu/jpgraph/)

Yes i have heard of this..tis very good..

Although I've never tried the technique you use here to create a single image with php only, wouldn't it be better and easier to use html and some css to set the height of the bars for example?? It would be more accessible since people can still view the data because the numbers are displayed as html text instead of an image.

Thanks for the tutorial though, I'm not that experienced with php and might use this to add some text to thumbnail images. I'm wondering if it's possible to adjust the opacity of a certain rectangle you're creating for example, any ideas?

I was just looking through google about this function imagegrabscreen() and I thought Id sign up on this forum to mention that there are potential security risks in activating the "Allow service to interact with desktop". As far as Im aware this is only available for windows servers and since I only have access to a shared Unix server from my host I cant test the theory. However M$ do advise strongly that this service never be used! :-P

Id rather mention it than not as I was quite excited at the idea of being able to capture the screens of visitors... Then I thought some more... isnt this a break in some privacy law (UK / US)??? :-/

Anyway, cant test it so unsure on what exactly can be produced.

Kind regards
Dal
PS: didnt this thread start of with something completely different???:-/

Check this out, very nice tutorial on drawing bar graph with php
How to create bar graph in PHP with dynamic scaling

bar graph is not working in any html tags?

hi when i m using the above given script in any html tag or even i m giving any html tag above or below this code... the functionality of script stops. a garbage value is seen...

i hv to put this bargaraph in a html page which contain some other data alos..

what to do...

plz give me soloution

Quote:

Originally Posted by RishikeshJha (Post 24644)

plz give me soloution

No. If you really want to be helped, ask questions. If you really just want a solution handed to you on a plate, without knowing what mess you are already making, go hire a freelancer to start again from scratch.

Quote:

Originally Posted by Salathe (Post 24647)

Sorry if my words hurted u. actually i hv made different file for this code. when i m including it the image is not showing. even when i put any tag of html before or after this code image disappers in ie and in mozilla it returns garbage value. i need ur help

plz....

thanks

We can't help you without knowing the problem. A short paragraph saying "it doesn't work!" is no use at all. Give us a live example of the problem, turn on error reporting, show us source code.

Quote:

Originally Posted by Salathe (Post 24678)

We can't help you without knowing the problem. A short paragraph saying "it doesn't work!" is no use at all. Give us a live example of the problem, turn on error reporting, show us source code.

ok

thanks