 Balkendiagram 01-A
Eine kleine Statistik für den 'WebeMeister'. Hiermit verschaffen sie dem Seitenbesucher eine statistische Übersicht als Balkendiagram.
Heute erst mal die simple Version 01-A.
|
Zwei weitere Versionen dieses Script-Beispiels sind bereits fertig und werden in den nächsten Tagen hochgeladen. Dann haben sie weitere Optionen:
a) 01-B Anzahl der Dateien anzeigen
b) 01-C die Balkenbreite global festlegen.
 Version 01-B
|
Hier wird lediglich eine transparente Grafik benötigt. 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 wurde ein Array mit 3 Eintragungen angelegt, das Schema ist simpel. Zur Anschauung die Einträge für den ersten Balken: Farbwert, Balkenhöhe, Text.
var Werte01 = new Array("#FFCAE4","62","htm")
Genauso werden die Einträge in den Arrays Werte02 - Werte05 für die restlichen 4 Balken eingetragen
So funktionierts
Der Text für den Titel ist in einer Variablen festgelegt.
Alle anderen Werte für das Diagram sind in 5 Arrays eingetragen. In einer Tabelle die von einem JavaScript geschrieben wird, sind Platzhalter 'eingebaut' (unten sehen sie 5 davon). Die Werte dazu werden den Arrays entnommen.
| Titel | 
|
|
|
|
| | Werte01[2] | Werte02[2] | Werte03[2] | Werte04[2] | Werte05[2] |
|
Weitere 10 Platzhalterwerte (hier nicht erkennbar), je 5 für die Farben und die Höhe der Balken, werden den 5 Arrays ebenfalls entnommen und legen das spätere Erscheinungsbild der Tabelle fest.
Abhängig von den von Ihnen eingetragenen Farbangaben und Zahlenwerten für die Höhe der Balken wird die Tabelle angezeigt werden.
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
- Werte01 bis Werte05 im Script eintragen
- transparente Grafik herunterladen und speichern
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";
Arbeitserleichterung
Sie müssen die Dateien ihrer Web-Präsenz ja auch nicht von Hand zählen. Nutzen sie einfach die Suchen-Funktion des Windows-Explorers nach dem unten stehenden Beipiel.
Nutzen sie die Suchen-Funktion, die Windows mit dem Explorer bereitstellt
- Ö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 ändern möchten tragen sie nur die 5 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("#FFCAE4","62","htm");
var Werte02 = new Array("#C4C4FF","8","css");
var Werte03 = new Array("#78CC99","16","js");
var Werte04 = new Array("#FEE237","81","gif");
var Werte05 = new Array("#BE58D5","55","jpg");
Zur Anpassung folgende Änderungen in den 5 Arrays ...
| Element |
hier im Array Werte01 |
ersetzen mit |
| Farbwert |
#FFCAE4 |
HTML-Farbangabe |
| Höhe |
62 |
Wert in Pixel |
| Dateiklasse |
htm |
Text |
|
... und der Variablen für den Titel
| Variable |
hier im Beispiel |
ersetzen mit |
| Titel |
Dateien im Verhältnis |
Text |
|
Beispiel mit abgeänderten Eintragungen:
|
HOME
Demo Anwendung 
transpixel.gif 
ZURÜCK