Statistik 3-B Balkendiagramm
 HomeDiverses • Statistik Balkendiagramm  DOWNLOAD  Demo   Quelltext 

Statistik-Graph 03-B - Balkendiagramm   (vertikal)

Ich hatte ein wenig erperimentiert und herumprobiert. Möglicherweise können sie dieses Script zur Darstellung der Ergebnisse der anstehenden Wahlen einsetzen. Das Script ist allerdings auch für andere Einsatzbereiche ganz brauchbar (siehe unten).
chart statistik graph balkengrafik diagram vertikal

Statistik für vertikale Balkendiagramme mit Legende

Das Beispiel 'Statistik 03-A' habe ich überarbeitet, Formatierungen nun mit CSS festgelegt und das Srcipt für den Einsatz flexibler gestaltet. Das Statistik-Graf-Script eignet sich jetzt für den mehrmaligen Einsatz innerhalb einer Seite, z.B. für Vergleiche.

Der Text für die Titelzeile wird in der neuen Version dem Script übergeben. Außerdem wird die Mindestgröße des gesamten Grafen mit Titeltext und Rand über CSS definiert, was eine einheitliche Darstellung von mehreren Grafen auch dann gewährleistet, wenn die Höhe des größten Balkens jeweils unterschiedlich ist. Beispiel:



Eine Funktion schreibt den jeweiligen vertikalen Balken, eine andere die zugehörige Legende. Hier werden zur Darstellung farbige Grafiken verwendet, deren Größe durch das Script berechnet werden!

a) Für den Statistik-Graf schreibt das Script eine Tabelle. Oben wird eine Titelzeile angezeigt. Die linke Zelle darunter enthält später das Diagramm, die rechte die Legende.

b) Für jeden vertikalen Balken wird ein <img>-Tag für eine Grafik geschrieben. Durch die URLs für die farblich unterschiedlichen Grafiken wird die Farbe bestimmt. Die Größe entspricht der übergebenen / errechneten Wert und der festgelegten Breite.

c) Die Statistik-Legende schreibt die Erklärung für jeden Balken mit Farbblock, Text und Statistik-Wert. Ein Prozentzeichen kann optional angezeigt werden.




   Beispiel 1-A

Die Anzahl der Funktionsaufrufe mit den gewünschten Werten und Angaben für die farbige Grafik bestimmt das Erscheinungsbild des Statistik-Grafen. Da ich in die Berechnung für die Größendarstellung einen variablen Wert als Multiplikator verwende, kann die Balkenhöhe proportional verkleinert / vergrößert werden.

Im Beispiel rechts wird die Funktion 'Balken' 6 mal mit unterschiedlichen Übergabewerten aufgerufen.

Die Legende wird durch den 6-maligen Aufruf der Funktion 'Legende' geschieben.

Multiplikator: 0.3


Im Beispiel rechts wird die Funktion 'Balken' 6 mal mit unterschiedlichen Übergabewerten aufgerufen.

Die Legende wird durch den 6-maligen Aufruf der Funktion 'Legende' geschieben.

Multiplikator: 0.5


Der violette Balken z.B. ist die Grafik '07.gif' (), deren Abmessungen auf 30 x 18 Pixel gezerrt wurde.


   Funktionsaufrufe

Der Einsatz der Funktionen für die Statistik sollte simpel aber auch möglichst flexibel sein. Daher habe ich die Formatierung und einige Größen global festgelegt, andere werden jeweils beim Aufruf übergeben. Dadurch können die Balken individuell gestaltet werden.

Die 6 Balken werden durch den 6-maligen Aufruf der Funktion 'Balken' in das Dokument geschrieben:

Aufruf:

Balken(180,0.5,"14")
Balken(60,0.5,"07")
Balken(80,0.5,"08")
Balken(90,0.5,"03")
Balken(40,0.5,"01")
Balken(60,0.5,"13")
Ergebnis:


Die Breite der Balken ist global und für alle gleich in der Variablen 'Breite' festgelegt (hier 18 Pixel).


Werteübergabe bei der Funktion 'Balken'

Aufruf der Funktion 'Balken' für die Säulen Trecker (violett) und Mopeds (gelb):



Die Höhe des violetten Balkens wird beim Aufruf der Funktion 'Balken' durch die Übergabe des Wertes 60 definiert. Bei der Berechnung innerhalb der Funktion wird allerdings der ebenfalls übergebene Multiplikator von 0.5 berücksichtigt, der alle Höhen halbiert. Wäre z.B. ein Multiplikator von 1 festgelegt, würden die Balken in originaler Größe angezeigt. Wäre z.B. ein Multiplikator von 2.3 festgelegt, würden die Balken in 2,3-facher Größe angezeigt.


