graph in the net

[xuexue]

i just want to know, how can i put a live bar graph in a dynamic page?

thanks in advance ^^

[cwarn23]

In php this could be kinda hard to do at first but there is an api by google you can use and is very handy. I've used this api myself and it seems pretty good with little or no limitations.

[FlashCreations]

Well there's SWF charts that rely on XML files for data. You could make the XML file dynamic with PHP and have the SWF poll the file every fifteen seconds or so. XML/SWF Charts would be an option for this.

The other way, would be with Javascript and CSS. Sometime ago I read an article about creating graphs in CSS. I'll look for it and post back when I find it.

EDIT:
Here's the link: Pure CSS Graphs

[xuexue]

this is the scenario, i will plot the data in a graph coming from a live database, meaning the graph will change simultaneously according to the data..how is it possible?! please help me T_T

[cwarn23]

this is the scenario, i will plot the data in a graph coming from a live database, meaning the graph will change simultaneously according to the data..how is it possible?! please help me T_T

With the google api it is possible to make a html image tag then using url variables you dump your data into the end of the image tag. Below is an example:

<img src="http://chart.apis.google.com/chart?cht=lc&chd=t:27,40,100,72,40,84,44,76,48|10,8,8,6,6,6,5,9,3&chs=135x165&chl=Dec|Jan&chtt=Visits+this+month&chxt=x,y&chf=bg,s,FFFFFF&chco=000099,66CC00&chdl=Site|Page&chdlp=b">

That is a chart I have made using the google api and all you need to do is dump the data into the address. Read the link in my earlier post for more information.

[FlashCreations]

It is possible with JavaScript and the Google API or a CSS chart (again updated by JavaScript constantly polling a server page. This server page will echo data to the AJAX request and you can update your table there)

[xuexue]

hmmm..the GOOGLE API sirs is really great! and it does what i wanted it to do..however, the problem is that it needs internet connection for it to work, am i right? because that's what ive noticed, now, is there any solution to my problem? plotting data to a graph without having internet connection??

[FlashCreations]

Without having an internet connection. Wouldn't that defeat the purpose of writing a PHP script. You could use localhost and maybe XAMPP or LAMP, but without an internet connection. Why?
If you insist, you could always try a CSS graph like I had suggested before. It's not as elegant as the Google API and its sure not as easy, but it doesn't need an internet connection (It does need a browser, though!)

[cwarn23]

hmmm..the GOOGLE API sirs is really great! and it does what i wanted it to do..however, the problem is that it needs internet connection for it to work, am i right? because that's what ive noticed, now, is there any solution to my problem? plotting data to a graph without having internet connection??

It is possible but hard. I have been planning for a while to write a tutorial on making charts using the php gd library but never got around to doing it. So today I shall make a start on it and hopefully will be done in time for you to read.

[cwarn23]

Try this code:

<?php
$values=array(32,76,34,65,62,29,54,23,29,34);
//above is an array of values for the chart

//image size
$image_width=320;
$image_height=240;

//line thickness
$line_thickness=3;

//line color
$line_color['r']=0;
$line_color['g']=0;
$line_color['b']=0;

//background color
$bg_color['r']=255;
$bg_color['g']=255;
$bg_color['b']=255;


//raw code
function imagelinethick($image, $x1, $y1, $x2, $y2, $color, $thick = 1)
{
    /* this way it works well only for orthogonal lines
    imagesetthickness($image, $thick);
    return imageline($image, $x1, $y1, $x2, $y2, $color);
    */
    if ($thick == 1) {
        return imageline($image, $x1, $y1, $x2, $y2, $color);
    }
    $t = $thick / 2 - 0.5;
    if ($x1 == $x2 || $y1 == $y2) {
        return imagefilledrectangle($image, round(min($x1, $x2) - $t), round(min($y1, $y2) - $t), round(max($x1, $x2) + $t), round(max($y1, $y2) + $t), $color);
    }
    $k = ($y2 - $y1) / ($x2 - $x1); //y = kx + q
    $a = $t / sqrt(1 + pow($k, 2));
    $points = array(
        round($x1 - (1+$k)*$a), round($y1 + (1-$k)*$a),
        round($x1 - (1-$k)*$a), round($y1 - (1+$k)*$a),
        round($x2 + (1+$k)*$a), round($y2 - (1-$k)*$a),
        round($x2 + (1-$k)*$a), round($y2 + (1+$k)*$a),
    );
    imagefilledpolygon($image, $points, 4, $color);
    return imagepolygon($image, $points, 4, $color);
}

$img = @imagecreatetruecolor($image_width, $image_height);
imagefill($img, 0, 0, imagecolorallocate($img, $bg_color['r'], $bg_color['g'], $bg_color['b']));

$height_ratio=$image_height/max($values);
$width_ratio =$image_width/(count($values)-1);
$prev_x=-1;
$prev_y=-1;
for ($i=0;$i<count($values);$i++) {
if ($prev_x>-1 && $prev_y>-1) {
    imagelinethick($img, $prev_x, $prev_y, $i*$width_ratio, $values[$i]*$height_ratio, imagecolorallocate($img, $line_color['r'], $line_color['g'], $line_color['b']),$line_thickness);
    }
$prev_x=$i*$width_ratio;
$prev_y=$values[$i]*$height_ratio;
}
header ('Content-type: image/png');
imagepng($img);
imagedestroy($img);
?>

Note that the above code needs to be in a separate file and embedded as an image.

[xuexue]

sir, how can i make this code run? o?

[xuexue]

sir, how could i make this code run?

[cwarn23]

Sorry for the late reply. To run it just copy the above code into a separate file. Then in your main file place the following code.

<?php
echo '<img src="graphgenerator.php">';
?>

Then it should generate the graph as an image using the script above. And note graphgenerator.php is the code in post #10.

[xuexue]

sir, ive tried the code, however, it does not display anything, T_T

[cwarn23]

Well copy and past the code in post #10 then as a test load that exact file on your browser (without any other code/files) to test if you have the gd library installed. Then see if there are any error messages when opening the file directly.

[xuexue]

i think i dont have that gd library sir, do you know where can i get it?

[cwarn23]

I would suggest following the manual at http://www.php.net/manual/en/image.requirements.php

[xuexue]

okei..let me rephrase my question, how can i make a line graph using php? or even javascript..