template

Index :: HTML :: Diagramme/Statistiken

Die numerische Präsentation von Werten kann mit einfachen HTML-Mitteln um grafische Elemente (wie z.B. farbige Balken) erweitert werden, um die Lesbarkeit und Beurteilung der Daten zu erleichtern.

Ein wichtiger Punkt ist die Wahl eines passenden Maßstabs:

Wenn möglich sollte das Diagramm kompakt sein, damit es (ohne scrollen zu müssen) auf einen Blick erfassbar ist.
Es ist zu berücksichtigen, dass die Darstellung später per Screenshot exportiert und als Bild in andere Dokumente (z.B. HTML, Word oder PDF) eingefügt werden muss.
Um für solche Fälle einen Qualitätsverlust durch Herunterskalieren zu vermeiden, sollte die maximale Gesamtfläche des Diagramms 500 x 500 Pixel nicht überschreiten.
Der Skalenbereich ist so zu wählen, dass er von den angezeigten Werte optimal ausgenutzt werden kann. Befinden sich die Werte beispielsweise in einem Bereich von [200...400], dann wäre ein maximaler Skalenwert von 500 angebracht.
Faustregel: Bei nach oben hin offenen Werten sollte der verfügbare Bereich mindestens zu 50 Prozent genutzt werden.

Ausserdem zu beachten:

Um das Diagramm von umliegendem Text abzugrenzen, sollte es einen Rahmen besitzen, was auch das spätere Exportieren/Ausschneiden als Grafik erleichtert. I.d.R. reichen dünne Linien von 1 Pixel Dicke.
Der einfachste Weg ist ein style-Attribut im Elternobjekt (meist TABLE oder DIV), z.B.:
```
<table ... style='BORDER:1px solid #A0A0A0'>
```
Hinter den Balken können (per Hintergrundgrafik) horizontale oder vertikale Hilfslinien angezeigt werden, wodurch der Betrachter eine bessere Vorstellung von der Quantität der Werte erhält.
Beschriftungen innerhalb des Diagramms wird normalerweise per CSS eine feste Font-Größe zugewiesen. Allerdings erlauben viele moderne Browser dem Benutzer das Ändern der Schriftgröße, wodurch Teile des Layouts gestreckt oder gestaucht werden. Gerade bei Kombination von Text und Grafiken (wie z.B. Hintergrundraster oder fixer Skalenbeschriftung) können dann Verzerrungen auftreten und leicht zu Darstellungsfehlern führen.
Bevor ein solches Diagramm online gestellt wird, sollte es daher mit verschiedenen Schriftgrößen geprüft werden.
Falls die Datenmenge - von Natur aus oder aufgrund einer Skalierung - aus Nachkomma-Werten besteht, muss auf Anzeige-Pixel gerundet werden; üblicherweise kaufmännisch: x=int(x+0.5). Zahlen kleiner als 0.5 werden dadurch auf 0 gesetzt, was im Diagramm etwas irreführend aussehen kann.
Deshalb sollten alle Werte, die größer als 0 sind, mit mind. 1 Pixel repräsentiert werden - auch wenn ihre Größe nur 0.001 beträgt.
Die Mindesthöhe von leeren DIV-Elementen beträgt beim MSIE Zeichenhöhe, auch wenn die DIV-Höhe per CSS auf einen kleineren Wert festgelegt wird.
Abhilfe: Ein transparentes Image der Größe 1 x 1 Pixel in den DIV setzen; dann werden auch kleinere HEIGHT-Werte korrekt dargestellt.
```
<div style='WIDTH:6;HEIGHT:12;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div>
```
Für Null-Werte sollten erst gar keine visuellen Objekte verwendet werden; die Breite/Höhe eines DIVs mit eingelagertem Transparenzpixel ist ohnehin nicht in allen Browsern auf 0 setzbar.
Layout-bedingte Platzhalter könnten notfalls mit einem unsichtbaren DIV (style='VISIBILITY:hidden') oder auch einem reinen Transparenzpixel passenden Ausmaßes realisiert werden.

