Das Standarliniendiagramm lässt sich nun noch um einiges genauer definieren, wobei ich einige Funktionen (die ich bisher kenne) erkläre.
Empfehlen kann ich dazu die Originaldokumentation und zum programmieren die Class-Reference, wo alle Code-Details erklärt werden.

Ziel:
- 2. Y-Achse
- Fläche unter Graph füllen und Transparent erscheinen lassen
- Legende zu den Graphen
- Formatierungen
- Markierungen (Punkte, Werte)
- Gridlines (Unterteilungslinien)


Voraussetzung ist das Standard-Liniendiagramm auf diesem Code bauen wir weiter auf:

<?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();
?>

Nun können wir noch einen dritten Graphen einbinden der viel höhere Werte hat als die zwei vorhandenen
(Bitte darauf achten, das die neuen Codezeilen jeweils logisch unter die bereits vorhanden gesetzt werden,
also immer gleiches zu gleichem sortieren: Daten zu Daten, Graph generieren, in Grafik einbinden, Graph formatieren):

$ydata3= array(80,129,45,78,09,12,56,120,111,200);

$lineplot3=new LinePlot($ydata3);

$graph->Add($lineplot3);

$lineplot3->SetColor("darkgreen");
$lineplot3->SetWeight(1);

Die Grafik sieht dann folgendermassen aus:



Nun haben wir das Problem das ein Graph das Feld vollkommen dominiert, das können wir umgehen indem wir eine 2. Y-Achse einfügen:

$graph->SetY2Scale("lin");

Nun müssen wir aber dieser Y-Achse noch den Graphen zuordnen, das machen wir indem wir den vorherigen Code

$graph->Add($lineplot3);

ändern in: $graph->AddY2($lineplot3);

Damit sieht die Grafik folgendermassen aus:



