Ziel ist es dieses Liniendiagramm mit JPGraph zu programmieren:



Datei anlegen:
Lege eine Datei an "linegraph1.php" (Die Datei wo die Grafik generiert wird).
Man kann sie nun über diesen HTML Tag irgendwo in eine Seite einfügen.

<img src="linegraph1.php">

Grafik erstellen:
In der Datei "linegraph1.php" müssen wir nun die Grafik mit der JPGraph Library programmieren:

Zuerst müssen wir die JPGraph Library einbinen => jpgraph.php
Danach müssen wir die entsprechende Library einbinden => jpgraph_line.php

<?php
include ("jpgraph.php");
include ("jpgraph_line.php");

// Hier kommt unser Code rein
?>

Danach muss zuerst mal die Grafik gebildet werden.
Eine neue Grafik mit den Massen (Breite x Höhe) 300 x 200 wobei JPGraph das Format automatisch wählt.

$graph = new Graph(300,200,"auto");    

Dann muss die Skala des Graphen festgelegt werden, wobei wir eine Text - Linear (X-Achse - Y- Achse) Skala wählen

$graph->SetScale("textlin");

Nun müssen wir die Werte der einen Linie in ein Array speichern, wobei wir die Werte frei wählen können (auch Kommazahlen).

$ydata = array(11,3,8,12,5,1,9,13,5,7);

Diese Werte müssen nun zu einem Graphen umgewandelt werden mit dem Befehl

$lineplot=new LinePlot($ydata);

Der generierte Graph muss nun noch in die Grafik eingetragen werden.

$graph->Add($lineplot);

Jetzt ist der Rohbau der Grafik fertig und wir können sie schon mal ausgeben mit diesem Befehl:

$graph->Stroke();

Das sieht dann mal folgendermassen aus:



Diese Grafik wollen wir nun noch etwas erweitern, Farben, Format usw....
Die Formatierungen können wir erst nach der generierung der Grafik einfügen also füge den folgenden Code nach dem Befehl
$graph->Add($lineplot); ein.


Erstmal geben wir der Grafik einen Namen (Titel): "Example 4":

$graph->title->Set("Example 4");

Die Schriftart des Titels könne wir auch verändern, mit dem Code (Diese Codes sind vorgegeben => Dokumentation):

$graph->title->SetFont(FF_FONT1,FS_BOLD);

Nun beschriften wir noch die beiden Achsen:

$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");

Und ihr Schriftformat können wir auch noch definieren:

$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

Damit nun die Schriften nicht überdeckt werden von der Grafik, können wir einen Rand definieren, wobei die Zahlenordnung folgendermassen ist (Links, Rechts, Oben, Unten):

$graph->img->SetMargin(40,20,20,40);

Inzwischen sieht die Grafik folgendermassen aus:




Damit das ganze noch etwas Farbe bekomt müssen wir nun den Graphen und die Achsen noch etwas formatieren:

Die Farbe des Graphen können wir nun ändern, entweder kann ein Hex Code (#000000) oder einer der Farbcodes von JPGraph verwendet werden => Dokumentation:

$lineplot->SetColor("blue");

Und die Dicke der Graphenlinie auf 2 setzen:

$lineplot->SetWeight(2);

Der Y-Achse kann man mit folgendem Code eine Farbe zuordnen

$graph->yaxis->SetColor("red");

Und ihre Dicke kann man auch verändern:

$graph->yaxis->SetWeight(2);

Der gesamten Grafik kann man noch einen Schatten verleihen mit dem Befehl:

$graph->SetShadow();

Damit sieht die Grafik schon fast wie das Original aus:



Nur noch den 2. Graphen müssen wir hinzufügen:

Das ist ganz einfach, indem wir wie beim ersten Graphen wieder einen Array mit den Werten machen:

$ydata2 = array(1,19,15,7,22,14,5,9,21,13);

Den Graphen erzeugen:

$lineplot2=new LinePlot($ydata2);

Ihn in die Grafik einbinden

$graph->Add($lineplot2);

Und die Farbe sowie Dicke definieren:

$lineplot2->SetColor("orange");
$lineplot2->SetWeight(2);

Damit wäre unsere Grafik fertig:



Der Gesamte Code sieht dann folgendermassen aus:

<?php
include ("jpgraph.php");
include ("jpgraph_line.php");

// Die Werte der 2 Linien in ein Array speichern
$ydata = array(11,3,8,12,5,1,9,13,5,7);
$ydata2 = array(1,19,15,7,22,14,5,9,21,13);

// Grafik generieren und Grafiktyp festlegen
$graph = new Graph(300,200,"auto");    
$graph->SetScale("textlin");

// Die Zwei Linien generieren
$lineplot=new LinePlot($ydata);

$lineplot2=new LinePlot($ydata2);

// Die Linien zu der Grafik hinzufügen
$graph->Add($lineplot);
$graph->Add($lineplot2);

// Grafik Formatieren
$graph->img->SetMargin(40,20,20,40);
$graph->title->Set("Example 4");
$graph->xaxis->title->Set("X-title");
$graph->yaxis->title->Set("Y-title");

$graph->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

$lineplot->SetColor("blue");
$lineplot->SetWeight(2);

$lineplot2->SetColor("orange");
$lineplot2->SetWeight(2);

$graph->yaxis->SetColor("red");
$graph->yaxis->SetWeight(2);
$graph->SetShadow();

// Grafik anzeigen
$graph->Stroke();
?>
Das Liniendiagramm lässt sich noch um vieles Erweitern, einige Funktionien zeige ich hier auf => Komplexes Liniendiagramm
Damit wäre das Liniendiagramm fertig und wir können zu einem Balkendiagramm gehen => Balkendiagramm