Werbung einblenden Werbung ausblenden


Home / Tutorials / PHP Handbuch / Charts generieren mit PHP


Charts generieren mit PHP

Alle kennen die berühmten Umfragen im Internet. Nimmt man an einer Umfrage teil, erhält man ein Bild, dass anhand einer Grafik, ein Tortendiagramm oder ein Balkendiagramm zeigt, wie bisher abgestimmt wurde. Jeder, der sich ein bisschen mit Excel auskennt, hat keine Probleme einzusehen, dass die Möglichkeit, statistische Daten grafisch aufzubereiten, erhebliche praktische Bedeutung hat. Für PHP gibt es eine Reihe von Skripten, die von J. Persson geschrieben wurden, mit denen es relativ einfach ist, Charts on the fly zu produzieren. Man kann sich das ganze Paket jpgraph hier downloaden. Die Skripte sind nicht nur sehr, sehr praktisch, sondern sie sind obendrein auch noch hervorragend dokumentiert. Es ist günstig, sich das unter Bildbearbeitung mit PHP bereits Erläuterte nochmals ins Gedächtnis zu rufen. Voraussetzung für die Nutzung dieser Bibliothek ist, dass das Gd-Modul bereits installiert ist. Die Bibliothek besteht aus insgesamt 14 Skripten, von denen man allerdings immer nur diejenigen braucht, die man via include in das eigene Programm einbindet. Die Bibliothek ist objektorientiert programmiert. Wer also genauer verstehen will, wie die Bibliothek arbeitet, kann das Kapitel objektorientierte Programmierung durchlesen. Für das Beispiel unten benötigen wir folgende Skripte aus der Bibliothek. Die Bibliothek kann man hier downloaden die Beschreibung hier. Wir finden diese im Ordner src, wenn wir das Paket jpgraph-1.5.3.tar.gz entzippen.
jpgraph_bar.php
jpgraph_dir.php
jpgraph_pie.php

Das Beispiel zeigt exemplarisch, wie man ein Torten bzw. ein Balkendiagramm zeichnen lassen kann. Das Beispiel besteht aus zwei Dateien. Der HTML Seite und dem Skript, grahpik.php.

Die HTML Seite sieht so aus:

<html><head><title>Balken und Tortendiagramme mit PHP</title></head>
<body>
<form action=beispiele/graphik.php>
<table border=1>
<tr><td colspan=3 align=middle>Grösse der Graphik definieren</td></tr>
<tr><td>Breite <input type=text name=breite></td><td>&nbsp;</td><td>Höhe <input type=text name=hoehe></td></tr>
<tr><td>Name der Eigenschaft</td><td align=middle>Wert der Eigenschaft<br><font size=1>Anteil an der Gesamtheit</font></td><td align=middle>Farbe der Eigenschaft<br><font size=1>Nur bei Tortendiagrammen</font></td></tr>
<tr><td><input type=text name=eigenschaft[]></td><td align=middle> <input type=text name=wert[] size=4> </td> <td align=middle> <select name=farbe1><option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select> </td> </tr>
<tr><td><input type=text name=eigenschaft[]></td><td align=middle><input type=text name=wert[] size=4></td><td align=middle><select name=farbe2><option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select></td> </tr>
<tr><td><input type=text name=eigenschaft[]></td><td align=middle><input type=text name=wert[] size=4></td><td align=middle><select name=farbe3><option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select></td> </tr>
<tr><td><input type=text name=eigenschaft[]></td><td align=middle><input type=text name=wert[] size=4></td><td align=middle><select name=farbe4><option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select></td> </tr>
<tr><td colspan=3 align=middle>
<table border=1 width=100%><tr><td>Balkendiagramm <input type=radio name=was value=bars> Tortendiagramm <input type=radio name=was value=pie></td></tr></table>
</td></tr>
<tr><td colspan=3 align=middle> Überschrift des Diagramms </td></tr>
<tr><td colspan=3 align=middle><input type=text name=ueberschrift></td></tr>
<tr><td colspan=3 align=middle>Text unten Diagramm </td></tr>
<tr><td colspan=3 align=middle><input type=text name=unterschrift></td></tr>
<tr><td colspan=3 align=middle>Farbe Beschriftung der x und y Achse (Balkendiagramm) <br>bzw. Farbe der Beschriftung der Tortenstücke (Tortendiagramm)</td></tr>
<tr><td colspan=3 align=middle><select name=farbeXY><option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select> </td></tr>
<tr><td colspan=3 align=middle>Farbe zwischen den Flächen</td></tr>
<tr><td colspan=3 align=middle><select name=farbef><option value=brown>braun<option value=black>schwarz<option value=red>rot<option value=blue>blau<option value=yellow>gelb<option value=green>grün</select> </td></tr>
<tr><td colspan=3 align=middle><input type=submit value="zeichnen"></td></tr>
</table>
</form>
</body></html>

