 Statistik 04 (vertikal)
Statistik-Graph für eine vertikale Balkengrafik. Dieses Beispiel könnten sie z.B. für eine kleine Übersicht ihrer Dateinhalte der Webseite verwenden. Ein kleines Projekt für ein verregnetes Wochenende.
Statistik - vertikals Balkendiagramm mit Legende
Ein neues Script zur darstellung eines Graphen mit gleichfarbigen Balkendarstellungen durch Verwendung eines Images. Die Farbe der Balken können sie durch die Einbindung eines andersfarbigen Images selbst bestimmen.
Einfache Anpassung
Die Werte für den Graphen werden in einem Array (Register) abgelegt. Die Funktion erwartet 3 Informationen für jeden Balken.
Einträge im Array für den Graphen rechts:
| Balkenhöhe (in Pixel) |
112 |
56 |
22 |
45 |
69 |
| Text |
HTM |
PHP |
CSS |
GIF |
JPG |
| Text |
224 |
112 |
44 |
90 |
138 |
Anzahl: 5 X 3 Einträge
|
|
Funktion
Die Anzahl der Durchläufe zur Darstellung von je einem vertikalen Balken ist abhängig von der Anzahl der Einträge im Array. Mit 5 X 3 Einträgen werden auch 5 Balken dargestellt. Bei 21 Einträgen werden entsprechend ganz automatisch und ohne weiteres Zutun 7 Balken angezeigt.
Zur übersichtlicheren Darstellung und Fehlervermeidung habe ich die Notierungen zum 'Füllen' des Arrays so aufgebaut:
// für jeden Balken 3 Werte eintragen
// 1
Statistik[Statistik.length]="112"; // Höhe in Pixel
Statistik[Statistik.length]="HTM"; // Text
Statistik[Statistik.length]="224"; // Text
// 2
Statistik[Statistik.length]="56";
Statistik[Statistik.length]="PHP";
Statistik[Statistik.length]="112";
...
CSS-Notierungen
Die Formatierung aber auch die Einbindung von Grafiken habe ich über CSS-Anweisungen gesteuert. Dort wird auch (in der Unterklasse 'subtable') die für die Balken anzuzeigende Grafik und in der Unterklasse 'titel' die Titelgrafik eingebunden. Tragen sie eine andere Grafik für die Farbe ihrer Wahl ein.
a) CSS-Unterklasse für die Balken:
.subtable{
background: url(orange01.gif);
spacing:2px;
width:28px;
margin-top:10px;
}
Grafiken für die Balken (vergrößerte Darstellung) zum Download rechtsklicken
|
|
|
|
|
|
|
orange01.gif
|
rot01.gif
|
violett01.gif
|
gelb01.gif
|
gruen01.gif
|
blau01.gif
|
b) CSS-Unterklasse für die Titelzeile:
.titel{
background: url(header01.gif);
font-size: 12px;
font-family: Verdana,Arial,sans-serif;
color: #FFFFFF;
font-weight: normal;
text-align: center;
}
Die verwendete Grafik (header01.gif) zum Download rechtsklicken: 
Aufwand
- CSS-Notierungen und Script in den Head-Bereich kopieren
- Funktionsaufruf in den Body-Bereich kopieren
- 2 Grafiken herunterladen
- Einträge im Register anpassen
praktische Anwendung für ihre Seite
Sie könnten diese Balkengrafik neben anderen Einsatzgebieten z.B. für eine kleine Statistik ihrer Webseite einsetzen. Die Anzahl der unterschiedlichen Dateitypen wird ihrem Seitenbesucher simpel und übersichtlich in einer Grafik angezeigt.
In einer ähnlichen Form stelle auch ich eine Übersicht der zur Web-Toolbox gehörenden Dateien dar.
Damit sie die Dateien nicht von Hand zählen müssen, nutzen sie ganz einfach die Suchfunktion des Windows-Explorers:
|
|
Wechseln sie in ihr Homepage-Verzeichnis und RECHTS-Klicken den Ordner um das Kontextmenü anzuzeigen. Wählen sie die Option 'suchen'.
Tragen sie als Suchbegriff lediglich '*.Dateiendung' (Sternchen Punkt Dateiendung) ein
z.B. '*.htm'
Die Anzahl der vorhandenen und gefundenen Dateien lesen sie in der Statuszeile ab.
| 
HOME
Quelltext 
ZURÜCK