zeichnen mit PHP: Balkendiagramm – erste Vorbereitungen

Bevor wir mit dem nächsten Tutorial beginnen, welches wieder um das zeichnen mit PHP geht, ein paar grundlegende Gedanken.

Das Balkendiagramm

Was muss vor der Programmierung beachtet werden?

1. das Bild besitzt eine fixe Höhe und Breite
2. vertikale Raster werden nicht unbedingt benötigt
3. die Breite eines Balkens kann variabel gestaltet werden
4. Platz zwischen einzelnen Balken sollten genutzt werden

Kurzer Exkurs in mein Programmierleben:
Als ich mich vor einigen Wochen intensiv mit der grafischen Programmierung beschäftigt habe, bin ich an meine Grenzen gestoßen. Nicht wegen der Programmierung, also technisch gesehen, sondern an der Rechnung für verschiedene Dinge.

Diese kleinen Denkanstöße, welche ich hier gebe, sind mir sehr wichtig. Jeder der mit der Programmierung beginnt, sollte es natürlich möglichst einfach beigebracht bekommen. Das versuche ich zwar immer sehr zu vereinfachen, gebe aber meine gewonnen Erfahrungen mit dazu.
Im Vergleich zu anderen Tutorials werden hier weitere Schritte angesprochen, um Denkanstöße und Lösungen zu bieten.
Gut, weiter geht es.

1. fixe Bildgröße

Um Werte in einem Diagramm darzustellen, benötigt man Skalen. Eine horizontale, sowie eine vertikale. Bei der Programmierung hat man eine feste Bildgröße, worin alle Daten korrekt dargestellt werden sollen.
Die erste Hürde besteht darin, die Anzahl der Werte (z.b. Anzahl der Balken) sowie die verschiedenen Größen der Werte richtig in maximaler Größe in die Grafik zu zeichnen.

Ermittelt werden muss also die Anzahl der Balken. Dies kann man Beispielsweise so:

Balkenbreite = Bildbreite / Balkenanzahl

Jetzt wissen wir, wie breit ein Balken sein müsste, damit alle innerhalb der gewünschten Breite des Bildes platziert werden können.

Bei der Höhe müssen wir etwas anders vorgehen. Wir müssen ermitteln, wie hoch der größte Wert ist.
Ich nehme nun mal 5 Balken, welche folgende Werte erhalten:

10, 25, 50, 20, 18

Was ist der höchste Wert? Genau, 50. Hierfür könnte man mit einer foreach oder for Schleife alle Werte durchlaufen und den höchsten ermitteln. Aber auch ein Array mit sort() sortieren wäre möglich.

Ist das geschafft, gibt es die tolle Dreisatz Rechnung.
Unsere Bildhöhe, Beispielsweise 200 Pixel entsprechen 100%. 50 ist unser höchster Wert, welcher auch 100% entspricht. Was ist der Wert 18 in Prozent? Dies rechnen wir gleich aus:

200 Pixel / 50 = 4 Pixel
4 Pixel x 18 = 72 Pixel

So einfach könnte man dies sich ausrechnen und auch ein kleines PHP Script daraus bauen. Wichtig ist, dass 200 Pixel und der Wert 50 als 100% zu betrachten sind. Alle weiteren lassen sich wie oben dargestellt einfach ausrechnen. Der ausgerechnete Wert 18 ergibt also 72 Pixel. Das hat gerade gepasst, könnte aber auch mit Komma-Stellen passieren. Hierfür sollten wir die Werte auf 0 stellen Nachkomma runden. D.h.

round ( $errechneter_wert , 0 );

Der 2. Parameter bestimmt, nach wieviel Stellen Nachkomma gerunden werden soll. In unserem Falle auf Ganzzahl. Wir können schlecht Pixel teilen

Ab nun sollte alles weitere klar sein. Weiter geht es mit den nächsten Denkanstößen..

2. vertikale Raster nicht benötigt

Die Zeichenfunktion von PHP benötigt etwas Rechenpower. Das merkt man aber erst, wenn viel Grafiken erstellt werden. Beispielsweise Besucherzähler die nicht gecached, sondern neu generiert und ausgegeben werden.