Nun müssen wir offensichtlich den rechten Rand noch anpassen, und die 2. Y-Achse farblich verschönern (damit es übersichtlicher wird: für den Graphen die gleiche Farbe wie für die Achse benutzen.

Rahmen ändern (rechten Rand grösser machen):

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

Achse formatieren:

$graph->y2axis->SetColor("darkgreen");
$graph->y2axis->SetWeight(2);

Damit sähe es so aus:



Eine weitere Möglichkeit ist die Fläche unter dem Graphen zu füllen und diese halb-transparent erscheinen zu lassen:

Nehmen wir den Grünen Graphen $lineplot2 und füllen ihn mit der Farbe dunkelorange (füge diesen Code einfach bei den Formatierungen von $lineplot2 ein):

$lineplot2->SetFillColor("darkorange");

Das sieht dann folgendermassen aus:



Nun sehen wir die anderen Graphen nicht mehr (da die Graphen in der Reihenfolge des Befehls $graph->Add($lineplot2); gezeichnet werden) nun könnten wir die Reihenfolge der Graphen-Zeichnung ändern oder die Füllfarbe halb-transparent machen:

Transparente Füllfarbe:

Erweitere dazu die Füllfarbe um folgenden Code @0.6 (was bedeutet das eine Transparenz von 60% besteht, der Befehl kann zwischen 0.0 = gar nicht transparent bis 1 = vollkommen transparent variieren):

$lineplot2->SetFillColor("darkorange@0.6");

Das Ergebnis sieht so aus:



Nun fügen wir noch eine Legende hinzu:

Die Legende muss aus den einzelnen Graphen gebildet werden, dass heisst sie sind wie eine Formatierung des Graphen und werden dem Graphen angehängt:
Ein Legendenpunkt kann man so einfügen z.B. für den ersten Graphen (den Blauen). Man muss lediglich den Namen angeben:

$lineplot->SetLegend("Blaue Linie ");

Für den zweiten gilt genau das Gleiche, nur das dieser zur Formatierung des 2. Graphen gehört:

$lineplot2->SetLegend("Orange Linie ");

usw...

$lineplot3->SetLegend("Grüne Linie ");

Das sieht dann so aus:



Die Legende wird automatisch oben rechts eingefügt und verdeckt nun (unerwünschterweise) unsere Graphen, also positionieren wir noch unsere Legende, das wiederum ist keine Formatierung des Graphen sondern eine Formatierung der Grafik (Entschuldigung für den Namenswirrwarr). Somit müssen wir nicht mehr die $lineplots definieren sondern die Grafik: $graph:

Positionierung (X-Koordinate (%), Y-Koordinate) Die Koordinaten werden Prozentual zur Grafik angegeben von 0 - 1, "center" und "bottom" geben an wie sich die Legende an die Koordinaten anpassen sollen.:

$graph->legend->Pos(0.00,0.5,"center","bottom");

Positionierung der Einträge innerhalb der Legende, wir möchten das die Einträge Horizontal gelistet werden:

$graph->legend->SetLayout(LEGEND_HOR);

Damit das ganze auch besser auf das Bild passt und schöner aussieht machen wir die Grafik etwas Grösser, und passen die Ränder an:

Ändere: $graph = new Graph(300,200,"auto");  Zu: $graph = new Graph(350,250,"auto");   

Ändere: $graph->img->SetMargin(40,20,20,40); Zu: $graph->img->SetMargin(40,20,20,80);

Nun sieht das ganze etwas besser aus



Nun Fügen wir noch kleinere Details und Formatierungen ein :

Untertitel einfügen:

$graph->subtitle->Set("Untertitel Beispiel")

Schriftart des Titels Verdana, Fett, 14px (Schriftart, Schrifttyp, Grösse (px)):

$graph->titel->SetFont("FF_VERDANA","FF_BOLD",14);

Schriftart des Untertitel Verdana, Normal, 8

$graph->subtitle->SetFont("FF_VERDANA","FF_NORMAL",8);

Farbe des Titels ändern:

$graph->title->SetColor("black");

Farbe des Untertitels ändern:

$graph->subtitle->SetColor("darkred");

Schriftart des Legenden-Textes ändern in Standard-Schriftart:

$graph->legend->SetFont("FF_FONT1","FF_NORMAL");

Farbe des Legenden-Textes ändern:

$graph->legend->SetColor("darkblue");

Farbe des Legenden-Hintergrundes ändern:

$graph->legend->SetFillColor("white");

Das sieht dann mal so aus:



Markierunggspunkte bei jedem Wert auf der Linie:
Wir wählen Quadrate (siehe Referenz für andere Punkte):

$lineplot->mark->SetType(MARK_SQUARE);

Farbe der Markierungspunkte wir wählen Blau und 30% Transparenz:

$lineplot->mark->SetFillColor("blue@.3");

Grösse der Markierungspunkte:

$lineplot->mark->SetWith(3);

Für den 2. Graphen möchten wir die Werte jeweils anzeigen, dazu müssen wir diesen Befehl einfügen:

$lineplot2->value->Show();

Die Schriftfarbe und Schriftgrösse dieser Werte könne wir natürlich auch ändern:

$lineplot2->value->SetFont("FF_FONT0","FF_NORMAL");
$lineplot2->value->SetColor("orange");

Inzwischen sieht es so aus:



Nun können wir noch diese Unterteilungslinien (Gridlines) bearbeiten:

Zuerst setzen wir sie in den Vordergrund:

$graph->grid->SetGridDepth(DEPTH_FRONT);

Danach können wir noch angeben ob wir die X-Achse Gridlines (Vertikalen Gridlines)anzeigen wollen,:
(Hauptlinien, Unterlinien)

$graph->xgrid->Show(true, false);

Ebenso bei der Y-Achse (Horiontalen Gridlines):

$graph->ygrid->Show(true, false);

Man kann jede Aktion für X sowie Y-Achse ausführen, deshalb erkläre ich sie nur mit der X-Achse.

Art der Linie kann man auch definieren (Durchgezogene, Gestrichelte usw...):
machen wir eine gestrichelte Linie

$graph->ygrid->SetLineStyle("dashed");

Dicke der Linie:

$graph->ygrid->SetWeight(1);

Farbe der Linie:

$graph->ygrid->SetColor("lightblue");

Füllen der Zwischenräume abwechselnd mit 2 verschiedenen Farben und halb-transparent:

$graph->xgrid->SetFillColor(true, '#EFEFEF@0.6', '#EFEFEF@0.6');

Das sieht dann so aus:



Hier nocht der komplette Code:

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

$ydata = array(11,3,8,12,5,1,9,13,5,7);
$ydata2 = array(1,19,15,7,22,14,5,9,21,13);
$ydata3 = array(80,129,45,78,09,12,56,160,111,200);

// Grafik generieren
$graph = new Graph(350,250,"auto");
$graph->SetScale("textlin");
$graph -> SetY2Scale ('lin');

// Grafik formatieren
$graph->img->SetMargin(40,40,20,80);

$graph->SetShadow();

$graph->title->Set("Example 4");
$graph->title->SetFont(FF_VERDANA,FS_BOLD,14);

$graph->subtitle->Set("Untertitel");
$graph->subtitle->SetFont(FF_VERDANA,FS_NORMAL,8);
$graph->subtitle->SetColor("darkred");

// Axen Formatierung
$graph->xaxis->title->Set("X-title");
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);

