[SOLVED] Using the GD Class to draw a dynamic Line-Graph

rilana · July 23, 2008

Hi guyes, I am trying to do a dynamic line graph and I found a pretty good tutorial http://www.plus2net.com/php_tutorial/gd-linegp.php I think understand, but now I am trying to add more then one line, I know it should be pretty easy, but the hard part is that I am doing it dynamicaly out of mysql.... Here is what it looks like: http://rilana.biz/gd/test2.php. And here ist the code I tryed out:

<?php
include "db.php";

$qt=mysql_query("select * from gd_graph");
header ("Content-type: image/gif");

$qt2=mysql_query("select * from gd_graph2");
header ("Content-type: image/gif");

$x_gap=40; // The gap between each point in y axis

$x_max=$x_gap*13; // Maximum width of the graph or horizontal axis
$y_max=250; // Maximum  hight of the graph or vertical axis
// Above two variables will be used to create a canvas of the image//


$im = @ImageCreate ($x_max, $y_max)
or die ("Cannot Initialize new GD image stream");
$background_color = ImageColorAllocate ($im, 234, 234, 234);
$text_color = ImageColorAllocate ($im, 233, 14, 91);
$graph_color = ImageColorAllocate ($im,25,25,25);

$x1=0;
$y1=0;
$first_one="yes";
while($nt=mysql_fetch_array($qt)){
//echo "$nt[month], $nt[sales]";
$x2=$x1+$x_gap; // Shifting in X axis
$y2=$y_max-$nt[sales]; // Coordinate of Y axis
ImageString($im,2,$x2,$y2,$nt[month],$graph_color); 
//Line above is to print month names on the graph
if($first_one=="no"){ // this is to prevent from starting $x1= and $y1=0
imageline ($im,$x1, $y1,$x2,$y2,$text_color); // Drawing the line between two points
}
$x1=$x2; // Storing the value for next draw
$y1=$y2;
$first_one="no"; // Now flag is set to allow the drawing
}

while($nt2=mysql_fetch_array($qt2)){
//echo "$nt[month], $nt[sales]";
$x2=$x1+$x_gap; // Shifting in X axis
$y2=$y_max-$nt2[sales]; // Coordinate of Y axis
ImageString($im,2,$x2,$y2,$nt2[month],$graph_color); 
//Line above is to print month names on the graph
if($first_one=="no"){ // this is to prevent from starting $x1= and $y1=0
imageline ($im,$x1, $y1,$x2,$y2,$text_color); // Drawing the line between two points
}
$x1=$x2; // Storing the value for next draw
$y1=$y2;
$first_one="no"; // Now flag is set to allow the drawing
}

ImageJPEG ($im);

?>

I thaught if I would create a new table gd_graph2 in the same kind of strukture and fetched thrue that the same way it should somehow work. I guess I thaught wrong, because it's not woring. Does anyone has an Idea how I can fix this? I realy aprechiate your help. Thank you, Rilana

Barand · July 23, 2008

You'd have to reset some variables, like $first_one, $x1, $y1, but repeating the code with a second set of data should work.

Put the code to draw each line graph in a function, passing it the values and line colour.

Edit: It will look less cluttered with a second line if the months appear just once along the x axis

rilana · July 24, 2008

Hi

Thanks a lot, that seems to be working, it's clear and not so clear to me why. But it's working. I maid come back with more questions thats why I want mark the post solved yet. Thank you so much. Rilana

rilana · July 24, 2008

Hi guyes, I still have some Problems with my graphs. Rightnow it looks like that: http://mivglobalmedtech.com/de/test.php

I tryed to do the following: Making the dates stand up verticaly

$im = @ImageCreate ($x_max, $y_max)
or die ("Cannot Initialize new GD image stream");
$background_color = ImageColorAllocate ($im, 255, 255, 255);
$text_colorMiv = ImageColorAllocate ($im, 68, 159, 173);
$text_colorBench = ImageColorAllocate ($im, 00, 00, 00);
$text_colorMsci = ImageColorAllocate ($im, 99, 99, 99);
$graph_color = ImageColorAllocate ($im,25,25,25);
$tab = '560, 600';

