Zeichnen mit PHP – ein Liniendiagramm

Heute möchte wir noch etwas mit PHP zeichnen: ein Liniendiagramm.

Im letzten PHP Tutorial haben wir ein Bild erstellt, welches eine Umrahmung sowie ein Rastergitter hatte (Tutorial: Raster mit PHP zeichnen). Das ist Grundvorraussetzung für unser Liniendiagramm, welches wir nun zeichnen wollen.

1. Vorüberlegung

Wir brauchen ein Bild, worauf wir zeichnen wollen.

Grafiken: Bilder und Graphen mit PHP zeichnen

Das haben wir mit dem vorherigen Tutorial bereits gemacht. Jetzt können wir das alte Tutorial entweder mit dem neuen Liniendiagramm modifizieren, oder ein neues Bild zeichnen.

Falls du das Rastertutorial nicht modifizieren möchtest, lege folgende Dateien an:

• index.php (diese Datei rufen wir später auf, um unser Bild darzustellen)
• bild.php (in dieser Datei wird das Bild gezeichnet und an die index.php übergeben)

Lege die Dateien bestenfalls in deinem Xampp/htdocs Ordner, also im Localhost ab. Kein XAMPP? Hier das Tutorial zu XAMPP.

2. PNG-Bild mit PHP erstellen

Wenn du das Rastertutorial nur modifizieren möchtest, springe bitte zum nächsten Punkt. Andernfalls starte ab hier mit deinem Code.

Code für bild.php

<?php
header("Content-type: image/png");
$imgWidth = '200';
$imgHeight = '100';
$theImage = imagecreate($imgWidth, $imgHeight);
$colorGrey = imagecolorallocate($theImage, 215, 215, 215);
$colorBlue = imagecolorallocate($theImage, 0, 50, 255);

Jetzt haben wir der Datei die header-Information gegeben, das der Browser es als PNG Image ausgeben soll. Außerdem haben wir die width (Breite) und height (Höhe) des Bildes festgesetzt.
imagecreate() erstellt ein neues Bild mit den gewünschten Abmaßen.
$colorBlue enthält nun den RGB Farbcode für grau. Diesen brauchen wir, um unseren Linien Farbe zu geben.

Gut, soweit das grundlegende um unsere Linien zu erstellen.

3. Werte für unsere Linien festlegen

Als nächstes benötigen wir mögliche Werte, die in unserer Grafik dargestellt werden sollen.

Code für bild.php

$wert[0] = '50';
$wert[1] = '100';
$wert[2] = '24';
$wert[3] = '30';
$wert[4] = '90';
$wert[5] = '102';
$wert[6] = '56';
$wert[7] = '23';

Unsere Werte sind fiktiv und im Grunde erdachte mögliche Werte z.b. Besucherzahlen oder Salesstatistiken.
Diese möchten wir nun grafisch auch in unser Bild übertragen.

4. Werte in das Bild zeichnen

Hier gehe ich anders vor als in vielen Tutorials im Netz.
Viele machen hier den Fehler, Höhe und Breite des Bildes einfach nach der Grafik anzupassen. Das ist dann nicht mehr variabel und man muss immer nacharbeiten, wenn mehr Werte in die Grafik hinzu kommen.
Klar wäre das für ein Tutorial am einfachsten, aber ich gehe da einen anderen Weg, der auf den ersten Blick komplizierter wirkt.

Nachfolgend der Code, welche unsere grafischen Linien zeichnet.

Code für bild.php

$countBalken = count($wert);
for($i=0;$i<$countBalken;$i++){
if($maxHeight < $wert[$i]){
$maxHeight = $wert[$i];
}
}
$dynWidth = round(($imgWidth-2) / ($countBalken-1), 0);
@$dynHeight = ($imgHeight-1) / $maxHeight;
for ($i=0; $i<$countBalken; $i++){
$aktNewSize = @round($dynHeight * $wert[$i]);
$aktNewSize2 = @round($dynHeight * $wert[$i+1]);
if($i+1 &lt; $countBalken){
imageline($theImage, $i*$dynWidth, ($imgHeight-$aktNewSize),
($i+1)*$dynWidth, ($imgHeight-$aktNewSize2), $colorBlue);
}
}

Gehen wir den Code durch, da er doch recht umfangreich ist.

Der count() Befehl ermittelt ersteinmal, wieviel Werte ($wert) wir haben. D.h. wieviel Linienpunkte wir setzen möchten.
Die erste for-Schleife setzt in $maxHeight den größten Wert ein, den es bei allen Werten gibt. Diese brauchen wir für die maximale Höhe in unserer Grafik. Zwar hat die Grafik eine festgelegte Höhe, aber in wieviel diese unterteilt wird, ist variabel. D.h. 102 hatten wir in den $wert[2], was der höchste Wert ist. Unser Bild ist mit 100 Pixel höhe festgelegt. Daher entsprechen 102 Einheiten 100 Pixel. Das ist variabel und Vorraussetzung um dynamische Grafiken zu erstellen.

dyn = dynamisch
width = Breite
height = Höhe

$dynWidth
Es wird ein auf Komma Null gerundeter Wert ermittelt. Dieser wird die Bildbreite (in unserem Beispiel 200 Pixel) durch die Anzahl der darzustellenden Balken (Linien) teilen. Jede Linie hat dabei noch einen Abstand.
$dynHeight erhält ein @, da damit Fehlerausgaben unterbunden werden. Manche Werte sind in sich nicht teilbar, was eine Fehlermeldung zur Folge hätte. (ist aber irrelevant)

Es folgt die 2. for-Schleife. Diese durchläuft so oft, wie es Anzahl Balken (Werte) gibt. Bei jedem Durchgang wird eine Linie rechnerisch ermittelt und mittels imageline() gezeichnet.

5. Die Grafik ausgeben

Wer das Rasterbild modifiziert, braucht diesen Schritt nicht.

Code für bild.php

imagepng($theImage);
imagedestroy($theImage);
?>

Mit imagepng() geben wir das Bild frei, um es darzustellen. Am Anfang haben wir die header-Information bereits festgelegt. Das Bild wird somit im Browser als png-Bild ausgegeben. Im Fehlerfall gibt es nur wirre Zeichen, also den Bildcode.
imagedestroy() gibt den Speicher wieder frei.
Under ?> beendet das Script – wir sind mit der bild.php endlich fertig!

6. Bild anzeigen in der index.php

Nun kommt unsere index.php Datei dran. Diese rufen wir auf, um das Bild anzuzeigen. Vorher ist etwas Code notwendig.

<?php
echo 'Unser Linien-Bild&lt;br /&gt;
<img src="bild.php" alt="Fehler beim anzeigen" />';
?>

Schön ist hier, dass die <img> Auszeichnung von HTML auch eine PHP Datei ansteuern kann. Wir erhalten also als Bild unsere mit PHP gezeichnete Grafik zurück. alt steht für Alternativer Text und wird angezeigt, wenn das Bild nicht geladen werden konnte. Die Angabe ist optional.

Rufe nun dein Localhost auf und steuer die index.php Datei an.

Grafiken: Bilder und Graphen mit PHP zeichnen

Wenn alles richtig war, müsstest du das folgende Bild erhalten… (Siehe Bild)
Falls du das Rastertutorial nicht gemacht hast, fehlen dir die Rasterlinien.