Balkendiagramme in PHP mithilfe von GD-Funktionen

Graphische Darstellung erklären Umstände oft deutlicher als viele Worte. Damit keine teuren Tools angeschafft werden müssen, zeigt dieser Artikel wie mittels PHP ein dynamisches Balkendiagramm erstellt werden kann.

Wenn IT-Manager Berichte anfordern, kann man praktisch garantieren, dass er in diesen Berichten auch grafische Darstellungen der Zahlen erwartet. Man könnte zum Erstellen dieser grafischen Daten ein spezielles Reporting-Tool kaufen – oder man greift einfach auf die GD-Bildfunktionen^[1] innerhalb von PHP zurück. PHP ist gratis, und man kann die mitgelieferte GD-Bibliothek ohne jegliche Kosten erweitern. Daher ist es durchaus attraktiv, Daten mittels dieser kosteneffektiven Methode grafisch darzustellen. Der folgende Artikel zeigt, wie man mittels PHP ein dynamisches Balkendiagramm erstellen kann, das sich auf einer Webseite anzeigen lässt.

Bildkoordinaten für das Balkendiagramm

Ein Balkendiagramm besteht ganz einfach aus einer Reihe von Rechtecken, welche einen Zahlenwert (in bestimmten Einheiten) oder den Prozentsatz eines Maximalwerts repräsentieren. Jeder Balken beginnt am Nullpunkt und seine Länge setzt sich bis zum entsprechenden Maximalwert fort, bei konstanter Balkenbreite. In Bildkoordinaten ausgedrückt, beginnt das Rechteck also an der Koordinate (x1, y1) und erstreckt sich bis zur Koordinate (x2, y2). Dabei entspricht x1 der horizontalen Ausgangsposition, y1 der vertikalen Ausgangsposition, x2 der horizontalen Endposition und y2 der vertikalen Endposition. All diese Informationen werden aus einer Reihe von Werten (in Einheiten oder Prozentzahlen) gewonnen, die in entsprechende Bildschirmeinheiten umgewandelt werden. In diesem Beispiel werden dem PHP-Skript ein oder mehrere Datenwerte übergeben, aus denen eine Reihe von Rechtecken erstellt werden, die ein Diagrammbild erzeugen. Da es sich um dynamische Daten handeln wird, muss die Funktion zur Diagrammerzeugung in der Lage sein, Daten über den Query-String der Bildquelle zu empfangen:

<img src="chart_image.php?pt1=25&pt2=58&…">

Das PHP-Skript übernimmt dann diese Informationen, erzeugt das Diagrammbild und gibt das erzeugte Bild mit den gestalteten Balken zurück.

Zudem soll es möglich sein, um das Diagrammbild herum Ränder hinzuzufügen. So lässt sich das Diagramm um Bilddaten als Text ergänzen und an den Achsen können Markierungen hinzugefügt werden.

Zuerst definiert man einige lokale Variablen, die konstante Information festhalten:

Diese Variablen haben folgende Funktion:

• $bar_w ist die Balkenbreite für jeden einzelnen Balken im Diagramm.
• $max_y ist der maximale Y-Wert im Diagramm.
• Die $margin_x-Variablen geben die Breite der Ränder an.
• $y_div ist der Abstand der Markierungen auf der Y-Achse.
• $rects ist das Array der Rechteckpunkte.

Nun wird es Zeit, die einzelnen Rechtecke zu berechnen, welche die Daten repräsentieren. Man iteriert hierzu über die Liste von ptN-Elementen, die als GET-Information (Query-String) gesendet werden, um die Rechteckpunkte zu konstruieren (Listing A).

Listing A

Dieser Code speichert die Rechteckskoordinaten im Array $rects als Array von Punkten: [x1, y1, x2, y2]. Der logische Ursprung der Koordinatendaten ist die Position links unten in der graphischen Darstellung, und der Ursprung des Bildes ist die obere linke Position des Bildes. Deshalb müssen die Daten zu Bildkoordinaten konvertiert werden. Dazu berechnet man einfach den Wert auf der y-Achse ($margin_top + $max_y) und subtrahiert den Datenwert ($_GET[$pt]) – wobei $Pt "Pt" plus dem Iterationswert entspricht. Hierbei sind mehrere Datenpunkte zu berücksichtigen:

• Der y2-Wert liegt stets auf der y-Achse.
• Die x-Koordinatendaten werden berechnet, indem man den letzten x2-Wert als x1 nimmt und die Breite addiert, um die x2-Koordinate des neuen Rechtecks zu erhalten.
• Die Gesamtbildbreite entspricht dem letzten x2-Wert plus rechtem Rand, und die Gesamtbildhöhe ist die y-Achse plus unterer Rand.