Parameter der Funktion zweibarchart

Definition

zweibarchart($data_ar, $barcolor, $charttitle, $maxposval, $minnegval, $barwidth, $boxheight, $hideordinate, $hideabscissa, $hidebarlabel, $showaverage, $helplines, $bodycolor, $boxcolor);

Für die Funktion zweibarchart() sind 14 Parameter definiert.
Aber keine Angst: Normalerweise werden Sie davon nur die ersten paar verwenden. Die restlichen Parameter dürfen sie einfach auf 0 setzen - oder weglassen.

Ein Aufruf ohne Funktionsparameter

zweibarchart();

Ein einfacher Aufruf ohne Funktionsparameter kann als vorläufiger Platzhalter dienen.

zweibarchart is missing css file!

-10 z -15 w -5 e 5 i 10 b 20 a 30 r 25 chart
5
10
15
20
25
30
0
-5
-10
-15

1. Parameter: Die Nutzdaten ausgeben

zweibarchart($data_ar);

Die Nutzdaten werden in Form eines Arrays übergeben:
$data_ar = array("a" => "10", "b" => "20.5", "c" => "0", "d" => "40", "e" => "-10", "f" => "-15");
Die Schlüssel des Arrays bilden die Bezeichnungen der Säulen auf der Abszisse. Ohne Angabe von Schlüsseln werden die Säulen mit 0, 1, 2, ... benannt. Arraywerte ohne Inhalt werden als Säulen der Höhe null dargestellt.

zweibarchart("data.csv");

Alternativ kann auch direkt der Name (und ggf. der Dateipfad) einer CSV-Datei angegeben werden, die die Nutzdaten enthält. Im erzeugenden Tabellenprogramm sind die Daten so angelegt:

 ABCDEF
1abcdef
21020.5040-10-15

zweibarchart is missing css file!

10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

2. Parameter: Die Farbe(n) setzen

zweibarchart($data_ar, "#3c3");

Nun kommt Farbe ins Spiel: alle Säulen erhalten die Farbe hellgrün.

zweibarchart($data_ar, "greenapple.png");