So sieht das Formular dann aus: zeigen
Zu den Details dieses Formulars, z.B. der Bedeutung der eckigen Klammern [ ] in
<input type=text name=wert[] size=4>
siehe Formulare. Mit diesem HTML Formular können wir mit den gleichen Daten entweder ein Balken oder ein Tortendiagramm generieren. Der eigentliche Skript sieht dann so aus.

<?
include ("jpgraph.php");
include ("jpgraph_bar.php");
include ("jpgraph_pie.php");

if ($was == bars)
{
$datay=array($wert[0],$wert[1],$wert[2],$wert[3]);
$datax=array($eigenschaft[0],$eigenschaft[1],
$eigenschaft[2],$eigenschaft[3]);
$graph = new Graph($breite,$hoehe,"auto",-1);
$graph->SetShadow();
$graph->SetScale("textlin");
$graph->title->Set($ueberschrift);
$graph->xaxis->SetTickLabels($datax);
$graph->yaxis->title->Set($unterschrift);
$bplot = new BarPlot($datay);
$bplot->SetFillColor("$farbeXY");
$graph->Add($bplot);
$graph->Stroke();
}
else
{
$data = array($wert[0],$wert[1],$wert[2],$wert[3]);
$graph = new PieGraph($breite,$hoehe);
$graph->SetShadow();
$graph->title->Set($ueberschrift);
$p1 = new PiePlot($data);
$p1->setLegends(array($eigenschaft[0],$eigenschaft[1],
$eigenschaft[2],$eigenschaft[3]));
$p1->SetSliceColors(array($farbe1,$farbe2,$farbe3,$farbe4));
$p1->SetFontColor($farbeXY);
$graph->Add($p1);
$graph->Stroke();
}
?>

Lassen wir den Skript laufen, erhalten wir, je nachdem ob wir ein Tortendiagramm oder Balkendiagramm gewählt haben, eine Graphik die entweder so aussieht

oder so

Will man den Skript laufen lassen, macht man am besten einen neuen Ordner in der Dokument Root des HTTP Servers. z.B. chart. Dort speichert man folgende Dateien ab:
Die benötigten Skript aus der Bibliothek:

jpgraph_bar.php
jpgraph_dir.php
jpgraph_pie.php
jpgraph.php

die HTML Seite und

den eigentlichen Skript. Er muss den Namen graphik.php haben, weil hierauf das Attribut des Formular Tags verweist..

Anschliessend kann man die HTML Seite mit http://127.0.0.1/chart/name_der_HTML_Seite.htm aufrufen und das Formular mit Werten füllen. Sollte es nicht funktionnieren, ist höchstwahrscheinlich das Gd-Modul nicht installiert. Man kann das prüfen, indem man einen kleinen Skript schreibt, in dem nichts anderes steht, als das

<?
phpinfo();
?>

Man erhält dann eine lange Liste, in der auch die installierten Extensions aufgelistet sind. Ist das Gd-Modul installiert, ist dieser Eintrag vorhanden.

gd
GD Support enabled
GD Version 2.0 or higher
FreeType Support enabled
FreeType Linkage with freetype
JPG Support enabled
PNG Support enabled
WBMP Support enabled

Gibt es nichts dieser Art, ist das Gd Modul nicht installiert. Wie man es installiert ist unter Bildbearbeitung mit PHP beschrieben. Ausführliche Informationen zu jpgraph gibt es unter www.aditus.nu/jpgraph. Im Ordner src/example gibt es sehr viele, aussagekräftige Beispiele, die die gesamte Leistungsfähigkeit der Bibliothek veranschaulichen. Weiter hat jpgraph, das ist wohl ein gewaltiger Unterschied zu anderen Extensions oder Perl Modulen, sogar ein komplettes Handbuch, welches man hier downloaden kann. Dieses Handbuch ist auch noch sehr gut geschrieben. Insgesamt ist jpgraph wohl das "Siegel des Propheten" wenn es um die dynamische Generierung von Charts geht. Die grundlegende Syntax soll anhand des Beispiels oben erklärt werden. Die Zeilen
include ("jpgraph.php");
include ("jpgraph_bar.php");
include ("jpgraph_pie.php");

binden die Skripte, die wir brauchen, in das aufrufende Skript (graphik.php) ein. jpgraph.php braucht man immer, folglich bindet man es immer ein. jpgraph_bar.php brauchen wir, weil wir bars (Balken) generieren lassen wollen und jpgraph_pie.php weil wir Torten (pies) produzieren wollen. Unser Skript zerfällt in zwei Bereiche, der eine, der die Balken produziert und der andere, der das Tortendiagramm produziert. Welcher Bereich tatsächlich abgearbeitet wird, hängt davon ab, was wir in der HTML-Seite gewählt haben (Torte oder Balken). Schauen wir uns zuerst den Teil an, der das Balkendiagramm produziert.

$datay=array($wert[0],$wert[1],$wert[2],$wert[3]);
$datax=array($eigenschaft[0],$eigenschaft[1],$eigenschaft[2],$eigenschaft[3]);
$graph = new Graph($breite,$hoehe,"auto",-1);
$graph->SetShadow();
$graph->SetScale("textlin");
$graph->title->Set($ueberschrift);
$graph->xaxis->SetTickLabels($datax);
$graph->yaxis->title->Set($unterschrift);
$bplot = new BarPlot($datay);
$bplot->SetFillColor("$farbeXY");
$graph->Add($bplot);
$graph->Stroke();

Im HTML-Formular haben wir die Eigenschaften des Diagrammes (SPD, CDU, GRÜNE und FDP) wie auch die dazugehörigen Werte (40,40,10,10) definiert. Das heisst, die SPD hat 40 %, die CDU hat auch 40 % und GRÜNE und FDP jeweils 10. Das ist bei Balken und Tortendiagrammen immer so. Wir haben Eigenschaften und diese Eigenschaften haben Werte. Wir speichern also die Eigenschaften und die Werte in jeweils eigenen Arrays.

$datay=array($wert[0],$wert[1],$wert[2],$wert[3]);
$datax=array($eigenschaft[0],$eigenschaft[1],$eigenschaft[2],$eigenschaft[3]);

Anschliessend generieren wir ein neues Objekt der Klasse Graph.

$graph = new Graph($breite,$hoehe,"auto",-1);

Was $breite und $hoehe bedeutet ist hierbei klar. Der dritte Parameter definiert das Format des Bildes (jpeg, gif, png), wobei auto bedeutet, jpgraph in Abhängigkeit vom System selber entscheidet, welches Format gewählt wird. Der letzte Parameter,-1, heisst, dass wir nicht wünschen, dass das Bild im Cache landet. Dies könnte unter Umständen dazu führen, dass wir immer wieder das alte Bild bekommen, egal wie wir die Parameter einstellen. Wenn man sich die Diagramme oben etwas genauer anschaut, erkennt man, dass sie einen Schatten werfen. Verantwortlich hierfür ist diese Zeile.
$graph->SetShadow();