Für ein einfaches Balkendiagramm benötigen wir also keine vertikalen Linien, da die Balken bereits vertikal liegen. Außnahme wäre ein Balkendiagramm, welches horizontal die Ergebnisse präsentiert.

3. variable Balkenbreite

Wie in Punkt 1 auch, kann die breite der Balken berechnet werden. Für den Entwickler ist nun die Überlegung, lässt er Platz für weitere Balken oder stellt ein Balken 100% Breite dar?

Angenommen wir machen eine Grafik als Besucherzähler, welchen den aktuellen Monat darstellt.
Es ist nun angenommen Mitte des Monats. Füllen die 5 Balken die komplette Bildbreite oder nur die Hälfte des Bildes, damit für die anderen Balken noch Platz optisch reserviert wird?
Unter 1. findest du sicher die Antwort, sobald du die ersten Testgrafiken programmierst und die Balkenbreite errechnest.

4. Platz zwischen Balken

Nichts ist schlimmer als zusammengeklatschte Balken, die keinerlei Übersicht bringen.
Wie unter Punkte 1 und Punkt 3 angesprochen, kann die Balkenbreite berechnet werden. Wie wäre es nun bei dem zeichnen der Balken den Startpunkt + 1 Pixel zu nehmen, der Endpunkt – 1 Pixel? Somit sind am Anfang und Ende des Bildes je 1 Pixel vom Bildrand, aber 2 Pixel zwischen den einzelnen Balken.
Damit erspart man sich unnötige Rechnerei. Hier ein Beispiel meiner Programmierung (Ausschnitt beim zeichnen innerhalb einer for Schleife)

imagefilledrectangle($theImage, $dynWidth+1, $imgHeight-$aktNewSize,
$dynWidth-1, $imgHeight, $colorKontur);

$dynWidth besitzt die Breite eines Balkens, aber der Startwert wird um 1 Pixel erhöht.
Beim Endwert wird $dynWidth – 1 (Pixel) berechnet, um den Balken nicht bis zur errechneten Länge zu zeichnen, sondern 1 Pixel einzukürzen. Damit ist mehr Abstand für den nächsten Balken geboten.

Wie du sicher bereits bemerkst, würde es auch reichen nur den Start- oder Endwert zu verändern. Damit wäre aber am Anfang oder am Ende aller Balken eine Abweichung.

Bei den beiden vorgestellten Werten könnte man noch einen Startwert einsetzen. Beispielsweise um gleich 20 oder 30 Pixel zu erhöhen, also die ganze Grafik nach rechts zu verschieben. Dies benötigen wir etwas später, wenn wir die Balken mit Einheitsmaße versehen. Balken ohne Wertangaben sind unschön..

Beispiel:

$abstand = '30′; #Abstand von links
imagefilledrectangle($theImage, $dynWidth+1+$abstand, $imgHeight-$aktNewSize,
$dynWidth-1+$abstand, $imgHeight, $colorKontur);

Nun wäre unser Balken um 30 Pixel nach rechts verschoben.
Solche Dinge sind Erweiterungen wenn alles passt. Das Problem hierbei ist wieder, die Bildbreite, die ja gesetzt ist. Der Bereich in dem die Grafik gezeichnet werden soll, verringert sich hingegen wieder. Im Beispiel um 30 Pixel.
Ist unser Bild also 200 Pixel breit, entsprechen 170 Pixel unsere 100%, da die übrigen 30 Pixel bereits zur Beschriftung der Werte reserviert sind.

Abschließende Worte

Ich hoffe kein Chaos hier verursacht zu haben. Wichtig waren mir grundlegende Denkweisen anzusprechne, die bei der Programmierung des nächsten Tutorials wichtig sind. Falls du einfach drauf los programmierst, wirst du früher oder später hier in diesem Artikel landen, um Antworten zur Problemlösung zu finden. Ich hoffe dir damit geholfen zu haben.

Das wichtigste:
Rechne unbedingt logisch im Kopf oder per Taschenrechner nach. Verwende anstelle einfache Zahlen auch etwas, wo du dir mehr vorstellen kannst. Ich nehme eine Besucher-Monatsstatistik. Ich weiß also Besucheranzahl und Anzahl der Tage. Dies vereinfacht Rechnungen ungemein.

Viel Erfolg!