Statt eines Farbwerts (wie #3c3) oder Farbnamens (wie red) kann hier auch eine Grafikdatei angegeben werden.

zweibarchart is missing css file!

10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart($data_ar, $datacolor_ar);

Wenn statt eines Strings ein Array übergeben wird, erhält jede Säule die im Array über den entsprechenden Schlüssel zugeordnete Farbe:
$datacolor_ar = array("a" => "#f11", "b" => "#F52", "c" => "#f73", "d" => "#fb3", "e" => "#fd3", "f" => "#fe4");

zweibarchart($data_ar, $gradient_ar);

Ein Farbverlauf über alle Säulen erscheint, wenn ein Array mit zwei Farbwerten (Anfang, Ende) oder drei Farbwerten (Anfang, Mitte, Ende) übergeben wird:
$gradient_ar = array("#c0c", "#09c");

zweibarchart is missing css file!

10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

3. Parameter: Das Diagramm benennen

zweibarchart($data_ar, "#3c3", "Das Diagramm erhält einen Titel.");
zweibarchart($data_ar,"#3c3", $title_ar);

Das Diagramm erhält einen Titel in der Farbe der ersten Säule.

Wenn ein Array übergeben wird, können auch Abszisse und Ordinate eine Bezeichnung erhalten. Außerdem ist damit eine Fußnote möglich. Als fünftes Element kann die Farbe als Wert oder Name angegeben werden.
Das Titelarray ist hier:
$title_ar = array("Mit Titel, Abszisse, Ordinate und Fußnote", "Daten", "Werte", "Quelle: unbekannt","orange");

zweibarchart is missing css file!

Das Diagramm erhält einen Titel.
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Mit Titel, Abszisse, Ordinate und Fußnote
10 a 20.5 b 0 c 40 d -10 e -15 f Daten
5
10
15
20
25
30
35
40
0
-5
-10
-15
Werte
Quelle: unbekannt

4. und 5. Parameter: Die Ordinate skalieren

zweibarchart($data_ar, 50, "Maximalwert fest skaliert");
zweibarchart($data_ar,0,-30, "Minimalwert fest skaliert");

Mit Übergabe eines maximalen positiven Werts (anstatt Defaultwert 0) skaliert die Ordinate ("y-Achse") des Diagramms nicht mehr automatisch auf die größte positive Säule.

Analog gilt: Mit Übergabe eines minimalen negativen Werts (anstatt Defaultwert 0) skaliert die Ordinate des Diagramms nicht mehr automatisch auf die größte negative Säule.

Mit identischen festen positiven Maximal- und negativen Minimalwerten kann man mehrere Diagramme leichter vergleichen.

zweibarchart is missing css file!

Maximalwert fest skaliert
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
45
50
0
-5
-10
-15

zweibarchart is missing css file!

Minimalwert fest skaliert
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15
-20
-25
-30

6. Parameter: Die Breite der Säulen einstellen

zweibarchart($data_ar, "#3c3", "Breitere Säulen machen mehr Eindruck", 0, 0, 20);
zweibarchart($data_ar,"#3c3","Schmale Säulen",0,0,5);

Die Säulenbreite kann zwischen 2 und 50 Pixel einstellt werden. Der Defaultwert (0) bewirkt 10 Pixel.

Bei einer negativen Breite werden die Säulen ohne Abstand gezeichnet (Histogramm).

zweibarchart is missing css file!

Breitere Säulen machen mehr Eindruck
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Schmale Säulen
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

7. Parameter: Die Höhe des Diagramms einstellen

zweibarchart($data_ar, "#3c3", "Höheres Diagramm", 0, 0, 0, 300);
zweibarchart($data_ar, "#3c3", "Flacheres Diagramm", 0, 0, 0, 100);

Die Diagrammhöhe kann zwischen 50 und 500 Pixel eingestellt werden. Der Defaultwert (0) bewirkt 200 Pixel.

zweibarchart is missing css file!

Höheres Diagramm
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Flacheres Diagramm
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

8. Parameter: Die Ordinate beschriften

zweibarchart($data_ar, "#3c3", "Ordinate unbeschriftet", 0, 20, 0, 0,1);
zweibarchart($data_ar, "#3c3", "Ordinate teilbeschriftet", 0, 0, 0, 0, -2);

Mit dem Wert 1 bleibt die Ordinate unbeschriftet.

Mit Angabe eines negativen Teilers -n erfolgt die Beschriftung der Ordinate nur bei jedem n. Wert.

zweibarchart is missing css file!

Ordinate unbeschriftet
10 a 20.5 b 0 c 40 d -10 e -15 f

zweibarchart is missing css file!

Ordinate teilbeschriftet
10 a 20.5 b 0 c 40 d -10 e -15 f
10
20
30
40
0
-10

zweibarchart($data_ar, "#3c3", "Ordinate blau beschriftet", 0, 0, 0, 0, "#99f");

Mit Angabe eines Farbwerts wird die Ordinatenbeschriftung eingefärbt.

zweibarchart is missing css file!

Ordinate blau beschriftet
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

9. Parameter: Die Abszisse beschriften

zweibarchart($data_ar, "#3c3", "Abszisse unbeschriftet", 0, 0, 0, 0, 0, 1);
zweibarchart($data_ar, "#3c3", "Abszisse teilbeschriftet", 0, 0, 0, 0, 0, -2);

Mit dem Wert 1 bleibt die Abszisse ("x-Achse") unbeschriftet.

Mit Angabe eines negativen Teilers -n erfolgt die Beschriftung der Abszisse nur unter jedem n. Balken.

zweibarchart is missing css file!

Abszisse unbeschriftet
10 20.5 0 40 -10 -15
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Abszisse teilbeschriftet
10 a 20.5 0 c 40 -10 e -15
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart($data_ar, "#3c3", "Abszisse blau beschriftet", 0, 0, 0, 0, 0, "#99f");

Mit Angabe eines Farbwerts wird die Abszissenbeschriftung eingefärbt.

zweibarchart is missing css file!

Abszisse blau beschriftet
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart($datalong_ar, "#3c3", "Abszisse mit Legende", 0, 0, 0, 0, 0, 2);

Mit dem Wert 2 erhält die Abszisse die Beschriftung in Form einer Legende.
Das Array der Beispieldaten ist hier:
$datalong_ar = array("Berlin" => 10, "Hamburg" => 20.5, "München" => 0, "Köln" => 40, "Frankfurt" => -10, "Stuttgart" => -15);

zweibarchart($datalong_ar, $gradient_ar, "Abszisse mit Farblegende", 0, 0, 0, 0, 0, 2);

Wenn dabei die Säulen unterschiedlich gefärbt sind (hier ein Farbverlauf), wird auch die Legende mit Farben versehen.

zweibarchart is missing css file!

Abszisse mit Legende
10 A 20.5 B 0 C 40 D -10 E -15 F
5
10
15
20
25
30
35
40
0
-5
-10
-15
A:Berlin B:Hamburg C:München D:Köln E:Frankfurt F:Stuttgart

zweibarchart is missing css file!

Abszisse mit Farblegende
10 20.5 0 40 -10 -15
5
10
15
20
25
30
35
40
0
-5
-10
-15
 Berlin  Hamburg  München  Köln  Frankfurt  Stuttgart

10. Parameter: Die Säulen beschriften

zweibarchart($data_ar, "#3c3", "Säulen unbeschriftet", 0, 0, 0, 0, 0, 0, 1);
zweibarchart($data_ar, "#3c3", "Säulen blau beschriftet", 0, 0, 0, 0, 0, 0, "#66f");

Mit dem Wert 1 bleiben die Säulen unbeschriftet. Die Werte lassen sich dann durch Überfahren mit dem Mauszeiger ermitteln.

Mit Angabe eines Farbwerts wird die Beschriftung der Säulen eingefärbt.

zweibarchart is missing css file!

Säulen unbeschriftet
a b c d e f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Säulen blau beschriftet
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart($data_ar, "#3c3", "Säulen innen beschriftet", 0, 0, 20, 0, 0, 0, 2);

Mit dem Wert 2 werden die Säulen innen in einer kontrastierenden Farbe beschriftet. Die Säulenbreite sollte passend gewählt sein. Kurze Säulen (kleiner 10 Pixel) werden nicht beschriftet.

zweibarchart is missing css file!

Säulen innen beschriftet
10 a 20.5 b c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

11. Parameter: Eine Mittelwertlinie zeigen

zweibarchart($data_ar, "#3c3", "Mittelwert", 0, 0, 0, 0, 0, 0, 0, 1);
zweibarchart($data_ar, "#3c3", "Mittelwert", 0, 0, 0, 0, 0, 0, 0, "#f83");

Zum Vergleich der Säulenhöhen kann es hilfreich sein, eine gepunktete Mittelwertlinie (arithmetisches Mittel) in der Säulenfarbe zu erzeugen. Die Linie erscheint, wenn mindestens zwei Säulen existieren und die Linie nicht mit der Grundlinie zusammenfällt.

Mit Angabe eines Farbwerts wird die Mittelwertlinie eingefärbt.

Der genaue Wert kann durch Überfahren der ∅-Markierung mit dem Mauszeiger ermittelt werden.

zweibarchart is missing css file!

Mittelwert
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15
 

zweibarchart is missing css file!

Mittelwert
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15
 

12. Parameter: Die Hilfslinien abschalten oder färben

zweibarchart($data_ar, "#3c3", "Ohne Hilfslinien", 0, 0, 0, 0, 0, 1);
zweibarchart($data_ar, "#3c3", "Blaue Hilfslinien", 0, 0, 0, 0, 0, "#aaf");

Die Hilfslinen werden automatisch in "glatten" Schrittweiten (1, 2, 5, 10, 20, ...) erzeugt. Mit 1 werden (außer der Grundlinie) keine Hilfslinien erzeugt.

Mit Angabe eines Farbwerts werden die Hilfslinien eingefärbt.

zweibarchart is missing css file!

Ohne Hilfslinien
10 a 20.5 b 0 c 40 d -10 e -15 f
0

zweibarchart is missing css file!

Blaue Hilfslinien
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

13. Parameter: Die Außenfarbe variieren

zweibarchart($data_ar, "#3c3", "Außenfarbe", 0, 0, 0, 0, 0, 0, 0, 0, 0, "#325");
zweibarchart($data_ar, "#3c3", "Farbverlauf", 0, 0, 0, 0, 0, 0, 0, 0, 0, "gradient.png");

Die Farbe außerhalb des Diagramms kann frei gewählt werden. Die Standardfarbe (mit Wert 0) ist "#eee" (hellgrau).

Statt eines Farbwerts (wie #325) oder Farbnamens (wie grey) kann hier auch eine Grafikdatei angegeben werden.

zweibarchart is missing css file!

Außenfarbe
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Farbverlauf
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

14. Parameter: Die Hintergrundfarbe variieren

zweibarchart($data_ar, "#3c3", "Hintergrundfarbe", 0, 0, 0, 0, 0, 0, 0, 0, 0 ,0 , "#ffd");
zweibarchart($data_ar, "#3c3", "Farbverlauf", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, "gradient.png");

Die Hintergrundfarbe der Grafik kann frei gewählt werden. Die Standardfarbe (mit Wert 0) ist "#fff" (weiß).

Statt eines Farbwerts (wie #ffd) oder Farbnamens (wie grey) kann hier auch eine Grafikdatei angegeben werden.

Wird statt eines Farbwerts bzw. Farbnamens oder einer Grafikdatei ein Array übergeben, so wird darin im ersten Wert die Hintergrundfarbe und im zweiten Wert die Rahmenfarbe definiert.

zweibarchart is missing css file!

Hintergrundfarbe
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

zweibarchart is missing css file!

Farbverlauf
10 a 20.5 b 0 c 40 d -10 e -15 f
5
10
15
20
25
30
35
40
0
-5
-10
-15

Und nun alle Parameter zusammen

zweibarchart($data_ar, $datacolor_ar, array("Alle Parameter zusammen","→x","y↑","Quelle: unbenannt","orange"), 50, -30, 20, 300, "#99f", "#99f", "#66f", "#f83", 12, "#325", array("gradient.png","orange"));

Natürlich ist das Ergebnis nicht eben schön. Aber es zeigt die Möglichkeiten von zweibarchart.

Am besten, Sie probieren mit dem Live-Test aus, was sich mit zweibarchart alles anstellen lässt. Oder sehen Sie sich weitere Beispiele an.

Oder noch ganz anders? Wenn Ihnen die Einstellmöglichkeiten auf dieser Seite nicht genügen, können Sie direkt in zbc-styles.css alle Styles modifizieren, die nicht über die Parameter von zweibarchart erreichbar sind. So sind auch Schriftfamilie, Schriftgrößen, Positionen etc. individuell wählbar.

zweibarchart is missing css file!

Alle Parameter zusammen
10 a 20.5 b 0 c 40 d -10 e -15 f →x
5
10
15
20
25
30
35
40
45
50
0
-5
-10
-15
-20
-25
-30
y↑
 
Quelle: unbenannt

Und sonst? Mit den Varianten sind weitere Ausgaben möglich.