Grafiken mit PHP erstellen

Zur Illustration, wie man mit PHP dynamisch Grafiken erzeugen kann, sollen hier einige Diagramme erstellt werden. Das erste Beispiel ist ein Liniendiagramm auf einem Raster (Abbildung A).

Abbildung A

Liniendiagramm, erzeugt von grid.php.

Die Seite hat den Namen grid.php (Listing A). Zum Aufrufen einer dynamisch erzeugten Grafik auf einer Webseite genügt es, einen Link zu der PHP-Seite zu setzen, welche die Grafik an den Browser schickt. Das IMG-Tag ist hierfür bestens geeignet, wie das folgende Beispiel zeigt:

‹img src="grid.php" />

Nun zum eigentlichen Code, der die Grafik erzeugt. Hier die einzelnen Bestandteile des Quellcodes von grid.php:

Zuerst werden die Werte für das Diagramm angegeben. Für dieses Beispiel sind sie in einem Array fest gespeichert, aber man könnte sie ebenso gut aus einer XML-Datei, einem Formular oder einer Datenbank übernehmen. Die Werte reichen von 0 bis 250 (den Abmessungen der Grafik in Pixeln). Der Wert legt die Anfangsposition jedes Diagrammsegments im Raster fest. Falls man Werte zwischen 0 und 100 verwenden möchte (wie bei Prozentangaben), muss man den jeweiligen Wert nur mit 2,5 multiplizieren, um die Pixelposition im Raster zu bestimmen.

Als nächstes wird ein PNG-Header verschickt und Breite und Höhe der Grafik werden festgelegt:


// PNG-Grafik definieren
header("Content-type: image/png");
$imgWidth=250;
$imgHeight=250;

Durch das Verschicken eines image-Headers kann man den Browser dazu bringen, die PHP-Seite als Grafik zu betrachten und sie entsprechend auf dem Bildschirm darzustellen. Die vom Server versendeten Informationen sind ein binärer Stream, den das PHP-Programm ausgibt.

PNG steht übrigens für Portable Network Graphic, ein verlustloses Grafikformat, das 1995 in Reaktion auf juristische Probleme mit dem patentierten LZW-Algorithmus von GIF entwickelt wurde.

Nun können das image-Objekt instantiiert und die Farben für das Diagramm festgelegt werden:


// image-Objekt erstellen und Farben definieren
$image=imagecreate($imgWidth, $imgHeight);
$colorWhite=imagecolorallocate($image, 255, 255, 255);
$colorGrey=imagecolorallocate($image, 192, 192, 192);
$colorBlue=imagecolorallocate($image, 0, 0, 255);

Der Hintergrund soll weiß sein, das Raster grau und das Liniendiagramm blau. Durch Erstellen weiterer Variablen und Festlegen anderer RGB-Werte lassen sich Farben problemlos ändern oder hinzufügen.

Als Nächstes wird ein grauer Rand für die Grafik erzeugt, und zwar für jede Kante einzeln mithilfe der imageline-Funktion:


// Rand für die Grafik erzeugen
imageline($image, 0, 0, 0, 250, $colorGrey);
imageline($image, 0, 0, 250, 0, $colorGrey);
imageline($image, 249, 0, 249, 249, $colorGrey);
imageline($image, 0, 249, 249, 249, $colorGrey);

Es gibt jeweils zwei X/Y-Koordinaten (in Pixeln). Jedes der Wertepaare in der imageline-Funktion gibt einen Start- und Endpunkt innerhalb der Grafik an.

Zur Vervollständigung des Rasters werden im regelmäßigen Abstand von 25 Pixeln auf der X- bzw. Y-Achse weitere graue Linien hinzugefügt:


// Raster erzeugen
for ($i=1; $i<11; $i++){
imageline($image, $i*25, 0, $i*25, 250, $colorGrey);
imageline($image, 0, $i*25, 250, $i*25, $colorGrey);
}

Position (0,0) bezieht sich auf die linke obere Ecke des Rasters und Position (250,250) auf die untere rechte Ecke. Es gibt 10 Linien auf jeder Achse im Abstand von 25 Pixeln, also insgesamt 250 Pixel (die Abmessungen der Grafik).

Zur Erzeugung des Liniendiagramms werden einfach alle Werte des Arrays in einer Schleife durchlaufen und so Start- und Endpunkt jedes Liniensegments bestimmt:


// Liniendiagramm erzeugen
for ($i=0; $i<10; $i++){
imageline($image, $i*25, (250-$graphValues[$i]),
($i+1)*25, (250-$graphValues[$i+1]), $colorBlue);
}

PHP erzeugt automatisch eine blaue Linien zwischen aufeinanderfolgenden Koordinaten. Dieses einfache Beispiel benutzt nur zehn Werte, aber man kann dieses Verfahren leicht ausbauen und komplexe Diagramme wie Börsenindizes oder Ähnliches erstellen.

Schließlich müssen noch die Grafik zur Ausgabe an den Browser geschickt und der Speicherplatz für die Grafik auf dem Server wieder freigegeben werden:


// Diagramm ausgeben und Grafik
// aus dem Speicher entfernen
imagepng($image);
imagedestroy($image);
?>


« vorherige Seite
1
2
3
nächste Seite » 
Inhalt
Die GD Library
Liniendiagramme
Säulendiagramm