php/gd graph interaction help

[kopander]

Hi all. I'm using php with gd library to create a graph, plotting points onto the image as filled ellipses. I would like to make these plotted points interactive, so that they can be 'pressed'.

Is it possible to somehow have actions associated with drawn points? So, for example, that if a point (ellipse) on the image is pressed, that points colour changes, or displays that points value, etc. If its any help this is the bit of code which currentlydraws the points.

//Plot the points
for ($i=0; $i<count($graphValues)-1; $i++)
{imagefilledellipse($image, $i*$gridW, ($imgHeight-$graphValues[$i]),
5, 5, $colorBlue);}


Thanks very much for any advice on how to go about doing this!

[rlemon]

Hi all. I'm using php with gd library to create a graph, plotting points onto the image as filled ellipses. I would like to make these plotted points interactive, so that they can be 'pressed'.

Is it possible to somehow have actions associated with drawn points? So, for example, that if a point (ellipse) on the image is pressed, that points colour changes, or displays that points value, etc. If its any help this is the bit of code which currentlydraws the points.

//Plot the points
for ($i=0; $i<count($graphValues)-1; $i++)
{imagefilledellipse($image, $i*$gridW, ($imgHeight-$graphValues[$i]),
5, 5, $colorBlue);}


Thanks very much for any advice on how to go about doing this!

after returing the image to the page you can also create a php function to 'print' out a imagemap accosiated with said image.

Using the same technique you can map out the 'regions' for the map and assign links or event capture functions to the 'points' on the graph.

http://www.htmlhelp.com/reference/html40/special/map.html

[kopander]

Slowly getting there. I get the coordinates using the functions:
//Assign x and y coordinates
for ($i=0; $i<count($graphValues)-1; $i++)
{ $x[]=7+$i*$gridW;}
for ($i=0; $i<count($graphValues)-1; $i++)
{ $y[]=($imgHeight-$graphValues[$i]);}

But still can't figure out how to make each point be made into an 'area' in the html map code:
<MAP NAME=mymap> <AREA HREF="/link/" SHAPE=CIRCLE COORDS="5,5, 10"> <AREA HREF="/link2/" SHAPE=CIRCLE COORDS="105,5, 10"> <AREA HREF="/link3/" SHAPE=CIRCLE COORDS="205,5, 10 "> </MAP> <IMG SRC="graph.png" ALT="Graph" USEMAP="#mymap">
How could I get each individual coordinate into the 'area' of the image map.

Any ideas how to go about this? Thanks

[viratigo]

Slowly getting there. I get the coordinates using the functions:
//Assign x and y coordinates
for ($i=0; $i<count($graphValues)-1; $i++)
{ $x[]=7+$i*$gridW;}
for ($i=0; $i<count($graphValues)-1; $i++)
{ $y[]=($imgHeight-$graphValues[$i]);}

But still can't figure out how to make each point be made into an 'area' in the html map code:
<MAP NAME=mymap> <AREA HREF="/link/" SHAPE=CIRCLE COORDS="5,5, 10"> <AREA HREF="/link2/" SHAPE=CIRCLE COORDS="105,5, 10"> <AREA HREF="/link3/" SHAPE=CIRCLE COORDS="205,5, 10 "> </MAP> <IMG SRC="graph.png" ALT="Graph" USEMAP="#mymap">
How could I get each individual coordinate into the 'area' of the image map.

Any ideas how to go about this? Thanks


youd have to have a variable $mymap and append the coords to it in a loop. if you only want a line of information displayed when you mouseover the point, id suggest using a title="title" tag, as opposed to creating a new link which could be more work for you.

im not sure if my explanation was clear, tbh i am not especially experienced with image maps.

[rlemon]

$cords = array();
$cords[0] = "250,5,0";
foreach($resultSet as $key => $value)
{
print '<AREA HREF="link" SHAPE="CIRCLE" COORDS="'.$value.'">';
}

[kopander]

$cords = array();
$cords[0] = "250,5,0";
foreach($resultSet as $key => $value)
{
print '<AREA HREF="link" SHAPE="CIRCLE" COORDS="'.$value.'">';
}
Thanks rlemon!! Got it working after a couple of tries, should have everything as I need after a few more changes!

Slowly starting to get all this php stuff. Thanks again :thumbsup: