|
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> </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.
|
 |