Es ist ratsam, den Balken bzw. das Repräsentationsobjekt mittels einer eigenen Funktion (Javascript oder PHP) zu generieren, der man als Parameter z.B. Breite, Höhe und Farb/Muster-Info übergibt. In solch einer Funktion wäre auch das Runden von Nachkomma-Werten oder die Behandlung von Null-Werten zentral pflegbar.
Balken-Funktion in Javascript:

function DivBar(w,h,c) {
  w=w?Math.max(1,Math.floor(w+.5)):0; h=h?Math.max(1,Math.floor(h+.5)):0;
  document.write("<div style='WIDTH:"+w+";HEIGHT:"+h+";BACKGROUND:"+c+";");
  if (!w||!h) document.write("VISIBILITY:hidden;");
  document.write("'><img src='img/i1Spc.gif'></div>");
}

Balken-Funktion in PHP:

function DivBar($w,$h,$c) {
  $w=$w?max(1,intval($w+.5)):0; $h=$h?max(1,intval($h+.5)):0;
  echo "<div style='WIDTH:",$w,";HEIGHT:",$h,";BACKGROUND:",$c,";";
  if (!w||!h) echo "VISIBILITY:hidden;";
  echo "'><img src='img/i1Spc.gif'></div>";
}

Obige Richtlinien gelten allgemein für alle Arten von Diagrammen, egal, ob es sich um Balken, Flächen, Punkte oder sonstige Objekte handelt.

Der in den Beispielen aufgelistete HTML-Code wird in der Praxis natürlich von PHP generiert, normalerweise mithilfe von Schleifen und Datenbankzugriffen.

Prozentangaben
Horizontale Skalen

Vertikale Skalen

Füllmuster

Prozentangaben

Das Beispiel verwendet horizontale Balken, weil die Beschriftung hierbei einfacher ist als bei stehenden Balken.
Die Balkenzellen besitzen ein Hintergrundmuster (vertikale Hilfslinien), welches einen seitlichen Zellen-Padding-Wert von 2 Pixeln voraussetzt. Diese Forderung wird hier durch einen allgemeinen cellpadding-Wert von 2 für die Gesamttabelle erfüllt.
Damit das Hintergrundmuster in der Breite komplett sichtbar ist, muss mindestens 1 Balkenzelle einen width-Wert von 100 besitzen.

Alpha	36 %
Beta	47 %
Gamma	9 %
Delta	97 %

<table align='center' bgcolor='#E0E0E0' cellspacing='0' cellpadding='2' style='BORDER:1px solid #D0D0D0'><tr>
<td>Alpha</td>
<td align='right'><b>36</b> %</td>
<td width='100' background='img/bgProzH.gif'>
<div style='WIDTH:36;HEIGHT:8;BACKGROUND:#6060FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>Beta</td>
<td align='right'><b>47</b> %</td>
<td background='img/bgProzH.gif'>
<div style='WIDTH:47;HEIGHT:8;BACKGROUND:#6060FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>Gamma</td>
<td align='right'><b>9</b> %</td>
<td background='img/bgProzH.gif'>
<div style='WIDTH:9;HEIGHT:8;BACKGROUND:#6060FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>Delta</td>
<td align='right'><b>97</b> %</td>
<td background='img/bgProzH.gif'>
<div style='WIDTH:97;HEIGHT:8;BACKGROUND:#6060FF'><img src='img/i1Spc.gif'></div></td>
</tr></table>

Alternativ können für die Darstellung von Balken und Skalenfläche auch Images verwendet werden. Dazu reichen im einfachsten Falle minimale Grafiken von 1 x 1 Pixel und entsprechender Farbe, die dann mittels width- und height-Attribut auf passende Größe gebracht werden:

Auslastung

62 %

