generation of score chart

[solvesak]

Please look in the attachment.
The first chart shows the score vs contestant images(score wise ordered) graph generated simply using php.
BUT i need the second chart (bottom 1) where chart does not proceed down but only those images of contestants are brought to next line which are relatively very close to previous image (tht overlap can occur)
Table used consists of only
img_path(of contestant) and score.

while($row = mysql_fetch_array($result)) 
{
for($k=1;$k<=$row['score'];$k++)
echo "__";
}
echo '<img src="'.$row['img_path'].'.jpg" width=30 height=30 title="'.$row['img_path'].'.jpg SCORE='.$row['score'].'" alt="'.$row['img_path'].'.jpg SCORE='.$row['score'].'">';
echo "</BR>";
}

[iamthwee]

Any reason why you're not using free open source php graphing libraries...

Or if flash free fusioncharts.

[solvesak]

Any reason why you're not using free open source php graphing libraries...

Or if flash free fusioncharts.

I dont thing graphing library will work in my case because i am not concerned with exact scale thing but the visibility aspect... it should appear like the second diagram...
Where pictures of people are arranged in the graph like :
stacking of images occur if the score among thm causing image overlap otherwise the image appears near to scale in th first line.

[diafol]

That's a lovely little project.
Few ways you can do this. Perhaps the easiest and most frowned upon method would be to use a single pixel image for the line length or 'padding'

e.g.

$results = array(

  array('length' => 19.6, 'img' => 'john.jpg'),
  array('length' => 12.4, 'img' => 'delyth.jpg'),
  array('length' => 5.2, 'img' => 'alun.jpg'),

};
//you'd probably get this info from DB though. If so, just use a while loop to
exract data
echo "<table>";
foreach($results as $person){
   echo "<tr><td><img src="line.gif" width="{$person['length']};?>px" /><img src="{$person['img']}"</td></tr>";
}
echo "</table>";

That's a bare bones approach. Plenty of scope for customizing. One obvious thing to change would be the length. Your score will probably not match the length req'd. So multiply it by a constant, e.g. if max_length = 600px and your max_poss_score = 40:

length = score / max_poss_score * max_length - personimg_length/2 (take away half the person img length so score is down middle of image).

The second part is more difficult. You may get some joy from relative/absolute positioning. Your personimg must be a fixed length (obviously).

So you'll need to check the from and to positions of each 'row' of images before you can place one there.

e.g. image at 19.6 (294px) which means 284px to 204px if img length is 20px)

check a multidimensional array for values that fall inside the range. if they do , go to the next 'row' and check that and so on. If there is no room by the end, create a new 'line' and add the values to that.

Once all pics have been added, display.

$line[0]= array(
   array('img'=> john.jpg, 'begin' => 284, 'end' => 304) //you could get away with just storing the begin value as end can be calculated.
);

Perhaps I've overcomplicated it. WOuldn't be the first time :)

[diafol]

Sorry just read that back:

width="{$person['length']};?>px"

should be

width="{$person['length']}px"

[solvesak]

Thanks Ardav It worked :D I was facing the problem with the size thing which i sorted out. Thanks a lot :)

Right now i am looking for How to zoom those images on mouse over and that too fixed position zoom without distorting the position of other images. The zoom codes which are available are using the list thing which is creating problem in my chart and rest all destort my chart.

[diafol]

Perhaps you can use some sort of lightbox or popup with will produce a layer on top, therby not distorting the chart.