Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp09/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp09/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2009 - Gruppe 3 - Team 4

Graphik-Bibliotheken

von Katja Sperber

PlotKit

PlotKit ist eine Diagramm- und Graphen-Zeichnen-Bibliothek für Javascript. Die PlotKit-Bibliothek nutzt die Mochikit-Bibliothek als Basis (Version 1.3.oder höher). MockiKit ist wie PlotKit eine Open Source.(Download von PlotKit sowie MochiKit: http://www.liquidx.net/plotkit/)

Mit dieser Bibliothek ist es möglich einfache Balken-, Linien- und Kuchen-Diagramme darzustellen.

Abbildung 1

Unter den Optionen kann man sich sein Diagramm etwas anpassen. Die Standartfarbe ist normalerweise blau, doch es ist möglich andere Farben einzustellen (red: siehe Linien-Diagramm Abbildung 1 und 2; green: siehe Balken-Diagramm Abbildung 1).

"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[1])      // Color : red

oder

"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[2])      // Color : green

Auch der Hintergrund, die Achsen und die Achsenbeschriftung ist farblich variabel (Hintergrund: siehe Linien-Diagramm; Achsen und Achsenbeschriftung: siehe Balken-Diagramm in Abbildung 2).

"backgroundColor": Color.yellowColor(),
"axisLineColor": Color.redColor(),
"axisLabelColor": Color.blueColor()

Auf Wunsch können diese aber auch ganz weggelassen werden (siehe Linien-Diagramm in Abbildung 2).

"drawYAxis": false,
"drawYAxis": false

Beim Balken-Diagramm sind standartmäßig die Balken vertikal eingefügt, dies kann man aber durch eine eigene Option in horizontal ändern (PlotKit 0.9+ only; siehe in Abbildung 2).

"barOrientation": "horizontal"

Im Diagramm sieht das dann wie folgt aus.

Abbildung 2

Genauso ist es möglich das Minimum und Maximum der Y- und Y-Achsen einzustellen oder den Radius des Kuchendiagramms vorzugeben.

"xAxis": [1,6],
"yAxis": [0,3],
"pieRadius": 1

Arbeiten mit PlotKit

Um mit PlotKit zu arbeiten, muss man zu Beginn die notwendigen Skripdateien einfügen. Für das Beispiel benötigen man die folgenden Dateien.

<!-- Script-File with corresponding Path -->
<script type="text/javascript" src="lib/mochikit/MochiKit.js"></script>
<script type="text/javascript" src="lib/plotkit/Base.js"></script>
<script type="text/javascript" src="lib/plotkit/Layout.js"></script> 
<script type="text/javascript" src="lib/plotkit/Canvas.js"></script>
<script type="text/javascript" src="lib/plotkit/SweetCanvas.js"></script>

Desweiteren wir ein <canvas>-Tag benötigt, um das Diagramm an die entsprechende Stelle der Seite mit angegebener Größe einzufügen.

<div><canvas id="canvaspie" height="200" width="600"></canvas></div>

Zur Gestaltung des Diagramms arbeitet man dann mit den beiden Javascript-Klassen Layout und Renderer, mir denen alle weiteren Operationen durchgeführt werden können.

Die Instanzen der Klasse Layout kümmern sich um die Datenhaltung eines Charts.

// Layout and Data	
  // create a new layout object: first parameter = chart style, second parameter = options
  var pie = new PlotKit.Layout("pie", options1);
  // add a new dataset to the layout; the dataset consists of an array of (x, y) values
  pie.addDataset("sqrt1", [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]]);
  // tell the layout to calculate the layout of the chart so the renderer can draw it
  pie.evaluate();

Die eigentliche Ausgabe des Charts erfolgt durch einen Renderer. Hierbei kann man das Format der Ausgabe wählen. Durch die Instanzierung der Render-Klassen entscheidet man, ob man SVG oder Canvas verwenden will. In diesem Beispiel wird mit Canvas gearbeitet.

