Java-Applet Diagram.class R. Krauße (TU Dresden) & M. Schädel (TFH Berlin) TU Dresden, Psychologie des Lehrens und Lernens Contact: Rüdiger Krauße rkrausse@rcs.urz.tu-dresden.de (Stand 14. July 2010)

Dokumentation

Allgemeines     Einbindung des Applets in HTML-Dokumente     Die Parameter     Beispiele     Dynamische Veränderung mit JavaScript     Diagramm-Hauptseite

Dieses Java-Applet stellt Linien- und Balkendiagramme dar. Wenn in der Darstellung mit der Maus auf einen Balken oder einen Linieneckpunkt geklickt wird, wird der genaue Wert und der Name des Balkens/der Linie angezeigt.
Die im Diagramm darzustellenden Werte werden dabei als Applet-Parameter übergeben.

Wenn ein Diagramm in eine HTML-Datei eingefügt werden soll, muss wie üblich das applet-Tag verwendet werden, z.B.

<applet code="diagram.class" align="baseline" width="120" height="120"> <param name="title" value="Jahresniederschläge Dresden"> <param name="bgcolor" value="240; 240; 240"> <param name="xLabel" value="Jan.;Feb.;März;April;Mai;Juni;Juli;Aug.;Sept.;Okt.;Nov.;Dez"> . . . </applet>

Die einzubindende Datei ist diagram.class. Weitere Informationen zum Einbinden von Java-Applets finden sie z.B. bei selfhtml.

Die Werte werden folgendermaßen organisiert: Bei Linien und Balkendiagrammen gibt es eine Anzahl von Stellen auf der x-Achse an denen die Balken positioniert sind und es Punkte für die Linien gibt. Diese Stellen sind von ihrer Art meist keine Zahlen und ihre genau Position ist unerheblich und meist gleichabständig. Diesem Unstand trägt das Applet Rechnung: es werden an einer Stelle die Positionen und Namen der x-Stellen festgelegt und für die einzelnen Linien bzw. Balkengruppen werden nur die y-Werte dieser Stellen übergeben. Natürlich können Sie aber alternativ auch genaue x-Positionen angeben um ungleichverteilte Positionen anzugeben.

Wie und welche Werte im Diagram dargestellt werden wird über die Parameter festgelegt. Mehrere Zahlen sind innerhalb eines Parameters durch Semikolon zu trennen. Es müssen nicht alle Parameter angegeben werden, in diesem Fall benutzt das Applet Standardeinstellungen.
Farben werden entweder:

• im RGB-Format übergeben, d.h. als drei Zahlen zwischen 0 und 255, die die Intensität der Grundfarben Rot, Grün und Blau angeben,
  z.B. "128; 192; 80"
• oder als HTML-üblicher Hexadezimalwert mit vorangestelltem #-Symbol,
  z.B. "#67FFC5"
• oder als Name einer der Standardfarben (black, blue, cyan, darkgray, gray, green, lightgray, magenta, orange, pink, red, white, yellow),
  z.B. "yellow"

 (Siehe dazu auch selfhtml.)

Schriftarten werden ähnlich wie bei CSS angegeben:

• und zwar durch Leerzeichen getrennt Stil (bold ... fett, italic ... kursiv), Größe in Pixeln und Schriftart/familie
  z.B. "bold 14 Verdana"
• bold und italic können auch beide angegeben werden bzw. weggelassen
  z.B. "bold italic 14 Arial" oder "12 Tahoma"
• Enthält der Schriftartenname Leerzeichen, so ist der Name in einfache Hochkommas zu setzen. Als Schriftfamilie sind folgende Bezeichner zugelassen: Dialog, DialogInput, Monospaced, Serif, SansSerif
  z.B. "14 'Times New Roman'" oder "12 SansSerif"

<param name="title"
   value="Kursschwankungen">

<param name="bgcolor"
   value="255; 255; 255">

<param name="xlabel"
   value="Mo.;Di.;Mi">

<param name="x"
   value="10; 20; 50; 100">

<param name="xtitle"
       value="Wochentage">

<param name="ytitle"
       value="Besucheranzahl">

<param name="show_legend"
       value="false">

<param name="show_ydescription"
       value="false">

<param name="show_ygrid"
       value="true">

<param name="show_xgrid"

       value="true">

<param name="precision"
       value="0.1">

<param name="ymin"
       value="-100">

<param name="ymax"
       value="1010">

<param name="rolling"
       value="200;50">

<param name="antialiasing"
       value="false">

<param name="xlabelsheme"
       value="5;15;
         3:05Uhr;
         3:20Uhr;
         3:15Uhr">

<param name="show_xscale"
       value="ATTEXT">

<param name="xscale"
       value="-4;4;0.1">

oder z.B. einfach

<param name="xscale"
       value="auto">

<param name="xlabelalign"
       value="LEFT">

<param name="xlabelangle"
       value="315">

<param name="zoomType"
       value="CUSTOM">

<param name="ylabel0"
   value="1. Gruppe">