Werteübergabe bei der Funktion 'Legende'

Aufruf der Funktion 'Legende' für die Legenden Trecker (violett) und Mopeds (gelb):



Zur Festlegung der Farbe übermittle ich einen zweistelligen Farbcode.




   Beispiel 1-B

Bei der Legende ist ein weiterer Wert vorgesehen der als Schalter (ein/aus) zur Anzeige des Prozentzeichens eingesetzt wird.

Im Beispiel rechts wird die Funktion 'Balken' 6 mal mit unterschiedlichen Übergabewerten aufgerufen.

Die Legende wird durch den 6-maligen Aufruf der Funktion 'Legende' geschieben.



   Anpassungsmöglichkeiten

Hier die Formatierungsanweisungen für den Statistik-Grafen, die sie so belassen können (siehe Demo) oder aber ändern / anpassen könnten.  (optional)

Gesamtdarstellung:

Eigenschaften
Breite
Höhe
Rand
Hintergrundfarbe
HintergrundGrafik
CSS-Notierung
width:250px;
height:140px;
border:1px solid #BFBFBF;
background-color:#F0F4FF;
background:url(dateiname.gif) #F0F4FF top left;

Titelzeile:

Eigenschaften
Font
Schriftgröße
Textfarbe
Hintergrundfarbe
HintergrundGrafik
Innenabstand
Höhe
CSS-Notierung
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color:#AAAACC;
background:url(dateiname.gif) #F0F4FF top left;
padding: 2px;
height:20px;

Text Legende:

Eigenschaften
Font
Schriftgröße
Textfarbe
CSS-Notierung
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
color: #FFFFFF;

Einstellbare Werte im Script:

Eigenschaften
Wert Balkenbreite
Wert Balkenabstand
Pfad + Name Grafiken
Variablen
var Balkenbreite = 18;
var BalkenAbstand = "2";
var PfadName = "images/";

Die Grafiken in meinem Beispiel sind im Unterordner 'images' abgelegt. Das können sie ändern, müssen dann aber den Pfad für die Grafiken, der im Script mit

var PfadName = "images/";

festgelegt ist, entsprechend ändern.

Übrigens vervollständigt das Script, abhängig von der übergebenen Farbcode-Nummer / Grafik-Nummer die URL für die farbigen Grafiken. Zum Beispiel für die Farbcode-Nummer '09' (hier rot dargestellt):

Grafik = "images/09.gif";




   Beispiel 2

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

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

Demo mit geänderten CSS-Formatierungen






   Beispiel 3

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

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

Demo mit geänderten CSS-Formatierungen






   Code

Der Aufruf im Body-Bereich

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

TabelleAnfang("Kommunalwahl 2004 - Sitze im Stadtrat");

// Wert, Multiplikator, FarbcodeNummer
Balken(21, 4.5, "09")
Balken(6, 4.5, "04")
Balken(4, 4.5, "08")
Balken(4, 4.5, "13")
Balken(3, 4.5, "15")

TabelleMitte()

// FarbcodeNummer, Text, Wert, Prozent nein/ja (0/1)
Legende("09", "CDU", "21", 0)
Legende("04", "SPD", "6", 0)
Legende("08", "FDP", "4", 0)
Legende("13", "Bürgerliste", "4", 0)
Legende("15", "Grüne", "3", 0)

TabelleEnde();

//-->
</script>
... erzeugt diese Darstellung:





   verwendbare Grafiken:

Die Grafiken in mmeinem Beispiel sind im Unterordner 'images' abgelegt. Das können sie ändern, müssen dann aber den grundstzlichen Pfad für die Grafiken, der im Script mit
// Pfad + ertster Teil des Dateinamens farbige Grafik
var PfadName = "images/";
festgelegt ist, entsprechend ändern.

Übrigens vervollständigt das Script, abhängig von der übergebenen Farbcode-Nummr / Grafik-Nummer die URL für die farbigen Grafiken. Zum Beispiel für die Grafik-Nummer '09' (hier rot dargestellt):
var PfadName = "images/09.gif";


Grafiken '01.gif' bis '17.gif' rechtsklicken zum Download

(Grafiken sind im Download enthalten)



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


MINI-IMAGE-BOX  









 Statistik-Graph 01 Balkendiagramm horizontal

 Statistik-Graph 02 Balkendiagramm horizontal mit Skala

 Statistik-Graph 03-A Balkendiagramm vertikal

 Statistik-Graph 04 Balkendiagramm vertikal