{"id":256,"date":"2010-03-26T19:59:36","date_gmt":"2010-03-26T18:59:36","guid":{"rendered":"http:\/\/www.webmaid.de\/?p=256"},"modified":"2010-03-29T07:38:19","modified_gmt":"2010-03-29T06:38:19","slug":"heatmap-in-php-2-teil-grafische-auswertung","status":"publish","type":"post","link":"https:\/\/www.webmaid.de\/2010\/03\/heatmap-in-php-2-teil-grafische-auswertung\/","title":{"rendered":"Heatmap in PHP &#8211; 2. Teil: Grafische Auswertung"},"content":{"rendered":"<p>In unserem ersten Teil <a href=\"https:\/\/www.webmaid.de\/2010\/03\/heatmap-in-php\/\">Heatmap in PHP<\/a> wurde bereits beschrieben, wie man die Klicks eines Users speichern kann und welche Variante die &#8222;Beste&#8220; (f\u00fcr den Server ist). Im zweiten Teil werden wir nun aufzeigen, wie man die gesammelten Werte darstellen lassen kann.<br \/>\n<!--more--><br \/>\nDa wir ein Bild malen wollen, brauchen wir in PHP die Funktion imagecreatetruecolor, welche Abh\u00e4ngig von der PHP und der GD &#8211; Version ist. Wir erzeugen in PHP mit GD ein Bild und zeigen dies auf der Seite mittels Javascript als gro\u00dfes Hintergrundbild im Body auf der Seite an. Um die Bildgr\u00f6\u00dfe zu minimieren, sollte man aus den Daten die gr\u00f6\u00dfte x\/y-Position ermitteln und das Bild daran anpassen.<\/p>\n<pre><code>&lt;?php\r\n$x = ermittleMaxX();\r\n$y = ermittleMaxY();\r\n$res = imagecreatetruecolor($x, $y);\r\nif($res) {\r\n   \/\/ Farbe fuer die Punkte\r\n   $color = imagecolorallocate($res, 255, 0, 0);\r\n   \/\/ Wir nehmen mal an, dass alle Werte in einer CSV-Datei sehen, diese unter $fhandle geoeffnet ist\r\n   while(!feof($fhandle)) {\r\n      \/\/ Alle Werte auslesen\r\n      $values = fgetcsv($fhandle, 15000, ';', '\"');\r\n      \/\/ Und einen Punkt anzeigen auf dem Bild\r\n      imagefilledellipse($image, $values[1], $values[2], 3, 3, $color);\r\n   }\r\n   \/\/ Bild ausgeben\r\n   header('Content-type: image\/jpg');\r\n   imagejpeg($img);\r\n   imagedestroy($img);\r\n} else {\r\n  \/\/ Fehlerhandling\r\n}\r\n?&gt;<\/code><\/pre>\n<p>Wenn man jedoch eigene Hintergrundbilder benutzt und andere Teile der Webseite das Hintergrundbild \u00fcberdecken, dann kann man auch einen div absolut positionieren, \u00fcber 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 \u00fcberdeckt wird.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine einfache Heatmap in PHP und Javascript erstellen inkl. Performance-Tipps.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/posts\/256"}],"collection":[{"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":2,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":284,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/posts\/256\/revisions\/284"}],"wp:attachment":[{"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmaid.de\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}