Grafische Aufbereitung von Zahlen mit Tabellen

Nach Eingabe der Daten wird in einem neuen Fenster das Ergebnis grafisch ausgegeben.
In untenstehender Tabelle ist beispielhaft ist das Weltbevölkerungswachstum aufgetragen. Die Bevölkerungszahlen stellen nur eine Näherung dar und können durchaus fehlerhaft sein. Alle Weltbevölkerungszahlen sind bis heute Hochrechnungen.

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- function Auswertung(Schaltflaeche) { var Formular = Schaltflaeche.form var Rubriken = new Array(3) Rubriken[0] = Formular.Titel0.value Rubriken[1] = Formular.Titel1.value Rubriken[2] = Formular.Titel2.value var Werte = new Array(3) Werte[0] = Formular.Wert0.value Werte[1] = Formular.Wert1.value Werte[2] = Formular.Wert2.value DiaZeichnen(10,100,Werte,Rubriken,"Titel: Beispiel","Untertitel: Das Ergebnis") } function DiaZeichnen(MaxZeilen, Maximum, WertListe, RubrikenListe, UeberSchrift, UnterSchrift) { var BreiteBalken = 5 // Verhältnis zwischen Balkenspalte und Trennspalte, hier 1:5 var HtmlText = "<html><head><title>" + UeberSchrift HtmlText += "<\/title><\/head><body><h1 align=center>" HtmlText += UeberSchrift + "<\/h1><center><table border=\"0\" cellpadding=\"0\" cellspacing=\"1\" width=\"100\%\" summary=\"\">\n<caption>" HtmlText += UnterSchrift + "<\/caption><tr>\n"; for (Pos=0; Pos < WertListe.length; Pos++) { WertListe[Pos] = Math.floor((WertListe[Pos] / Maximum) * MaxZeilen + .5) if (MaxZeilen == WertListe[Pos]) { HtmlText += "<td width=\"" + BreiteBalken + "\%\" bgcolor=\"#008000\"> <\/td>\n" } else { HtmlText += "<td width=\"" + BreiteBalken + "\%\" bgcolor=\"#EEEEEE\"> <\/td>\n" } if(Pos < WertListe.length -1) { HtmlText += "<td rowspan=" + MaxZeilen + " width=\"1\%\"> <\/td>\n" } } HtmlText += "<\/tr>\n" for (Zeile = 2; Zeile <= MaxZeilen; Zeile++) { HtmlText += "<tr>\n" for (Pos = 0; Pos < WertListe.length; Pos++) { if (MaxZeilen < WertListe[Pos] + Zeile) { HtmlText += "<td bgcolor=\"#008000\" width=\"" + BreiteBalken + "\%\"> <\/td>\n" } else { HtmlText += "<td bgcolor=#EEEEEE width=\"" + BreiteBalken + "\%\"> <\/td>\n" } } HtmlText += "<\/tr>\n" } HtmlText += "<\/tr>\n" for (Pos=0; Pos < RubrikenListe.length; Pos++) { HtmlText += "<th width=\"" + BreiteBalken + "\%\" align=\"center\">" + RubrikenListe[Pos] + "<\/th>\n" if(Pos < RubrikenListe.length -1) { HtmlText += "<th width=\"1\%\"> <\/th>\n" } } HtmlText += "<\/tr><\/table><\/center><\/body><\/html>" var Para = 'resizable=1,location=0,directories=0,status=1,menubar=1,scrollbars=1,toolbar=0,width=550,height=380'; Test_Fenster = window.open("", "Testauswertung", Para); Test_Fenster.document.write(HtmlText); Test_Fenster.document.close(); } //--> </script>

Quelle: www.arstechnica.de/computer/JavaScript/JS11_09.html Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten .

Spalte	Titel (Jahr)	Wert (100 Millionen)
1
2
3
4
5
6
7