<param name="y0"
   value="30;30;35;60;35">

<param name="color1"
   value="255;0;0">
<param name="color2"
   value="blue">
<param name="color3"
   value="#909090-#FFFF00">
<param name="color4"
   value="orange-yellow">

<param name="style1"
   value="LINE THICK">

<param name="style2"
   value="BAR">

<param name="headlinefont"
   value="BOLD 16 Verdana">

<param name="titlefont"
   value="10 'Comic Sans MS'">

<param name="normalfont"
   value="10 DialogInput">

Hier zwei kleine erläuterternde Beispiele.

Ein Diagramm mit 3 x-Stellen und 4 Kurven/Linien.

<applet code="diagram.class"
  align="baseline" width="235" height="229">
  <param name="title" value="Test-Diagramm">
  <param name="bgcolor" value="240; 240; 240">
  <param name="xlabel" value="Montag;Dienstag;Mittwoch">
  <param name="xtitle" value="Woche 23">
  <param name="ytitle" value="Euro">

  <param name="y0" value="10; -20; 30">
  <param name="color0" value="red-yellow">
  <param name="style0" value="BAR">
  <param name="ylabel0" value="Eisverkauf">

  <param name="y1" value="15; -10; 25">
  <param name="color1" value="240; 0; 0">
  <param name="style1" value="LINE">
  <param name="ylabel1" value="Bierstand">

  <param name="y2" value="5; 20; 15">
  <param name="color2" value="240; 0; 240">
  <param name="style2" value="LINE PLOP">
  <param name="ylabel2" value="T-Shirts">

  <param name="y3" value="-15; 0; 5">
  <param name="color3" value="40; 0; 240">
  <param name="style3" value="LINE THICK">
  <param name="ylabel3" value="Postkarten">
</applet>

Dir Überschrift des Diagramms lautet Testdiagramm, die Hintergrundfarbe ist Hellgrau (240,240240) und die 3 x-Stellen heißen "Montag", "Dienstag" und "Mittwoch" und die Achsen sind mit "Woche 23" und "Euro" beschriftet
Die 1. Linie hat an diesen Stellen die Werte 10, -20 und 30 und ist als Balken (BAR) mit Farbverlauf rot-gelb dargestellt.
Die 2. Linie hat an den x-Stellen die Werte 15, -10 und 25 und ist als rote (240,0,0) Linie (LINE) dargestellt.
Die 3. Linie hat an den x-Stellen die Werte 5, 20 und 15 und ist als violette (240,0,240) Linie (LINE) mit verstärkten Knoten (PLOP) dargestellt.
Die 4. Linie hat an den x-Stellen die Werte -15, 0 und 5 und ist als blaue (40, 0, 240) dicke Linie (LINE THICK) dargestellt.

Ein Diagramm bei dem per Javascript aller 0,1 Sekunden eine neue x-Stelle hinzugefügt wird. Erreichen die Kurven den rechten Rand so werden die älteren Werte links "herausgerollt".

<applet code="diagram.class" width="346" height="317" name="rollingDia" mayscript>
  <param name="title" value="Test-Diagramm">
  <param name="bgcolor" value="#FFFFFF">
  <param name="show_ygrid" value="true">
		
  <param name="rolling" value="200">
  <param name="ymax" value="100">
  <param name="ymin" value="0">
  <param name="show_xscale" value="atText">
  <param name="xlabelSheme" value="0; 50; 0; 50;100;150;200">

  <param name="ylabel0" value="Zufallskurve">
  <param name="y0" value="">
  <param name="color0" value="#FF0000">
  <param name="style0" value="LINE">
		
  <param name="ylabel1" value="Sinus-Kurve">
  <param name="y1" value="">
  <param name="color1" value="#00FF00">
  <param name="style1" value="LINE THICK">
</applet>

<script language="JavaScript"> 
    var t = 0; 
    var y0 = 50; 
    
    setInterval(NeuerPunkt, 100); 
    
    function NeuerPunkt() 
    { 
        y0 += 25*Math.random()-y0/4; 
        var y1 = (Math.sin(t/30)*40+50); 
        window.document.applets["rollingDia"].AddPoint(y0+";"+y1, t % 50 == 0 ? t : null, null); 
        t++; 
    } 
</script>

Dir Überschrift des Diagramms lautet Testdiagramm, die Hintergrundfarbe ist Hellgrau (240,240240) und die 3 x-Stellen heißen "Montag", "Dienstag" und "Mittwoch" und die Achsen sind mit "Woche 23" und "Euro" beschriftet
Die 1. Linie hat an diesen Stellen die Werte 10, -20 und 30 und ist als Balken (BAR) mit Farbverlauf rot-gelb dargestellt.
Die 2. Linie hat an den x-Stellen die Werte 15, -10 und 25 und ist als rote (240,0,0) Linie (LINE) dargestellt.
Die 3. Linie hat an den x-Stellen die Werte 5, 20 und 15 und ist als violette (240,0,240) Linie (LINE) mit verstärkten Knoten (PLOP) dargestellt.
Die 4. Linie hat an den x-Stellen die Werte -15, 0 und 5 und ist als blaue (40, 0, 240) dicke Linie (LINE THICK) dargestellt.

