 Balkendiagramm 01-B (farbige Tabellenzellen)
Eine kleine Statistik für den 'WebeMeister'. Hiermit verschaffen sie dem Seitenbesucher eine statistische Übersicht als Balkendiagramm.
Hier nun die Version 01-B: Anzahl der Dateien.
|
|
Balkendiagramm - Dateistatistik
|
Die Basisversion des Script-Beispiels (Version 01-A) habe ich erweitert und bietet nun die Option zusätzliche Werte für die Anzahl der Dateien einzutragen.
Diese Angaben werden unterhalb der Balken angezeigt. Die Werte für die Balkenhöhe sind von diesen Werten unabhängig. Eingetragen habe ich hier Wertepaare mit proportionalen Werten für Dateianzahl : Höhe
62:31 16:8 32:16 162:81 110:55
|
Bei diesem Statistik-Modul verwende ich lediglich eine einzige transparente Grafik. Alles Andere wurde mittels HTML- und CSS-Anweisungen umgesetzt.
Die Einbindung ist recht einfach, da ich bereits alles für sie vorbereitet habe. Sie könnten sich darauf beschränken lediglich die Zahlenwerte für die Balkenhöhe (in Pixel) einzutragen. Optional können sie auch 2 weitere Angaben ändern, das muss aber nicht unbedingt sein.
Für jeden Balken des Graphen wurde ein Array (Register) mit 3 Eintragungen angelegt. Das Schema ist simpel. Zur Anschauung einmal die Einträge für den ersten Balken:
Text, Farbwert, Balkenhöhe, Text.
var Werte01 = new Array("62","#FFCAE4","31","htm")
Genauso werden die Einträge in den Arrays Werte02 - Werte05 für die restlichen 4 Balken eingetragen.
So funktionierts
Der Titeltext wird in einer Variablen ('Titel') abgelegt. Alle anderen Werte für das Diagramm sind in 5 Arrays eingetragen. In einer Tabelle, die von einem JavaScript geschrieben wird, sind transparente Grafiken Platzhalter 'eingebaut'. Die Größenwerte dazu werden den Arrays entnommen bzw. berechnet.
// Reihenfolge: angezeigter Wert, Farbe, Höhe, Text
var Werte01 = new Array("62","#FFCAE4","31","htm")
var Werte02 = new Array("16","#C4C4FF","8","css")
var Werte03 = new Array("32","#78CC99","16","js")
var Werte04 = new Array("162","#FEE237","81","gif")
var Werte05 = new Array("110","#BE58D5","55","jpg")
Schema:
var Arrayname = new Array("Text","RGB-Farbwert","Höhe","Text");
| Titel | 
|
|
|
|
| | Werte01[0] | Werte02[0] | Werte03[0] | Werte04[0] | Werte05[0] | | Werte01[3] | Werte02[3] | Werte03[3] | Werte04[3] | Werte05[3] |
|
|
|
Der RGB-Farbwert für die Balkenfarbe, der Wert für die Höhe der Balken und der Text für die Legende werden den 5 Arrays entnommen und legen das spätere Erscheinungsbild der Tabelle fest. Die verwendete transparente Grafik dient dabei als Platzhalter in den berechneten Größen.
Der Speicherort für die transparente Grafik wird mit dem Unterordner 'images' angenommen. Sie können das aber selbst entscheiden und ändern lediglich die Angaben im Script.
var Bildquelle = "images/transpixel.gif";
Aufwand
Sie müssen keine Tabelle entwerfen, Zellenabstände festlegen oder Höhen und Breiten berechnen. Das Script erledigt sämtliche 'Arbeiten'. Die Grafik-Tabelle wird im Body dort angezeigt, wo die JavaScript-Funktion aufgerufen wird.
- JavaScript in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- Funktions-Aufruf in den Body-Bereich kopieren
- Arrays Werte01 bis Werte05 im Script anpassen
- transparente Grafik herunterladen und speichern
Bitte entnehmen Sie den gesamten Quellcode für dieses Beispiel der Textdatei (Link oben im Kopfbereich). Dort können Sie ebenfalls eine Demo- bzw. eine Beispieldatei abrufen. Infos und Erklärungen zum 'Einbauen' von JavaScript finden Sie im  JavaScript Menü 01 oder gezielt auf der Seite Kurzinfo JavaScript 'einbauen'
Alles Notwendige ist getan!
Das war's schon! Wenn Sie der Anleitung zum Einbau folgen ist alles Notendige getan. Lassen Sie sich von den langen Erklärungen hier nicht abschrecken und führen die oben aufgelisteten Schritte durch.
Falls Sie dann das Modul anpassen möchten, weitere Erklärungen benötigen oder mehr über die Funktionsweise erfahren wollen, lesen Sie den betreffenden Abschnitt.
Anwendungsbeispiel
Statistische Übersicht Iher Web-Prsenz als Balkendiagramm. Sie zeigen dem Seitenbesucher in einem Graphen die Anzahl der Dateitypen.
Arbeitserleichterung:
Sie müssen die Dateien ihrer Web-Präsenz ja auch nicht von Hand zählen. Nutzen Sie einfach die Funktionen des Windows-Explorers nach dem unten stehenden Beipiel.
Windows stellt mit dem Explorer die Suchen-Funktion bereit. Die Anzahl der gefundenen Objekt wirddabei angezeigt. Suchen Sie also in einem Ordner nach einer datei mit der Endung 'htm', wird als Ergebnis die Anzahl angezeigt.
- Öffnen sie den Windows-Exploer
- (Markieren sie den Ordner ihrer Seiten)
- Rechtsklicken sie den Ordner
- wählen sie die Option 'Suchen'
Tragen sie zur Ermittlung der Anzahl *.Dateiendung (Stern Punkt Dateiendung) ein. Das Suchergebnis zeigt neben dem Suchergebnis auch die Anzahl der Dateien (in der Statuszeile des Fensters).
Anpassung
Wie schon gesagt, wenn sie lediglich die Balkenhöhe und die Anzahl der Dateien ändern möchten tragen sie nur die 10 Zahlenwerte ein. Natürlich können sie auch die Farben ganz individuell festlegen oder die Texteinträge für die Dateiklassen ändern. Ja sogar den Titel der Grafik können sie selbst bestimmen.
var Titel = "Anzahl der Dateien";
var Werte01 = new Array("62","#FFCAE4","31","htm")
var Werte02 = new Array("16","#C4C4FF","8","css")
var Werte03 = new Array("32","#78CC99","16","js")
var Werte04 = new Array("162","#FEE237","81","gif")
var Werte05 = new Array("110","#BE58D5","55","jpg")
Zur Anpassung folgende Änderungen in den 5 Arrays ...
| Array-Elemente |
hier im Array Werte01 |
ersetzen mit |
| Anzahl |
62 |
Zahlenwert |
| Farbwert |
#FFCAE4 |
HTML-Farbangabe |
| Höhe |
31 |
Wert in Pixel |
| Dateiklasse |
htm |
Text |
|
... und der Variablen für den Titel
| Variable |
hier im Beispiel |
ersetzen mit |
| Titel |
Anzahl der Dateien |
Text |
|
Mehrfach-Einsatz
Möchten sie das Beispiel innerhalb einer Seite mehrfach einsetzen, kopieren sie die Funktion zwei mal in den Head-Bereich ihrer Datei und nennen die Funktion der 2. Kopie um (vergeben sie einen anderen Namen) ...
function Statistik01()
...
function Diagram02()
...
... und rufen die beiden Funktionen entsprechend mit dem vergebenen Namen an der Stelle auf, wo das Diagram angezeigt werden soll.
<script type="text/javascript" language="JavaScript">
<!--
Statistik01();
//-->
</script>
<script type="text/javascript" language="JavaScript">
<!--
Diagram02();
//-->
</script>
Beispiel mit abgeänderten Eintragungen:
 Balkengrafik 01 - kurz und schmerzlos
Balkengrafik 01-A
Statistik-Graph 01 Balkendiagramm horizontal
Statistik-Graph 02 Balkendiagramm horizontal mit Skala
Statistik-Graph 03-A Balkendiagramm vertikal
Statistik-Graph 03-B Balkendiagramm vertikal
Statistik-Graph 04
|
Home • HTML • Balkengrafik
Demo Anwendung
transpixel.gif