Statistik 3
    
HOME
Quelltext  ZURÜCK SITEMAP  

 Statistik 03 (vertikal)

Ich hatte ein wenig erperimentiert und herumprobiert. Unter Umständen ist das für sie sogar ganz brauchbar und können dieses Beispiel irgendwo einsetzen. Deshalb möchte ich ihnen das Ergebnis nicht vorenthalten. Übrigens gibt es auch eine Variante für die horizontale Darstellung

 29.05.2008

Statistik für vertikale Balkendiagramme mit Legende

Die erste Funktion schreibt den Grafen, die zweite die Legende. Hier werden zur Darstellung des Grafen Grafiken verwendet!

a) Für den Grafen schreibt das Script eine Tabelle. Für jeden vertikalen Balken wird eine Tabellenzelle geschrieben, deren Inhalt ein farbiges Image in der Größe der übergebenen / errechneten Werte ist.

b) Die Statistik-Legende mit Farbblock, Text und Statistik-Wert wird schreibt die Erklärung für jeden Balken in eine Zeile, Das Prozentzeichen ist optional.

Beispiel:

Im Beispiel rechts wird die Funktion 'Vertikal' 5 mal mit unterschiedlichen Übergabewerten aufgerufen.

Die Legende wird durch den 5-maligen Aufruf der Funktion 'Legende' geschieben.
Verkehrsaufkomen in Prozent


Der grüne Balken z.B. ist die Grafik '05.gif' (), deren Abmessungen auf 104 x 15 Pixel gezerrt wurde.
Statistik:

Einstellbare Größen im Script
  • Wert Balkenbreite
  • Wert Balkenhöhe
  • Multiplikator (Balkenhöhe)
  • Imagename (Balkenfarbe)
 Legende:
  • Imagename (Farbe)
  • Text
  • Wert
  • Prozentzeichen (optional)
Textformatierung mit CSS
  • Schriftfamilie (font-family)
  • Schriftgröße (font-size)
  • Schriftfarbe (color)
Beispiel 01

Verkehrsaufkommen beim Jungbauerntreffen in Geilenkirchen
2005 2006 



Beispiel 02

Anzahl der Dateien im Web-Projekt für Jupp Zupp






   Aufruf im Body, Beispiel 

<script type="text/javascript" language="JavaScript"">
<!--

TabelleAnfang();

// Balkenbreite,Wert,Multiplikator,Nummer,Prozent

Vertikal(30,150,0.5,"18")   // Pferde
Vertikal(30,100,0.5,"17")   // Esel
Vertikal(30,170,0.5,"15")   // Maultiere
Vertikal(30,100,0.5,"16")   // Ochsen
Vertikal(30,60,0.5,"14")    // Kamele
TabelleEnde();

//-->
</script>
Übergabeschema: 
Vertikal("30",150,0.5,"18")

Vertikal("Breite",Wert,Multiplikator,"Grafik-ID")
Der Multiplikator kann auch eine Dezimalzahl (z.B. 0.3) sein! Bitte beachten: Das Dezimalzeichen ist ein Punkt! 

<script type="text/javascript" language="JavaScript"">
<!--

// Text,Wert,Nummer,Prozent

Legende("Pferde",150,"18",0)
Legende("Esel",100,"17",0)
Legende("Maultiere",150,"15",0)
Legende("Ochsen",100,"16",0)
Legende("Kamele",60,"14",0)
//-->
</script>
Übergabeschema: 
Vertikal("Pferde",150,18,"0")

Vertikal("Text",Wert,Grafik-ID,"Prozent ja/nein")


Resultat:

Transportwesen, wer zieht den Karren?

    


Als Grafik-ID wurde für den Balken 'Pferde' der Wert '18' eingetragen. Das resultiert in die Einbindung der Grafik '18.gif'. Eine pinkfarbene GIF-Grafik die für die Darstellung des vertikalen Balkens auf die entsprechende Größe gezerrt wird.



   verwendbare Grafiken für dieses Beispiel:

rechtsklicken zum Download



Weitere Images (insgesamt 44) dieser Reihe gibts in meiner MINI-IMAGE-BOX im Menü 'Aufzählungszeichen / Listelemente (erster Menüpunkt - Block 10 x 10).


MINI-IMAGE-BOX  



Zur Anpassung der Schrift mit CSS:

Element    Bezeichner   hier im Beispiel  
Schriftfamilie font-family Arial,Helvetica 
Schriftgröße font-size 11px
Schriftfarbe color #000000










NACH OBEN