 Balkendiagramm 01 simpel (Verwendung von Grafiken)
Eine kleine Statistik für Ihre Webseite. Einsatzbereiche sind vielfältig: statistische Übersichten, Balkendiagram zur Visualisierung, Besucherstatistik, Dateivolumen Ihrer Seite, ... . Hier die simple Version ohne viel Aufwand.
|
|
horizontales Balkendiagramm - kurz und schmerzlos
|
Diese simple ScriptAnwendung bietet die Option einen horizontalen, farbigen Balken plus einem Zahlenwert anzuzeigen.
Wenn Sie mehrere solcher Balken (untereinander) anzeigen lassen, entsteht ein kleiner Statistik-Graph den Sie für alle möglichen Zwecke einbinden können.
Die Zahlenwerte werden neben dem Balken angezeigt. Die Werte für die Balkenhöhe sind im default mit 10 Pixel festgelegt.
Beim Aufruf der Funktion Balken() werden zwei Werte übergeben:
- Zahlenwert
- Farb-Bezeichnung
Balken(40,farbe01);
|
Das ist die simpelste Variante für meinen Statistik-Graphen mit der Bezeichnung 'Balkendiagramm 01'. Mit zwei kleinen Erweiterungen hätten Sie die Möglichkeit einen Multiplikator für die Balkenbreite festzulegen oder Prozentzeichen hinter dem Zahlenwert anzeigen zu lassen (dazu mehr auf einer eigenen Seite).
Aufwand
- Grafiken herunterladen und speichern
- JavaScript in den Head-Bereich kopieren
- CSS-Anweisungen in den Head-Bereich kopieren
- Funktions-Aufruf(e) in den Body-Bereich kopieren
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. Am Einfachsten ist es, die ZIP-Datei herunter zu laden und zu entpacken. Grafiken und eine Demo-Datei haben Sie dann bereits auf Ihrer Festplatte.
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.
Einbindung
Die Einbindung ist recht einfach, da ich bereits alles vorbereitet habe. Sie könnten sich darauf beschränken lediglich die Farb-Bezeichnung und den Zahlenwert einzutragen. Dabei entspricht der Zahlenwert der Balkenbreite.
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.
Wenn Sie im Body-Bereich Ihrer Seite folgenden Code notieren
<script type="text/javascript" language="JavaScript">
<!-- Begin
Balken(242,farbe12);
Balken(151,farbe13);
Balken(190,farbe14);
// End -->
</script>
... wird diese Statistik angezeigt:
Umsetzung durch die Anzeige von Grafiken
Ich verwende unterschiedliche keine Grafiken, die mit 'gelogenen' Größenangaben gezerrt dargestellt werden. Diese Grafiken werden durch gemogelte Angaben auf die benötigte Größe gezogen oder gestaucht. Man kann einfarbige oder Grafiken mit einem Verlauf einsetzen.
|
Eine einzige Grafik würde ausreichen wenn das aussagekräftig genug ist. Mit Farbverlaufs-Grafik kann man den Statistik-Graphen lebendiger gestalten.
|
|
Ihnen stehen allerdings 18 unterschiedliche Grafiken zur Verfügung. Wenn das nicht reicht, fügen Sie eigene Grafiken hinzu.
|
Hier werden (wenn Sie möchten mehrere) farbige Grafiken benötigt. Alles Andere wurde mittels JavaScript- und CSS-Anweisungen umgesetzt und formatiert. Sie bestimmen durch die Auswahl der Farb-Bezeichnung die Farbe der Balken.
Ich habe bereits 18 farbige Grafiken eingebunden, natürlich können Sie das ändern und auch eigene Grafiken verwenden. Die hier angezeigten Grafiken sind im Download enthalten.
Anpassungen
Die Höhe der Balken, den horizontalen Abstand und auch die Textformatierungen (für die angezeigten Zahlenwerte) können Sie für alle Balkenanzeigen global durch Eintragungen im Script / den CSS-Angaben ändern.
var Hoehe = 10;
var HoeheAbstand = 5;
.BalkenText {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:normal;
color: #4F4F4F;
}
Beispiel Grafik mit Farbverlauf
Für Balken mit Farbverlauf verwende ich hier jedesmal die Gleiche Grafik, die ebenfalls durch gemogelte Angaben auf die benötigte Größe gezogen oder gestaucht wird.
verwendete Grafik: 
<script type="text/javascript" language="JavaScript">
<!-- Begin
Balken(340,farbe30);
Balken(280,farbe30);
Balken(210,farbe30);
Balken(175,farbe30);
Balken(290,farbe30);
// End -->
</script>
Speicherort für die Grafiken
Der Speicherort für die Grafiken wird im gleichen Ordner angenommen. Sie können das aber selbst entscheiden und ändern lediglich die Angaben im Script.
...
var farbe12 = "block-12.gif"
var farbe13 = "block-13.gif"
var farbe14 = "block-14.gif";
...
...
var farbe12 = "unterordner/block-12.gif"
var farbe13 = "grafiken/block-13.gif"
var farbe14 = "grafiken/block-14.gif";
...
 Balkengrafik 01-A
Balkengrafik 01-B
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
Beispiel-1
Download