<table bgcolor='#E0E0E0' align='center' cellspacing='0' cellpadding='2'><tr>
<td>Auslastung</td>
<td><img src='img/i1Blue.gif' width='62' height='8'><img src='img/i1White.gif' width='38' height='8'></td>
<td>62 %</td>
</tr></table>

Horizontale Skalen

Die Beschriftung der X-Achse erfolgt hier nicht durch Text sondern durch eine Grafik. Damit ist gewährleistet, dass die Skala auch bei Schriftgrößenänderung ihr korrektes Aussehen behält.
Mittels Hintergrundgrafik erhalten die Balkenzellen ihre senkrechten Hilfslinien.


2003:	81
2004:	175
2005:	238
2006:	349

<table bgcolor='#E0E0E0' align='center' cellspacing='0' cellpadding='2' style='BORDER:1px solid #D0D0D0'><tr>
<td colspan='2'>&nbsp;</td>
<td style='PADDING:0' valign='bottom'><img src='img/Ska500h.gif'></td>
</tr><tr>
<td>2003:</td>
<td align='right'><b>81</b></td>
<td style='PADDING:0' background='img/bg100h.gif'>
<div style='WIDTH:81;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>2004:</td>
<td align='right'><b>175</b></td>
<td style='PADDING:0' background='img/bg100h.gif'>
<div style='WIDTH:175;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>2005:</td>
<td align='right'><b>238</b></td>
<td style='PADDING:0' background='img/bg100h.gif'>
<div style='WIDTH:238;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td>2006:</td>
<td align='right'><b>349</b></td>
<td style='PADDING:0' background='img/bg100h.gif'>
<div style='WIDTH:349;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr></table>

Falls sichergestellt ist, dass die angezeigten Werte unter einem bestimmten Maximalwert bleiben, kann die Skalenbeschriftung (wie in obigem Beispiel [0...500]) aus einem einzelnen Bild bestehen.
Oft ist die Länge der Skala zur Entwicklungszeit jedoch schlecht einzuschätzen, vor allem dann, wenn die Werte später zur Laufzeit aus einer sich ständig verändernden Datenbank gelesen werden. Um hier auf flexible Weise eine optimale Skala zu erzeugen, könnte man sie auch nach Bedarf aus Einzelelementen zusammenstellen. Die aneinandergereihten Images müssen evtl. von einem <nowrap>-Tag umschlossen werden, um bei breiten Diagrammen einen Umbruch zu verhindern.

Elemente für den Maßstab 1:1 (1 Pixel = 1 Einheit):

[0...100]	10er-Werte	100er-Punkte							Hintergrund

Elemente für den Maßstab 1:2 (1 Pixel = 2 Einheiten):

[0...100]	10er-Werte	Die Grafiken für 100er-Punkte (200...800) sind die selben wie beim 1:1-Maßstab	Hintergrund

Elemente für den Maßstab 1:10 (1 Pixel = 10 Einheiten):

[0...1000]	100er-Werte	1000er-Punkte							Der Hintergrund entspricht dem 1:1-Maßstab
									Der Hintergrund entspricht dem 1:1-Maßstab

Elemente für den Maßstab 1:20 (1 Pixel = 20 Einheiten):

[0...1000]	100er-Werte	Die Grafiken für 1000er-Punkte (2000...8000) sind die selben wie beim 1:10-Maßstab	Der Hintergrund entspricht dem 1:2-Maßstab

Beispiel für eine montierte Skala mit Maßstab 1:20:

Zugriffe
Januar:	3185
Februar:	2904
März:	3652

