Ziel ist es dieses Balkendiagramm mit JPGraph zu programmieren:



Datei anlegen:
Zunächst legen wir eine Datei an "bargraph1.php" (Die Datei wo die Grafik generiert wird).
Man kann sie nun über diesen HTML Tag irgendwo in eine Seite einfügen.

<img src="bargraph1.php">

Grafik erstellen:
In der Datei "bargraph1.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_bar.php

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

// Hier kommt unser Code rein
?>

Danach muss zuerst mal die Grafik gebildet werden.
Eine neue Grafik mit den Massen (Breit 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");

Danach definieren wir noch den Rahmen der Grafik (Links, Rechts, Oben, Unten):

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

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

$datay=array(12,8,19,3,10,5);

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

$bplot = new BarPlot($datay);

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

$graph->Add($bplot);

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

$graph->Stroke();

Das sieht dann 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 hinzu

$graph->Add($bplot);

Um den Titel und Achsenbeschriftungen einzufügen sind folgende Befehle nötig:

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

Die Schriftarten werden hier geändert:

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

Um die Farbe der Balken auf Orange zu ändern füge diesen Befehl ein:

$bplot->SetFillColor('orange');

Um die einzelnen Werte über dem Graphen anzuzeigen braucht es diesen Code:

$bplot->value->Show();

Das sieht dann so aus:



Damit die Zahlen nicht abgeschnitten werden müssen wir die Y-Fläche um 35% grösser machen mit diesem Befehl:

$graph->yaxis->scale->SetGrace(35);

Nun drehen wir die Zahlen noch um 45° mit dem Befehl dazu müssen wir aber erst die Schrift definieren:

Schriftart ändern in Arial, Fett, Grösse 14px:

$bplot->value->SetFont(FF_ARIAL,FF_BOLD);

Drehen um 45°:

$bplot->value->SetAngle(45);

Die Zahlen können wir noch um Ihren Wert formatieren, so dass imm 2 Kommatstellen angezeigt werden:

$bplot->value->SetFormat('%01.02f');

Die Zahlen können wir auch selbst einfärben wobei positive Zahlen "dunkelblau" und negative "dunkelrot" werden sollen:

$graph->value->SetColor("darkblue","darkred");

Jetzt fügen wir den Balken noch einen Schatten zu:

$bplot->SetShadow();

Dann sieht unsere Grafik so aus:



Einen Effekt mit den Balkenfarben können wir mit diesem Befehl generieren:
Das die Farbe von Oben Orange bis Unten auf Gelb wechselt, das ganze Horizontal gelagert

$bplot->SetFillGradient("orange","yellow",GRAD_HOR);

Das Endergebnis wäre dann:




Der endgültige Code sieht folgendermassen aus:

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

$datay=array(12,8,19,3,10,5);

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

// Schatten hinzufügen
$graph->SetShadow();

// Rand ändern
$graph->img->SetMargin(40,30,20,40);

// Balkendiagramm generieren
$bplot = new BarPlot($datay);
$graph->Add($bplot);

// Balkenformatierungen
$bplot->SetFillColor('orange');
$bplot->SetShadow();
$bplot->SetFillGradient("orange","yellow",GRAD_HOR);
$bplot->value->Show();
$bplot->value->SetFont(FF_ARIAL,FF_BOLD);
$bplot->value->SetAngle(45);
$graph->value->SetColor("darkblue","darkred");

// Grafikformatierungen
$graph->title->Set("A simple bar graph");
$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);

$graph->yaxis->scale->SetGrace(35);

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

Das Balkendiagramm lässt sich noch um vieles Erweitern, einige Funktionien zeige ich hier auf => Komplexes Balkendiagramm
Damit wären das Balkendiagramm fertig und wir können zu einem Tortendiagramm gehen => Tortendiagramm