In unserem ersten Teil Heatmap in PHP wurde bereits beschrieben, wie man die Klicks eines Users speichern kann und welche Variante die „Beste“ (für den Server ist). Im zweiten Teil werden wir nun aufzeigen, wie man die gesammelten Werte darstellen lassen kann.
Da wir ein Bild malen wollen, brauchen wir in PHP die Funktion imagecreatetruecolor, welche Abhängig von der PHP und der GD – Version ist. Wir erzeugen in PHP mit GD ein Bild und zeigen dies auf der Seite mittels Javascript als großes Hintergrundbild im Body auf der Seite an. Um die Bildgröße zu minimieren, sollte man aus den Daten die größte x/y-Position ermitteln und das Bild daran anpassen.
<?php
$x = ermittleMaxX();
$y = ermittleMaxY();
$res = imagecreatetruecolor($x, $y);
if($res) {
// Farbe fuer die Punkte
$color = imagecolorallocate($res, 255, 0, 0);
// Wir nehmen mal an, dass alle Werte in einer CSV-Datei sehen, diese unter $fhandle geoeffnet ist
while(!feof($fhandle)) {
// Alle Werte auslesen
$values = fgetcsv($fhandle, 15000, ';', '"');
// Und einen Punkt anzeigen auf dem Bild
imagefilledellipse($image, $values[1], $values[2], 3, 3, $color);
}
// Bild ausgeben
header('Content-type: image/jpg');
imagejpeg($img);
imagedestroy($img);
} else {
// Fehlerhandling
}
?>
Wenn man jedoch eigene Hintergrundbilder benutzt und andere Teile der Webseite das Hintergrundbild überdecken, dann kann man auch einen div absolut positionieren, über den kompletten Inhalt legen und dort das Hintergrundbild anzeigen lassen. Bei dieser Variante muss man darauf achten, dass die Hintergrundfarbe transparent ist, damit der komplette Inhalt nicht überdeckt wird.
Schreibe einen Kommentar