$x1=0;
$y1=0;
$first_one="yes";
while($nt=mysql_fetch_array($qt)){
//echo "$nt[month], $nt[sales]";
$x2=$x1+$x_gap; // Shifting in X axis
$y2=$y_max-$nt[wert]*100/560; // Coordinate of Y axis
ImageString($im,2,$x2,$y0+230,$nt[datum],$graph_color); 
imagecharup($im,5,$x2,$y2,$tab,$graph_color); 
//Line above is to print month names on the graph
if($first_one=="no"){ // this is to prevent from starting $x1= and $y1=0
imageline ($im,$x1, $y1,$x2,$y2,$text_colorMiv); // Drawing the line between two points
}
$x1=$x2; // Storing the value for next draw
$y1=$y2;
$first_one="no"; // Now flag is set to allow the drawing
}

I know that I am suposed to use imagecharup but I have no clue how to integrate that in the ImageString. Do you have any sucestions?

The next Problem I have is making the thikness of the lines fater, they looke kind of scribbled, does anyone know how to do that?

Thanks a lot for the help! Rilana

Barand · July 24, 2008

imagesetthickness()

imagestringup()

rilana · July 27, 2008

Hi, thanks a lot the input realy helps me putting it togedher. I have more problems, Now I am trying to create a gride in the back of the curves, the gride should be starting at 560 and end at 700 and the steps should be 20.... My first problem ist to dynamicaly say something like check how many entrys are in the database and then make the gride as long as $x_gap*entrys. To just try it the easy way first, I tryed to draw one single line at 560, but I dont get why it shows the line so far off!

<?php
include "db.php";

$qt=mysql_query("select * from miv");
header ("Content-type: image/jpg");

$qt2=mysql_query("select * from bench");
header ("Content-type: image/jpg");

$qt3=mysql_query("select * from msci");
header ("Content-type: image/jpg");

$x_gap=14; // The gap between each point in x axis


$x_max=$x_gap*42; // Maximum width of the graph or horizontal axis
$y_max=800; // Maximum  hight of the graph or vertical axis
// Above two variables will be used to create a canvas of the image//


$im = @ImageCreate ($x_max, $y_max)
or die ("Cannot Initialize new GD image stream");
$background_color = ImageColorAllocate ($im, 255, 255, 255);
$text_colorMiv = ImageColorAllocate ($im, 68, 159, 173);
$text_colorBench = ImageColorAllocate ($im, 00, 00, 00);
$text_colorMsci = ImageColorAllocate ($im, 139, 139, 139);
$graph_color = ImageColorAllocate ($im,25,25,25);
$th = 1;
$grid_color = ImageColorAllocate ($im,125,125,125);

$x1=0;
$y1=0;
$first_one="yes";
while($nt=mysql_fetch_array($qt)){
//echo "$nt[month], $nt[sales]";
$x2=$x1+$x_gap; // Shifting in X axis

$y2=$y_max-$nt[wert]; // Coordinate of Y axis
imagestringup($im,2,$x2,$y0+310,$nt[datum],$graph_color); 
//Line above is to print month names on the graph
if($first_one=="no"){ // this is to prevent from starting $x1= and $y1=0
imagesetthickness ($im,$th);
imageline ($im,$x1, $y1,$x2,$y2,$text_colorMiv); // Drawing the line between two points
imageline ($im,0,560,300,560,$grid_color);
}
$x1=$x2; // Storing the value for next draw
$y1=$y2;
$first_one="no"; // Now flag is set to allow the drawing
}

rilana · July 27, 2008

I just realized something by messuring the image out in photoshop.... the code that draws the lines starts counting 560px from the buttom up, but the Line that draws the gride starts counting from the top 560... is that logic? I dont get it!

Barand · July 27, 2008

Values in the chart have 0 (or at least the lower limit) at the bottom, whereas the y coordinates on your canvas have 0 at the top

If you want to label the axes, your canvas needs be larger than the chart area, so your plots all need to be relative to the position of the chart origin

[pre]

+-----------------------------------------------------------+

| |

| 800 -| |

| | |

| 700 -| |

| | x |

| | x x |

| 600 -| x x x |

| | x x |

| 500 +------------------------------------------ |

| A B C D E F G H J K L M N P |

+-----------------------------------------------------------+

[/pre]