// Renderer	
  // will get the HTML element we defined in the html-Body
  var canvas = MochiKit.DOM.getElement("canvaspie");
  //create the renderer: first parameter = canvas, second parameter = layout , third parameter = options 
  var plotter = new PlotKit.SweetCanvasRenderer(canvas, pie, options1);
  // render the graph
  plotter.render();

Zusammengeschrieben könnte das Programm folgendermaßen aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Beispiel</title>
 
      <script type="text/javascript" src="lib/mochikit/MochiKit.js"></script>
      <script type="text/javascript" src="lib/plotkit/Base.js"></script>
      <script type="text/javascript" src="lib/plotkit/Layout.js"></script> 
      <script type="text/javascript" src="lib/plotkit/Canvas.js"></script>
      <script type="text/javascript" src="lib/plotkit/SweetCanvas.js"></script>
 
      <script type="text/javascript">
	   var options1 = {
                // Path relative to the HTML document of the iecanvas.htc file.
   		"IECanvasHTC": "/plotkit/iecanvas.htc",	
                // Color : blue
   		"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]),
		// X values at which ticks should be drawn
  		"xTicks": [{v:0, label:"zero"}, 				
          		{v:1, label:"one"}, 
          		{v:2, label:"two"},
         		{v:3, label:"three"},
          		{v:4, label:"four"},
			{v:5, label:"five"}],
                // Y values at which ticks should be drawn
		"yTicks": [{v:0, lable:"0"},							
			{v:1, label:"1.4"},
			{v:2, label:"2.8"},
			{v:3, label:"4.2"},
			{v:4, label:"5.6"},
			{v:5, label:"7"}],
   		"pieRadius": 0.4	
			};
 
 
		function demo() {
 
       		     var pie = new PlotKit.Layout("pie", options1);
		     pie.addDataset("sqrt1", [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]]);
		     pie.evaluate();
 
		     var canvas = MochiKit.DOM.getElement("canvaspie");
		     var plotter = new PlotKit.SweetCanvasRenderer(canvas, pie, options1);
    		     plotter.render();
 
		 } MochiKit.DOM.addLoadEvent(demo);
 
	</script>
 
	</head>
	  <body>
 
		<div id="body">
		<h1>Style</h1>
		<div>
			<canvas id="canvaspie" height="200" width="600"></canvas>
		</div>
 
		</div>
 
	</body>
</html>

Das Ergebniss ist dann das Kuchendiagramm aus der Abbildung 1.

Die Eingabe der (x,y)-Paare muss nicht direkt übergeben werden, sondern kann auch über ein Array oder z.B. einer Textdatei erfolgen.

Außerdem gibt es auch den sogenannten EasyPlot. Das ist eine Art Hülle um die eigentlichen Klassen von PlotKit. Hierbei werden Layout und Renderer in eine Zeile zusammengefasst. Es ist darauf zu achten, dass nun andere Skriptdateien benötigt werden.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>EasyPlot mit Variable und txt-Datei</title>
 
      <script type="text/javascript" src="lib/mochikit/MochiKit.js"></script>
      <script type="text/javascript" src="lib/plotkit/excanvas.js"></script>
      <script type="text/javascript" src="lib/plotkit/PlotKit_Packed.js"></script>
 
      <script type="text/javascript">
 
	     var options1 = {
                // Path relative to the HTML document of the iecanvas.htc file.
   		"IECanvasHTC": "/plotkit/iecanvas.htc",	
                // Color : blue
   		"colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[1]),
		// X values at which ticks should be drawn
  		"xTicks": [{v:0, label:"zero"}, 				
          		{v:1, label:"one"}, 
          		{v:2, label:"two"},
         		{v:3, label:"three"},
          		{v:4, label:"four"},
			{v:5, label:"five"}],
                // Y values at which ticks should be drawn
		"yTicks": [{v:0, lable:"0"},							
			{v:1, label:"1.4"},
			{v:2, label:"2.8"},
			{v:3, label:"4.2"},
			{v:4, label:"5.6"},
			{v:5, label:"7"}],
   		"pieRadius": 0.4	
			};
 
             function demo() {
 
		var data1 = [[0, 5], [1, 4], [2, 3], [3, 5], [4, 6], [5, 7]];
		var data2 = [[0, 2.5], [1, 2], [2, 1.5], [3, 2.5], [4, 3], [5, 3.5]];
 
		//EasyPlot: first parameter = style, second parameter = options (layout and renderer), third 
                // parameter = the HTML element we defined in the html-Body, fourth parameter = datasets to 
                // the layout
		var pie = new PlotKit.EasyPlot("pie", options1, $("canvaspie"), [data1]);
		var bar = new PlotKit.EasyPlot("bar", options1, $("canvasbar"), [data1, data2, "sample.txt"]);
 
	     } MochiKit.DOM.addLoadEvent(demo);
 
        </script>
 
 
	</head>
	  <body>
		<div id="body">
		<h1>EasyPlot mit Variable und txt-Datei</h1>
 
		<div id="canvaspie" style="margin: 0 auto 0 auto;" height="200" width="600"></div>
		<div id="canvasbar" style="margin: 0 auto 0 auto;" height="200" width="600"></div>
 
		</div>
 
	</body>
