JPGraph: graphische Charts einfach erzeugt
JPGraph von Johan Persson ist eine sehr leistungsfähige Chart-Engine, die eine Vielzahl von Chart-Typen kennt. Neben den Standardtypen wie Balken-, Linien- und Pie-Diagrammen kennt JPGraph auch die Erzeugung von 3D Pies, mehrere Pies in einer Grafik, horizontale Balkendiagramme und vieles mehr. Eines der Highlights von JPGraph dürfte sicherlich auch die Erzeugung von Gantt-Diagrammen sein, was JPGraph für die Entwickler von Projektmanagement-Software interessant macht. Aber auch z.B. Entwickler von Content Management Systemen, die Statistiken visualisieren wollen, haben mit JPGraph ein ideales Werkzeug an der Hand. In der neuen Version 1.6.3 haben so genannte Odometers (Tachometer- ähnliche Grafiken) Einzug gehalten. JPGraph finden Sie auf www.aditus.nu/jpgraph .
Für den Privatgebrauch ist JPGraph kostenlos unter der QPL Lizenz zu beziehen. Für alle anderen Zwecke im kommerziellen Bereich ist die Lizenzierung Pflicht.
Einsatzbeispiel von JPGraph
Die Installation von JPGraph ist sehr leicht. Einmal entpackt, erhalten Sie im Verzeichnis jpgraph-1.6.3/src/ die benötigten include-Dateien mit dem Prefix jpgraph_. Die Datei jpgraph.php ist dabei die grundlegende include-Datei, in der auch die Hauptkonfiguration erledigt wird. Je nachdem, welchen Chart-Typ Sie verwenden wollen, müssen Sie zusätzlich weitere Dateien includen, z.B. jpgraph_bar.php für die Erzeugung von Bar-Diagrammen.
Ihr PHP sollte so konfiguriert sein, dass es die Funktionen der GD-Library eincompiliert hat sowie über Support für die freetype-Library verfügt, sonst können Sie keine Charts mit JPGraph erzeugen.
Öffnen Sie die Datei src/jpgraph.php mit einem Editor Ihrer Wahl und konfigurieren Sie die Konstanten CACHE_DIR, APACHE_CACHE_DIR, TTF_DIR (das Verzeichnis, in dem Ihre TrueType Fonts liegen), USE_LIBRARY_GD2 (wenn Sie GD2.x benutzen wollen), USE_CACHE (für das Programmbeispiel hier benutzen wir keinen Cache, also auf FALSE setzen), CACHE_FILE_GROUP und CACHE_FILE_MOD. Die Konfiguration ist selbsterklärend, da in der Datei entsprechende Hinweise stehen, insofern verzichte ich auf eine ausführliche Erklärung hier.
JPGraph ist objektorientiert aufgebaut. Ein Diagramm, wie die einzelnen Klassen in welcher Beziehung zueinander stehen, finden Sie in der Dokumentation von JPGraph, die Sie auf der Website herunter laden können.
Das Erstellen eines Charts erfolgt immer zunächst über includieren der Datei jpgraph.php sowie Erzeugen des Objekts Graph:
<?php
include "jpgraph.php";
include "jpgraph_line.php"; # Liniendiagramm
include "jpgraph_bar.php"; # ... und Balkendiagramm
$g = new Graph(400,300,"auto");
Dem aufgerufenen Konstruktor wird die Größe der Graph übergeben (400x300 Pixel) sowie das Dateiformat. "auto" bedeutet, dass JPGraph selbständig ermittelt, welches der Dateiformate (PNG, GIF, JPEG) verwendet werden soll. Die so erzeugte "Arbeitsfläche" muß nun erst einmal ausstaffiert werden. Sie müssen festlegen, welchen Typ die einzelnen Skalen (X und Y) haben sollen. Üblicherweise verwendet man als Typ "textlin", was so viel bedeutet wie "X-Achse text, Y-Achse linear":
$g->SetScale("textlin");
Zusätzlich geben Sie an, ob die erzeugte Graphik einen Schatten bekommen soll. Wenn ja, rufen Sie die Methode SetShadow() auf:
$g->SetShadow();
Die "Arbeitsfläche" ist somit spezifiziert. Nun können Sie anfangen, einen Chart darauf zu platzieren. Ich entscheide mich für einen so genannten Accumulated Bar Plot. Dabei werden mehrere vertikale BarCharts aufeinander gelegt. Um das zu erreichen, erstellen Sie zunächst die einzelnen BarCharts wie folgt:
$daten1 = array(50,100,125,30); # Y-Daten BarPlot 1
$b1 = new BarPlot($daten1); # Erzeugung des Bar-Objekts
Sie übergeben dem Konstruktor der Klasse BarPlot (definiert in jpgraph_bar.php) ein numerisch indiziertes Array mit den darzustellenden Daten. Danach haben Sie ein Bar-Objekt, mit dem Sie verschiedene Methoden aufrufen können. Zum Beispiel möchten Sie sicherlich, dass die einzelnen BarCharts in unterschiedlichen Farben erscheinen. Dazu verwenden Sie die Methode SetFillColor():
$b1->SetFillColor("orange");
Sie können hier einen Farbnamen angeben. Die Namen der 433 definierten Farben können Sie hier nachlesen. Doch Sie brauchen nicht nur eine Farbdefinition für Ihr Balkendiagramm, sondern auch eine Legende. Diese definieren Sie mit der Methode SetLegend() Ihres Chart-Objekts:
$b1->SetLegend("Zugänge");
Und damit haben Sie schon einmal ein rudimentäres Balkendiagramm erzeugt. Wiederholen Sie dies mit dem zweiten Balkendiagramm:
# Wichtig für die Beschriftung der Y-Achse: als Gesamtzahl
# ergibt sich $daten2[0] + $daten1[0] für das 1. Feld, analog
# für alle weiteren Felder.
$daten2 = array(23,75,80,10);
$b2 = new BarPlot($daten2);
$b2->SetFillColor("chartreuse3");
$b2->SetLegend("Abgänge");
Wie vorab erwähnt, sollen diese beiden Balkendiagramme jeweils ein accumulated bar (also für jeden Punkt der x-Achse beide Balken übereinander legen) ergeben. Dazu verwenden Sie die Klasse AccBarPlot() und übergeben dem Konstruktor ein Array mit den beiden Objekten:
$accbar = new AccBarPlot(array($b1,$b2));
Dieser so erzeugte accumulated bar plot wird dann einfach auf den Graphen $g (die "Arbeitsfläche") angehängt:
$g->Add($accbar);
Was fehlt? Richtig, die Beschriftung der X-Achse, ein Titel für die Diagrammgrafik sowie jeweilige Titel der X- und Y-Achse:
# Titel des Diagramms
$g->title->set("Chat Traffic");
# Was stellt die X-Achse dar?
$g->xaxis->title->set("Stunde");
# Was stellt die Y-Achse dar?
$g->yaxis->title->set("Anzahl User");
Und um die Grafik letztendlich darzustellen, verwenden Sie die Methode Stroke() des Graph-Objekts:
$g->Stroke();
JPGraph kennt zusätzlich noch die Möglichkeit, einen zweiten Chart auf einer zweiten Y-Achse (Y2) zu setzen. Dazu setzen Sie einfach mit der Methode SetY2Scale() dieses Mal _nur_ linear oder logarithmisch (da die X-Achse durch SetScale() ja bereits vorgegeben ist):
# Nach dem Aufruf von SetScale() platzieren.
$g->SetY2Scale("lin");
Dann folgt das gleiche Spiel: einen Chart-Typ erzeugen, mit den Daten füttern, Legenden-Beschriftung setzen und mit AddY2() zum Graphen hinzufügen.
Wichtig: der zweite durch AddY2() hinzugefügte Graph wird NACH dem ersten Graph (durch Add() hinzugefügt) gezeichnet. Wenn Sie also, wie in diesem Beispiel, ein gefülltes Liniendiagramm zeichnen wollen, sollten Sie die beiden Graphen vertauschen: mit Add() das gefüllte Liniendiagramm hinzufügen und mit AddY2() das $accbar-Objekt hinzufügen. Doch alles der Reihe nach, zunächst einmal das Liniendiagramm erzeugen:
$daten3 = array(40,180,78,200);
$l = new LinePlot($daten3);
$l->SetFillColor("blue");
$l->SetLegend("Totals");
Und hinzufügen:
$g->AddY2($l);
Wie weiter oben beschrieben, sollte es aber vertauscht werden, so dass Sie letztendlich dort stehen haben:
$g->Add($l);
$g->AddY2($accbar);
Damit wird das gefüllte Liniendiagramm hinter den accumulated bars gezeichnet.
Das Komplettlisting:
<?php
include "jpgraph.php";
include "jpgraph_bar.php";
include "jpgraph_line.php";
$g = new Graph(400,300,"auto");
$g->SetScale("textlin");
$g->SetY2Scale("lin");
$g->SetShadow();
$daten1 = array(50,100,125,30); # Y-Daten BarPlot 1
$b1 = new BarPlot($daten1); # Erzeugung des Bar-Objekts
$b1->SetFillColor("orange");
$b1->SetLegend("Zugänge");
$daten2 = array(23,75,80,10);
$b2 = new BarPlot($daten2);
$b2->SetFillColor("chartreuse3");
$b2->SetLegend("Abgänge");
$accbar = new AccBarPlot(array($b2,$b1));
$daten3 = array(140,150,155,135);
$l = new LinePlot($daten3);
$l->SetFillColor("azure2");
$l->SetLegend("Totals");
$g->Add($l);
$g->AddY2($accbar);
# Titel des Diagramms
$g->title->set("Chat Traffic");
# Was stellt die X-Achse dar?
$g->xaxis->title->set("Stunde");
# Was stellt die Y-Achse dar?
$g->yaxis->title->set("Anzahl User");
$g->Stroke();
?>
Die Dokumentation und Funktionsreferenz von JPGraph ist ausführlich. Der Autor implementiert gerade ein neues Dokumentationssystem, mit dem die Dokumentation halbautomatisch erzeugt werden wird. Informationen hierzu finden Sie hier .
Kommentare
Bitte beachten Sie unsere Informationen zum Datenschutz.
blog comments powered by DisqusWeitere Artikel zum Thema
alle Artikel zum Thema
© 2012 FEiG & PARTNER