<?php
$im = imagecreate(500,400);
$bg = imagecolorallocate($im, 0xF0,0xF0,0xF0); 
$axiscolor = imagecolorallocate($im, 0,0,0);
$gridcolor = imagecolorallocate($im, 0xCC,0x00,0x00);
$originx = 50 ;
$originy = 350;
$ymin = 500;
$ymax = 800;
$yrange = $ymax - $ymin;
$chartht = 300;
$chartwid = 400;
$ypixels = $chartht/$yrange;
$gridint = 100;
// draw axes
imageline ($im, $originx, $originy, $originx, $originy-$chartht, $axiscolor);
imageline ($im, $originx, $originy, $originx+$chartwid, $originy, $axiscolor);
// draw y gridlines
for ($y = $ymin+$gridint; $y <= $ymax; $y+=$gridint)
{
    $x1 = $originx;
    $x2 = $originx+$chartwid;
    $y1 = $originy - (($y - $ymin) * $ypixels);
    imageline ($im, $x1, $y1, $x2, $y1, $gridcolor);
}
// y labels
for ($y = $ymin; $y <= $ymax; $y+=$gridint)
{
    $x1 = 10;
    $y1 = $originy - (($y - $ymin) * $ypixels) - 5;
    imagestring($im, 2, $x1, $y1, $y, $gridcolor);
}

header("content-type: image/png");
imagepng($im);
imagedestroy($im);
?>

rilana · July 28, 2008

Wow that realy helped a lot! Thanks check it out: http://mivglobalmedtech.com/de/test.php

I have one more Problem, I would like to use arial and I did download it and put it on the ftp as a .ttf-File, and tried to link

in the "imagestringup" but it does not work. Could you please tell me why? I will also create a backend to this. Do you think it would be cool to make a tutorial out of this? Thanks a lot, Rilana

$font = 'http://www.mivglobalmedtech.com/gd/arial.ttf';

$x1=$originx-$x_gap;
$y1=$originy;
$first_one="yes";
while($nt=mysql_fetch_array($qt)){
//echo "$nt[month], $nt[sales]";
$x2=$x1+$x_gap; // Shifting in X axis

$y2=$y_max-$nt[wert]; // Coordinate of Y axis
imagestringup($im,2,$x2,$y0+310,$font,$nt[datum],$graph_color); 
//Line above is to print month names on the graph

Barand · July 28, 2008

imagettftext() for tt fonts

<?php
$im = imagecreate(200,200);
$bg = imagecolorallocate($im, 0xFF, 0xFF, 0xFF);
$blk = imagecolorallocate($im, 0x00, 0x00, 0x00);

$font = 'c:/windows/fonts/arial.ttf';   // or whereever yours is

imagerectangle($im,0,0,199,199,$blk);
imagettftext($im, 12, 90, 100, 190, $blk, $font, 'Hello world');

header("content-type: image/png");
imagepng($im);
imagedestroy($im);
?>

rilana · July 28, 2008

super, that worked! Now I have to get going on the backend :-) this is starting to exite me, thanks so much!

ninedoors · July 28, 2008

If you have more graphing to do you should look at uses jpgraph. It is a great php script that has hundreds of graphs and is easily customized. And its free.

http://www.aditus.nu/jpgraph/index.php

Barand · July 28, 2008

If you are going to plug 3rd party scripts then I'll plug baaChart in my sig.

rilana · July 28, 2008

I came across 3rd party scripts during my research, but I decided to try it out myself, so I know what I am doing, and I understand it a bit better. But thanks a lot for the info's and help.

Barand · July 28, 2008

That's what I guessed. You learn more that way.

rilana · July 28, 2008

yes much more and I dont have extra code it's totaly costumized to what I need... :-) I am so happy now! I am going swimming now! And will worrie about the backend later. I will also have to do something more complicated there... I will apprechiate your help verry much .-) thank you, I would not know what I would do without you! Rilana

rilana · August 4, 2008

Hy I am almost done, but still screwing arround making this thing perfect... I did the backend so Nr. can be entered and it works, but now I also thaught that maby it would be better if I also made an edit-page, where all the info from the database shows and can be changed. On my search for tutorial for this, I cam to the conclusion that I must have one more table called id.... is this necessary or is there also a way without an ID-Table?

thanks for helpng, Rilana

Barand · August 4, 2008

Can't answer that without knowing what you have now and what you are proposing to put in the ID table

rilana · August 4, 2008

Hi

I have this as a table