Es ist auch möglich, einzelne Kurven nachträglich zu verändern oder neue Kurven "nachzuladen". Dies geschieht mit Hilfe von JavaScript. Zunächst muss durch die Angabe mayscript im Applet-Tag angegeben werden, dass das Applet mit JavaScript kommunizieren darf: 

<applet name="dia" code="diagram.class" align="baseline" width="120" height="120" mayscript> <param name="title" value="Jahresniederschläge Dresden"> . . </applet>

Folgende Befehle können an das Applet geschickt werden (genaueres zur Kommunikation zwischen Applets und Javascript findet man z.B. ebenfalls bei selfhtml):

AddLine - Kurve hinzufügen

document.applet[0].Addline("10; 5; -67; 45", "#FF8967", "THICK, PLOP", "Gruppe2")

var nr = dia.Addline(a.join(';'), 'yellow-green', 'BAR', currentName);

RemoveLine - Kurve löschen

document.applet[0].RemoveLine(5);

nKurven = dia.RemoveLine(iDelete);

SetLine - Kurve modifizieren

document.applet[0].SetLine(0, "10; 5; -67; 45", "#FF8967", "THICK, PLOP", "Gruppe2")

var nr = dia.SetLine(i, a.join(';'), 'yellow-green', 'BAR', currentName);

AddPoint - fügt bei den Kurve einen neuen x-Wert hinzu

Wenn der Applet-Parameter rolling agegeben ist, bleibt dabei die Anzahl der X-Werte dabei konstant. Die Kurven "wandern" mit jedem AddPoint bis an den rechten Rand und wenn sie ihn erreichen werten die "älteren" Werte dabei leins aus dem Diagramm geschoben.

JavaSyntax:	public int AddPoint(String values, String xlabel, String xvalue)
Parameter:	values ... y-Werte des neue x-Wertes (durch Semikolon getrennt), der erste Wert wird an Linie y0 angehängt, der zweite an y1 usw. xlabel ... xLabel des euen Wertes; wenn null angegeben wird, wird kein Text angezeigt xvalue ... tatsächlicher x-Werte des neuen Wertes (bei ungleichmässigen Abständen), wenn null angegeben wird, wird der neue Wert in entsprechend regelmässigen Abstand als neuer Wert rechts dargestellt
Rückgabe-Wert:	Index des neuen Wertes
Beispiel:	document.applet[0].Addpoint("3.25; 5.676; -36", "Versuch 23") oder z.B. var ixLastnr = dia.Addpoint(yNeu.join(';'), xNeuName, xNeu);

SetYMin - setzt den minimalen y-Wert

Diese Funktion entspricht dem Applet-Parameter ymin. Wenn z.B. mit AddLine eine neue Kurve hizugekommen ist, möchte man evtl. den minimalen y-Wert anpassen.

document.applet[0].SetYMin("-20.5")

dia.SetYMin(yMinNeu);

SetYMax - setzt den maximalen y-Wert

Diese Funktion entspricht dem Applet-Parameter ymax. Wenn z.B. mit AddLine eine neue Kurve hizugekommen ist, möchte man evtl. den maximalen y-Wert anpassen.

document.applet[0].SetYMax("100")

dia.SetYMax(yMaxNeu);

SetRolling - setzt die Anzahl der x-Werte

Dese Funktion entspricht dem Applet-Parameter rolling. Wenn z.B. den Applet-Inhalt komplett mit SetLine umschaltet, möchte man evtl. die Anzahl der x-Werte anpassen.

document.applet[0].SetRolling("100")

dia.SetRolling(nZoom);

SetXLabel - Texte der x-Werte neu setzen

Diese Funktion entspricht dem Applet-Parameter xlabel. Die alte xLabels werden dabei vorher komplett gelöscht.

document.applet[0].SetXLabel("Montag;Dienstag;Mittwoch;Donerstag;Freitag")

dia.SetXLabel(labelsNeu.join(";"));

SetXLabelSheme - Texte der x-Werte neu setzen (erweitert)

Diese Funktion entspricht dem Applet-Parameter xlabelSheme. Die alte xLabels werden dabei nicht komplett gelöscht, d.h. Sie können SetXLabelSheme auch mehrfach hintereinander aufrufen und somit die X-Achse schrittweise anreichern.

document.applet[0].SetXLabelSheme(0, 10, "Montag;Dienstag;Mittwoch;Donerstag;Freitag")

dia.SetXLabel(13, 50, labelsNeu.join(";"));

SetXScale - setzt den maximalen y-Wert

Diese Funktion entspricht dem Applet-Parameter xscale. Damit können sie die numerische Beschriftung der x-Achse ändern.

document.applet[0].SetXScale("-4", "4", "0.1")

dia.SetXScale(null, null, "auto");

Viel Spaß !