<table bgcolor='#E0E0E0' align='center' cellspacing='0' cellpadding='2' style='BORDER:1px solid #D0D0D0'><tr>
<td colspan='2'>Zugriffe</td>
<td style='PADDING:0' valign='bottom'><img
src='img/Ska1000h2.gif'><img
src='img/Ska100_900h2.gif'><img
src='img/SkaPt2000h.gif'><img
src='img/Ska100_900h2.gif'><img
src='img/SkaPt3000h.gif'><img
src='img/Ska100_900h2.gif'></td>
</tr><tr>
<td align='right'>Januar:</td>
<td><b>3185</b></td>
<td style='PADDING:0' background='img/bg100h2.gif'>
<div style='WIDTH:159;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td align='right'>Februar:</td>
<td><b>2904</b></td>
<td style='PADDING:0' background='img/bg100h2.gif'>
<div style='WIDTH:145;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr><tr>
<td align='right'>M&auml;rz:</td>
<td><b>3652</b></td>
<td style='PADDING:0' background='img/bg100h2.gif'>
<div style='WIDTH:183;HEIGHT:8;BACKGROUND:#FF00FF'><img src='img/i1Spc.gif'></div></td>
</tr></table>

Vertikale Skalen

Wie bei der horizontalen Achsenbeschriftung ist auch hier die Verwendung von Grafiken zu empfehlen, die je nach Bedarf montiert werden.

Elemente für den Maßstab 1:1 (1 Pixel = 1 Einheit):

[0...100]	[...200]	[...300]	[...400]	[...500]	Hintergrund

Elemente für den Maßstab 1:10 (1 Pixel = 10 Einheiten):

[0...1000]	[...2000]	[...3000]	[...4000]	[...5000]	Hintergrund entspricht M 1:1
					Hintergrund entspricht M 1:1

Beispiel für ein Diagramm mit montierter vertikaler Skala und mehreren Balkentypen:

2005

2006

<table align='center' cellspacing='0' cellpadding='0' style='BORDER:1px solid #A0A0A0'>
<tr valign='bottom' background='img/bg100up.gif'>
<td bgcolor='#E0E0E0'><img src='img/SkaTo300up.gif'><br>
<img src='img/SkaTo200up.gif'><br>
<img src='img/Ska100up.gif'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:45;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:100;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:145;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:10;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:55;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:105;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:160;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:11;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:65;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:95;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:160;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:12;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:75;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:110;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:185;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:14;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:45;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:100;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:145;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:17;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:55;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:105;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:177;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:21;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:65;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:95;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:160;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:22;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
<td width='4'></td>
<td><div style='WIDTH:6;HEIGHT:75;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:110;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:218;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td><div style='WIDTH:6;HEIGHT:20;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td width='4'></td>
</tr><tr bgcolor='#FFFFFF'>
<td bgcolor='#E0E0E0'>&nbsp;</td>
<td colspan='6' align='center'>Q1</td>
<td colspan='6' align='center'>Q2</td>
<td colspan='6' align='center'>Q3</td>
<td colspan='6' align='center'>Q4</td>
<td colspan='6' bgcolor='#F0F0F0' align='center'>Q1</td>
<td colspan='6' bgcolor='#F0F0F0' align='center'>Q2</td>
<td colspan='6' bgcolor='#F0F0F0' align='center'>Q3</td>
<td colspan='6' bgcolor='#F0F0F0' align='center'>Q4</td>
</tr><tr bgcolor='#FFFFFF'>
<td bgcolor='#E0E0E0'>&nbsp;</td>
<td colspan='24' align='center'><b>2005</b></td>
<td colspan='24' bgcolor='#F0F0F0' align='center'><b>2006</b></td>
</tr></table>

Bei mehreren Balkenfarben sollte dem Diagramm eine Legende hinzugefügt werden:

Alpha

Beta

Gamma

Delta

<table align='center' cellspacing='0' cellpadding='2' style='BORDER:1px solid #A0A0A0'>
<tr bgcolor='FFFFFF'>
<td><div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div></td>
<td>Alpha&nbsp;&nbsp;</td>
<td><div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div></td>
<td>Beta&nbsp;&nbsp;</td>
<td><div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div></td>
<td>Gamma&nbsp;&nbsp;</td>
<td><div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div></td>
<td>Delta</td>
</tr></table>

