Startseite
Installation
2D Tortendiagramme
3D Tortendiagramme
About this tutorial
 
 
Balkendiagramm Standard

Hier werden noch einige Erweiterungen, welche man mit dem Balkendiagramm ausführen kann erläutert:

Ziele:

- Gruppen-Balken-Diagramme
- Akkumulierte Diagramme
- Gruppen-Balken-Akkumuliertes Diagramm
- Balken und Liniendiagramme
- Text in eine Graphik einfügen

Wir gehen von folgendem Code bzw. Diagramm aus:

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

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

// Graphik generieren
$graph = new Graph(350,250,"auto");    
$graph->SetScale("textlin");

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

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

// Balkendiagramm generieren
$b1plot = new BarPlot($data1y);
$graph->Add($b1plot);

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

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


Gruppen-Balkendiagramm:

Damit wir ein Gruppendiagramm aus 2 Diagrammen erstellen können, machen wir erst mal ein zweites Balkendiagramm. D.h. wir brauchen einen Array mit den Werten und generieren die Balken:

$data2y=array(8,2,11,7,14,4);
$b2plot = new BarPlot($data2y);

Nun müssen wir die beiden Balkendiagramme zusammenführen, so dass je 2 Balken einen Grossen ergeben, das geht mit dem Befehl:

$gbplot = new GroupBarPlot(array($b1plot,$b2plot));

Diesen neuen Balken müssen wir nun an die Graphik senden, dazu ändern wir den Befehl:

Von $graph->Add($b1plot); Zu: $graph->Add($gbplot);

Das Sieht dann so aus:



Aus optischen Gründen sollten wir noch die beiden Balken verschieden einfärben:

$b1plot->SetFillColor("orange");
$b2plot->SetFillColor("blue");

Und die Titel können wir auch noch etwas formatieren:

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


So sieht dann der Code und die Graphik aus:

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

$data1y=array(12,8,19,3,10,5);
$data2y=array(8,2,11,7,14,4);

// Create the graph. These two calls are always required
$graph = new Graph(350,250,"auto");    
$graph->SetScale("textlin");

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

// Create the bar plots
$b1plot = new BarPlot($data1y);
$b1plot->SetFillColor("orange");
$b2plot = new BarPlot($data2y);
$b2plot->SetFillColor("blue");

// Create the grouped bar plot
$gbplot = new GroupBarPlot(array($b1plot,$b2plot));

// ...and add it to the graPH
$graph->Add($gbplot);

$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);

// Display the graph
$graph->Stroke();
?>


Akkumulierte Diagramme

Wir nehmen nun den Code des Gruppen-Balken-Diagramms und müssen nur eine Zeile ändern:
Der Befehl der aus den 2 Diagrammen ein Balken macht der nebeneinander steht, wird aus einem Balken gemacht der aufeinander steht:

Anstelle von $gbplot = new GroupBarPlot(array($b1plot,$b2plot)); verwenden wir $gbplot = new AccBarPlot(array($b1plot,$b2plot));

Das sieht dann so aus:




Gruppen-Balken-Akkumuliertes Diagramm

Wir nehmen den Code des Akkumulierten Diagramms:

Dazu benötigen wir nochmals 2 neue Balkendiagramme, d.h. 2 Arrays mit Daten und den Balken generieren - diese färben wir auch gleich ein:

$data3y=array(3,9,2,7,5,8);
$data4y=array(1,5,11,2,14,4);


$b3plot = new BarPlot($data3y);
$b3plot->SetFillColor("green");

$b4plot = new BarPlot($data4y);
$b4plot->SetFillColor("brown");


Nun bilden wir aus den zwei neuen Balken wiederum ein Akkumuliertes Diagramm, d.h. wir führen die beiden Balken zu einem Balken zusammen mit dem Befehl:

$gb2plot= new AccBarPlot(array($b3plot,$b4plot));

Diese beiden Akkumulierten Diagramme führen wir nun zu einem Gruppenbalken zusammen mit dem Befehl:

$gbplot = new GroupBarPlot(array($gbplot,$gb2plot));

Das Ganze sieht dann so aus:



Balken und Liniendiagramme

Wir nehmen den Code des Standard-Balkendiagramms.

Lösche den Befehl der den Schatten generiert:

$graph->SetShadow();

Wir machen den Hintergrund der Grafik Weiss, so dass er nicht mehr sichtbar ist

$graph->SetMarginColor('white');

Jetzt verhindern wir das der Rahmen angezeigt wird:

$graph->SetFrame(false);

Den Titel ersetzen wir durch eine Titelbox, dazu muss folgender Befehl geändert werden:

Von: $graph->title->Set("A simple bar graph");

Zu: $graph->tabtitle->Set(' Year 2003 ' );
$graph->tabtitle->SetFont(FF_ARIAL,FS_BOLD,13);


Jetzt löschen wir noch die Achsen-Titel, dazu müssen wir die folgenden Befehle entfernen:

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


Ebenso müssen wir den Rahmen ändern:

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

Nun müssen wir noch einen neuen Graphen zeichnen, d.h. wir brauchen einen Array mit den Daten und generieren den Graphen:

$data2y=array(8,2,11,7,14,4);

$lineplot= new LinePlot($datay2);

Nun fügen wir den Graphen noch in die Grafik ein:

$graph->Add($lineplot);

Das sieht dann so aus:



Nun fügen wir noch einen Text in die Grafik ein:

Zuerst speichern wir den generierten Text in einer Variable:

$txt=new Text("This is a text");

Und nun binden wir ihn in die Grafik ein:

$graph->AddText($txt);

Das sieht dann so aus:



Damit der Text aber nichts überdeckt und nicht so langweilig aussieht formatieren und positionieren wir ihn noch:

Schriftart:

$txt->SetFont(FF_ARIAL,FS_NORMAL,10);

Schriftfarbe:

$txt->SetColor("red");

Position (X-Koordinate, Y-Koordinate) wieder jeweils prozentual angegeben von 0-1:

$txt->Pos(0.6,0.09);

Das sieht dann so aus:



Wir können nun auch noch eine Box um den Text machen:
Dazu müssen wir eine Box generieren und die Hintergrundfarbe, Randfarbe, Schattenfarbe angeben

$txt->SetBox('lightgray','green','black');

Und so sieht das Ergebnis aus:



Der Vollständige Code sieht dann so aus:

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

$data1y=array(12,8,19,3,10,5);
$data2y=array(8,2,11,7,14,4);
$txt =new Text("This is a text\nAnd some more Text\nIt's a lot of Text");

// Graphik generieren
$graph = new Graph(350,250,"auto");
$graph->SetScale("textlin");

// Graphikformatierungen
$graph->tabtitle->Set(' Year 2003 ' );
$graph->tabtitle->SetFont(FF_ARIAL,FS_BOLD,13);

// Rand definieren
$graph->img->SetMargin(20,0,20,10);
$graph->SetMarginColor('white');
$graph->SetFrame(false);

// Text formatieren
$txt->SetFont(FF_ARIAL,FS_NORMAL,10);
$txt->SetColor( "red");
$txt->Pos( 0.6,0.09);
$txt->SetBox('lightgray','green','black');

// Balkendiagramm generieren
$b1plot = new BarPlot($data1y);
$lineplot=new LinePlot($data2y);

$graph->Add($b1plot);
$graph->Add($lineplot);
$graph->AddText( $txt);

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


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