Nun müssen wir noch angeben, wie die x und die y Achse skaliert werden soll.

$graph->SetScale("textlin");

Bei Balkendiagrammen ist eigentlich nur textlin sinvoll. linlin, linlog, loglog und textlog führen bei Balkendiagrammen zu keinen sinnvollen Resultaten. textlin heisst, dass die Abstufungen auf der x-Achse der Anzahl der Eigenschaften folgt, wobei die Balken in jedem Abschnitt mittig zentriert werden. Die y-Achse ist linear skaliert (siehe Beispiele oben). Mit

$graph->title->Set($ueberschrift);

erhält unsere Seite eine Überschrift. Mit der Funktion

$graph->xaxis->SetTickLabels($datax);

können wir festlegen, dass jeder Balken den Namen der Eigenschaft bekommt. Lässt man diese Funktion weg, erscheint als Bezeichnung einfach nur eine Zahl. Die drei Zeilen

$bplot = new BarPlot($datay);
$bplot->SetFillColor("$farbeXY");
$graph->Add($bplot);

generieren ein neues Objekt der Klasse BarPlot, wobei der Konstruktor den Array mit den Werten übergeben bekommt ($datay). Anschliessend werden die Balken mit einer Farbe gefüllt und schliesslich dem Hauptbild hinzugefügt. Fehlt nur noch, dass es gedruckt wird, das ganze Diagramm. Das machen wir mit

$graph->Stroke();

Hat die Funktion Stroke keinen Parameter, wird in den Browser gedruckt. Durch Angabe eines Pfades z.B. "c:/bilder/test/banane.png" könnte das Bild auch abgespeichert werden.
Mutatis mutandis funtktionniert es auch, wenn ein Tortendiagramm produziert wird.

$data = array($wert[0],$wert[1],$wert[2],$wert[3]);
$graph = new PieGraph($breite,$hoehe);
$graph->SetShadow();
$graph->title->Set($ueberschrift);
$p1 = new PiePlot($data);
$p1->setLegends(array($eigenschaft[0],$eigenschaft[1],$eigenschaft[2],$eigenschaft[3]));
$p1->SetSliceColors(array($farbe1,$farbe2,$farbe3,$farbe4));
$p1->SetFontColor($farbeXY);
$graph->Add($p1);
$graph->Stroke();

Auch hier braucht es wieder zwei Arrays, der eine, der die Tortenstücke hält und der andere, der anzeigt, wie gross die Tortenstücke sind. Die Werte haben wir im Array $wert, die Eigenschaften im Array $eigenschaft. Mit der Zeile

$graph = new PieGraph($breite,$hoehe);

bilden wir ein neues Objekt vom Typ $graph. Die Funktion SetShadow wurde bereit oben erläutert. Die nächste Zeile

$graph->title->Set($ueberschrift);

ist eigentlich selbserklärend. Mit dieser Zeile setzen wir die Überschrift für das Diagramm. Was dann kommt, folgt dem gleichen Prinzip wie oben.

$p1 = new PiePlot($data);
$p1->setLegends(array($eigenschaft[0],$eigenschaft[1],$eigenschaft[2],$eigenschaft[3]));
$p1->SetSliceColors(array($farbe1,$farbe2,$farbe3,$farbe4));
$p1->SetFontColor($farbeXY);

Zuerst generieren wir eine Torte, weisen dieser Torte die Eigenschaften zu (das ist der Kasten rechts, siehe Abbildung), füllen die einzelnen Tortenstücke mit den entsprechenden Farben und drucken ihn dann.

vorhergehendes Kapitel