Die exakten Einzelwerte sind bei stehenden Balken schlecht ins Diagramm zu integrieren. Normalerweise werden diese Werte dann in einer separaten Tabelle aufgeführt, z.B.:

		Alpha	Beta	Gamma	Delta
2005	Q1	45	100	145	10
	Q2	55	105	160	11
	Q3	65	95	160	12
	Q4	75	110	185	14
2006	Q1	45	100	145	17
	Q2	55	105	177	21
	Q3	65	95	160	22
	Q4	75	110	218	20

<table bgcolor='A0A0A0' align='center' cellspacing='1' cellpadding='2'><tr bgcolor='F0F0F0'>
<td colspan='2'>&nbsp;</td>
<td align='center'>
<div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#40F040;'><img src='img/i1Spc.gif'></div>Alpha</td>
<td align='center'>
<div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#00A0FF;'><img src='img/i1Spc.gif'></div>Beta</td>
<td align='center'>
<div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#4000D0;'><img src='img/i1Spc.gif'></div>Gamma</td>
<td align='center'>
<div style='WIDTH:8;HEIGHT:8;BORDER:1px solid #000;BACKGROUND:#FF4060;'><img src='img/i1Spc.gif'></div>Delta</td>
</tr><tr bgcolor='FFFFFF' valign='top'>
<td rowspan='4' bgcolor='F0F0F0'><b>2005</b></td><td bgcolor='F0F0F0'>Q1</td>
<td align='center'>45</td><td align='center'>100</td><td align='center'>145</td><td align='center'>10</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q2</td>
<td align='center'>55</td><td align='center'>105</td><td align='center'>160</td><td align='center'>11</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q3</td>   
<td align='center'>65</td><td align='center'>95</td><td align='center'>160</td><td align='center'>12</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q4</td>
<td align='center'>75</td><td align='center'>110</td><td align='center'>185</td><td align='center'>14</td>
</tr><tr bgcolor='FFFFFF' valign='top'>
<td rowspan='4' bgcolor='F0F0F0'><b>2006</b></td><td bgcolor='F0F0F0'>Q1</td>
<td align='center'>45</td><td align='center'>100</td><td align='center'>145</td><td align='center'>17</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q2</td>
<td align='center'>55</td><td align='center'>105</td><td align='center'>177</td><td align='center'>21</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q3</td>
<td align='center'>65</td><td align='center'>95</td><td align='center'>160</td><td align='center'>22</td>
</tr><tr bgcolor='FFFFFF'>
<td bgcolor='F0F0F0'>Q4</td>
<td align='center'>75</td><td align='center'>110</td><td align='center'>218</td><td align='center'>20</td>
</tr></table>

Alternativ könnte man bei der Texttabelle den Zeitstrang auch horizontal verlaufen lassen, so wie es beim Balkendiagramm der Fall ist. Zum einen entsteht dadurch eine intuitivere Von-links-nach-rechts-Leseweise, zum anderen wird die Bildschirmbreite bei größerer Anzahl von Messpunkten besser ausgenutzt:

		2002				2003				2004				2005				2006
Quartal		1	2	3	4	1	2	3	4	1	2	3	4	1	2	3	4	1	2	3	4
	Alpha	19	21	25	24	22	24	27	38	25	29	33	47	45	55	65	75	45	55	65	75
	Beta	55	59	60	60	61	64	72	79	85	91	92	104	100	105	95	110	100	105	95	110
	Gamma	12	37	56	48	30	66	86	111	93	116	128	164	145	160	160	185	145	177	160	218
	Delta	2	2	3	4	5	7	2	5	8	5	9	11	10	11	12	14	17	21	22	20

Füllmuster

Um Balken- oder Flächentypen augenfälliger zu markieren, lassen sich DIVs auch mit einem Hintergrundmuster versehen:

<div style='WIDTH:100;HEIGHT:12;BACKGROUND:url(blabla.gif);'><img src='img/i1Spc.gif'></div>

Einige Beispiele (2-farbig):

Grafik	Muster

Index :: HTML

template