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 point is highlighted, or displays that points value, etc.
In case its any help, below is the code I have so far to generate the graph:
<?
//Code edited from http://www.php.net/manual/en/ref.image.php
header("Content-type: image/png");
require_once ('mysql_connect.php'); // Connect to the db
$query = "SELECT KOL FROM small";
$result = @mysql_query ($query); // Run the query
//Fetch the values from database
while ($row = mysql_fetch_array($result)) {
$Values[] = $row[0];}
// Define variables
$imgWidth=800;
$imgHeight=400;
$graphspacing=0.07;
$grid=25;
//Scales number of vertical grid lines for the number of data to print
$gridW=$imgWidth/(count($Values)-1);
$min=0;
$max=0;
//Get min and max values to scale image
for ($i=0; $i<count($Values); $i++){
if ($Values[$i]>$max){$max=$Values[$i];}
}
//Min values are less the maximum...
$min = $max;
for ($i=0; $i<count($Values); $i++){
if ($Values[$i]<$min){$min=$Values[$i];}
}
for ($i=0; $i<count($Values); $i++){
$graphValues[$i] =
($Values[$i] - $min*(1-2*$graphspacing)) *
(($imgHeight*(1-$graphspacing))/($max-$min*(1-2*$graphspacing)));
}
// Create image and define colors
$image=imagecreate($imgWidth, $imgHeight);
$colorWhite=imagecolorallocate($image, 255, 255, 255);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);
// Create border around image
imageline($image, 0, 0, 0, $imgHeight, $colorGrey);
imageline($image, 0, 0, $imgWidth, 0, $colorGrey);
imageline($image, $imgWidth-1, 0, $imgWidth-1, $imgHeight-1, $colorGrey);
imageline($image, 0, $imgHeight-1, $imgWidth-1, $imgHeight-1, $colorGrey);
// Create grid
for ($i=1; $i<($imgWidth/$gridW); $i++)
{imageline($image, $i*$gridW, 0, $i*$gridW, $imgHeight, $colorGrey);}
for ($i=1; $i<($imgHeight/$grid); $i++)
{imageline($image, 0, $i*$grid, $imgWidth, $i*$grid, $colorGrey);}
//Plot the points
for ($i=0; $i<count($graphValues)-1; $i++)
{imagefilledellipse($image, $i*$gridW, ($imgHeight-$graphValues[$i]),
5, 5, $colorBlue);}
// Output graph and clear image from memory
imagepng($image);
imagedestroy($image);
?>
Thanks very much for any advice on how to go about doing this!