</html>

Als Ergebnis kommen ähnliche Diagramme wie in Abbildung 1.

Abbildung 3

Damit PlotKit die (x,y)-Paarung rauslesen kann, sollte der Sample.txt wie folgt aussehen:

0,0
1,1
2,4
3,8
4,7
5,8

Fazit

Bei einer Meinungssuche über PlotKit im Internet waren die Eindrücke fast durchgehend positive. Die folgenden Vor- und Nachteile wurden dabei aufgeführt.

Vorteile:

Nachteile:

  • nur kleine, einfache Diagramme
  • die Javaskript Bibliotheken können sich mit anderen Javaskripten beissen (z.B. mit jQuery bzw. jQuery Plugins)

Für uns kann dieses Programm zur visuellen Darstellung der Ergebnisse dienen wie z.B. der Vergleich der Notenverteilung von einem Jahr zu den vorherigen Jahren. Dafür müssen die auszugeben Werte nur in eine entsprechende (x,y)-Paarung gebracht werden. Einziges Problem könnten das Sich-Beissen mit anderen Javaskripten sein.

Zusatz

Bei ein dynamisches Beispiel, welches von PlotKit vorgegeben wird, kann man die (x,y)-Paarung direkt eingeben und die Anzahl der Paare jeder Zeit erhöhen. Genauso kann man direkt das Diagramm-Style und die Farbe wechseln.

Abbildung 4

JPGraph

JPGraph ist eine objektorientierte, grapherzeugende Bibliothek für PHP. Sie ist komplett in PHP geschrieben und in allen PHP-Skripts zu benutzen (Download: http://www.aditus.nu/jpgraph/jpdownload.php). Es liegt eine ausführliche Dokumentation (http://www.aditus.nu/jpgraph/docportal/classref/index.html)und auch ein deutschsprachiges Tutorial (http://www.binnendijk.net/jpgraph/index.php?page=startseite)vor. In dem Tutorial werden ausführlich alle Schritte von der Installation bis hin zu einem ersten Einstieg genau erläutert.

Vorteile:

  • größeres Diagrammangebot, d.h. nicht nur die einfachen Linien-, Balken- und Kuchen-Diagramme, sondern z.B. auch 3D Pies, mehrere Pies in einer Grafik, Gantt-Diagrammen oder Odometers (Tachometer-ähnliche Grafiken)
  • man kann die Bilder mit der JPGraph-Funktion Stroke() temporär speichern und damit cachen

Nachteile:

  • das Aussehen der Kuchendiagramme und das der Tachometer da die Rundungen Ecken haben
  • der riesige Codeoverhead der Bibliothek.
  • so richtig schön sehen die Diagramme erst nach grossen Aufwand aus
  • Trennung nach php 4 und 5

Basis-Diagramme:

Abbildung 5

Abbildung 6 Abbildung 7


Page last modified on September 04, 2009, at 02:21 PM