$graph->yaxis->title->Set("Y-title");
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->yaxis->SetColor("red");
$graph->yaxis->SetWeight(2);

$graph->y2axis->SetColor("darkgreen");
$graph->y2axis->SetWeight(2);

// Grid Lines
$graph -> SetGridDepth (DEPTH_FRONT);

$graph -> xgrid -> Show(false, false);

$graph -> ygrid -> Show(true, false);
$graph->ygrid->SetColor('lightblue');
$graph->ygrid->SetFill(true,'#EFEFEF@0.6','#BBCCFF@0.6');
$graph->ygrid->SetLineStyle('dashed');
$graph->ygrid->SetWeight(1);

// Graphen generieren
$lineplot=new LinePlot($ydata);
$lineplot2=new LinePlot($ydata2);
$lineplot3=new LinePlot($ydata3);

// Graphen in Grafik einbinden
$graph->Add($lineplot);
$graph->Add($lineplot2);
$graph->AddY2($lineplot3);

// 1. Graph
$lineplot->SetColor("blue");
$lineplot->SetWeight(2);
$lineplot -> mark -> SetType (MARK_SQUARE);
$lineplot -> mark -> SetFillColor("blue@.3");
$lineplot -> mark -> SetWidth(3);

// 2. Graph
$lineplot2->SetColor("orange");
$lineplot2->SetFillColor("darkorange@0.6");
$lineplot2->SetWeight(2);
$lineplot2->value->Show();
$lineplot2->value->SetFont(FF_FONT0 ,FS_NORMAL);
$lineplot2->value->SetColor("orange");

// 3. Graph
$lineplot3->SetColor("darkgreen");
$lineplot3->SetWeight(1);

// Legende generieren
$lineplot -> SetLegend ("Blaue Linie");
$lineplot2 -> SetLegend("Orange Linie");
$lineplot3 -> SetLegend("Grüne Linie");

$graph -> legend -> Pos( 0.5, 0.95, 'center', 'bottom');
$graph -> legend -> SetLayout (LEGEND_HOR);
$graph -> legend -> SetColor ("darkblue");
$graph -> legend -> SetFont(FF_FONT1 ,FS_NORMAL);
$graph -> legend -> SetFillColor ('white');

// Grafik anzeigen
$graph->Stroke();
?>


Damit haben wir vorlaufig schon einiges ausprobiert, für eine weitere Vertiefung empfehle ich die offizielle Dokumentation welche leicht verständlich geschrieben ist.Für eine effektive Ausnutzung der Funktionen ist die Funktionsreferenz, welche ebenfalls im Manual integriert ist, unumgänglich.

Damit wäre das Liniendiagramm fertig und wir können zu einem Balkendiagramm gehen => Balkendiagramm