 Balkendiagram 01-B (Version 2)
Eine kleine Statistik für den 'WebeMeister'. Hiermit verschaffen sie dem Seitenbesucher eine statistische Übersicht als Balkendiagram.
Hier nun die Version 01-B mit Anzahl der Dateien.
|
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
|
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) und die Anzahl der Dateien einzutragen. Optional können sie auch 2 weitere Werte ändern, das muss aber nicht unbedingt sein.
Für jeden Balken wurde ein Array mit 4 Eintragungen angelegt, das Schema ist simpel. Zur Anschauung die Einträge für den ersten Balken: Anzahl, 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 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 10 davon). Die Werte dazu werden den Arrays entnommen.
| Titel | 
|
|
|
|
| | Werte01[0] | Werte02[0] | Werte03[0] | Werte04[0] | Werte05[0] | | Werte01[3] | Werte02[3] | Werte03[3] | Werte04[3] | Werte05[3] |
|
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
- Arrays Werte01 bis Werte05 im Script anpassen
- 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 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:
|
HOME
Demo Anwendung 
transpixel.gif 
ZURÜCK