CREATE TABLE IF NOT EXISTS `miv` (
  `miv_datum` char(10) CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,
  `miv_wert` int(10) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Daten für Tabelle `miv`
--

INSERT INTO `miv` (`miv_datum`, `miv_wert`) VALUES
('11.03.08', 609),
('25.03.08', 604),
('08.04.08', 631),
('22.04.08', 604),

And this to add nr. from a php form...

<?php
//connecting
$dbname = "";
$dbloc = "";
$dbuser = "";
$dbpass = "";
mysql_connect($dbloc, $dbuser, $dbpass) or die (mysql_error());
mysql_select_db($dbname) or die (mysql_error());
//end connecting

$miv_datum = strip_tags($_POST['miv_datum']);
$miv_wert = strip_tags($_POST['miv_wert']);

$bench_datum = 'miv_datum';
$bench_datum = strip_tags($_POST['bench_datum']);
$bench_wert = strip_tags($_POST['bench_wert']);

$msci_datum = 'miv_datum';
$msci_datum = strip_tags($_POST['msci_datum']);
$msci_wert = strip_tags($_POST['msci_wert']);

$insert_str1  = "INSERT INTO miv(miv_datum, miv_wert) VALUES('" . $miv_datum . "', '" . $miv_wert . "')";
$insert_str2  = "INSERT INTO bench(bench_datum, bench_wert) VALUES('" . $bench_datum . "', '" . $bench_wert . "')";
$insert_str3  = "INSERT INTO msci(msci_datum, msci_wert) VALUES('" . $msci_datum . "', '" . $msci_wert . "')";


$mysql = mysql_query($insert_str1);
$mysql = mysql_query($insert_str2);
$mysql = mysql_query($insert_str3);
if($mysql){
echo "done";
}
else
{
echo "error :" . mysql_error();
}
?>

And now I am trying to also do a page where it listst all the entrys and people will be able to edit nr. and dates....

Do I need to creat an Id table for that? or does it somehow work without an ID?

Thanks a lot, Rilana

rilana · August 4, 2008

there is one thing I would like to change and I dont evan know where I should start to think. I have dates and values in the tables and it works all fine, but now I would like to to some kind of a conversion. Something like all the dates that are in january unstead of listing all the dates, just write january on the buttom x. Is it evan possible to do a conversion like this for a whole dataset? Where should I start doing this?

rilana · August 4, 2008

I set the miv_datum to date now unstead char like before, hoping I could format the output of the mysql data.

I cant figure it out somehow.

imagettftext($im,8,90,$x2+5,$y0+295,$graph_color,$font,$nt[miv_datum]);
print date('d M Y', strtotime($nt['miv_datum']));

How do I format my miv_datum now? Please help, thank you so much.

Rilana

Barand · August 4, 2008

strtotime() and other datetime functions abhor 21.03.08 date format.

Make you date field TYPE DATE and store as 2008-03-21 format.

You didn't say what you were planning to put in the id table

rilana · August 5, 2008

Hi I dont get how to format the date. I did set the sql to the date and entered the right format, but I think I have a problem with the syntax. I tried this:

$datum= date("F", strtotime("$nt['miv_datum']");
imagettftext($im,8,90,$x2+5,$y0+295,$graph_color,$font,$datum);

Is there some syntax mistake or am I totaly off? About the ID, I have no experience with setting up a backend, I did set up database and stored stuff via form or flash in it. But I have no clue how to mak a backend editing or deleting. So on my research I always came across examples with ID's. I' thought the ID is someting that kind of creates itself like 1,2,3,4 so later the data could be edited... but realy I dont have a clue. How would you do it? do I evan need ID? Or could I just call the date an ID? I would be thankfull for any pointers. Thank you so much! Rilana

Barand · August 5, 2008

change to this

CREATE TABLE IF NOT EXISTS `miv` (
  `ID` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `miv_datum` DATE CHARACTER SET latin1 COLLATE latin1_german1_ci NOT NULL,
  `miv_wert` int(10) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Daten für Tabelle `miv`
--

INSERT INTO `miv` (`miv_datum`, `miv_wert`) VALUES
('2008-03-11, 609),
('2008-03-25', 604),
('2008-04-08', 631),
('2008-04-22', 604),

rilana · August 5, 2008

Thank you, It helps setting up the tables right :-)!

Now I have all the dates convertet to month on the output-graph. http://mivglobalmedtech.com/de/p1Image.php

But I have one more Problem, that I dont have a clue how to take care of it, probably with an if statement somehow.

I will have an Imput to the graph like every week or so, but the Line where it outputs the month should only output a month once.

For an example if I have 4 values in March, I only want it to say March once on the buttom of the graph, and not 4 times. How can I say something like if there is more then one value in March, echo only one Time the word March but echo all the values of cours...

I hope you understand my complicated writing. I dont evan know if this is possible... Thanks a lot! For teaching me how to think! Rilana

Sign In

[SOLVED] Using the GD Class to draw a dynamic Line-Graph

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information