Vorlage:ChartDirekt/Doku

Wikipedia.de Vorlage: ChartDirekt/Doku

Infos

Diese Vorlage vereinfacht das Erstellen von einfachen Grafiken mithilfe des neuen Chart-Features. Es baut auf der Transform-Funktionalität auf und benutzt das Commons-Modul c:Module:Graph:Chart. Einige Parameternamen wurden bewusst zur besseren Kompatibilität mit dem früheren Graph:Chart-Feature gesetzt.

Kopiervorlage

Ohne eigenen Vorgabechart

{{ChartDirekt | type= | x= | y1= | y1Title= 
| y2= | y2Title=
| y3= | y3Title=
| y4= | y4Title=
| y5= | y5Title= 
| Breite=
}}

Mit eigenem Vorgabechart

{{ChartDirekt | Definition= | x= | y1= | y1Title= 
| y2= | y2Title=
| y3= | y3Title=
| y4= | y4Title=
| y5= | y5Title= 
| Breite=
}}

Einfacher Chart (nur X und Y), besonders interessant für Tortendiagramme

{{ChartDirekt | type= | x= | y= | Breite=
}}

Templatedata

Vorlagenparameter

Parameter		Beschreibung	Typ	Status
x	`x`	Darstellung der x-Achse. Hinweis: bei Pie-Charts soll entweder nur x und y gesetzt werden oder y1-y15 wie benötigt.	Einzeiliger Text	vorgeschlagen
xTitle	`xTitle`	Möglichkeit der x-Achse einen Titel zu vergeben, falls die Wertereihe auf x und y Werten besteht bei allen Plots ausser Pie-Charts	Einzeiliger Text	optional
y	`y`	Darstellung der y-Achse. Hinweis: Werte y und y1-y15 sind nicht kombinierbar. Wenn y verwendet wird, anstatt y1. Dann wird jeder Eintrag als neue Datenreihe interpretiert. Die Datenreihen sind aktuell auf 15 Werte beschränkt. Dies ist besonders bei Tortendiagrammen (Pie-Charts) und gewissen Balkendiagrammen (Bar-Charts) nützlich	Einzeiliger Text	optional
yTitle	`yTitle`	Darstellung der y-Achse	Einzeiliger Text	optional
y1	`y1`	Werte für erste Datenreihe auf y-Achse, kommesepariert. Weitere Parameter y2-y15 sind unterstützt. Die Länge der Datenreihe y1 ist nicht auf 15 Werte beschränkt Beispiel 1990,2000,2010	Zahlenwert	vorgeschlagen
y1Title	`y1Title`	Beschreibung für erste Datenreihe auf y-Achse, kommesepariert. Eine Beschreibung ist für jede definierte Datenreihe erforderlich (also z.B. y1 und y1Title). Weitere Parameter y2-y15 sind unterstützt Beispiel Jahr	Einzeiliger Text	vorgeschlagen
Chart-Vorlage	`Definition`	Data:...chart auf Wikimedia Commons. Vorlage Chart, der mit den eingegebenen Daten überschrieben wird. Alternativ kann auch auf Vorlagen mit dem Parameter `type` zurückgegriffen werden.	Datei	optional
Verwendung von Vorgabecharts	`type`	Data:...chart auf Wikimedia Commons. Voreingestellte Charts, die ausgewählt werden basierend welcher Plottyp gewünscht ist. Wenn Parameter `Definition` gesetzt ist, dann wird diese Einstellung nicht beachtet. Vorgeschlagene Werte `bar` `pie` `line` `area` Standard bar	Einzeiliger Text	optional
xType	`xType`	Datenformat der x-Achse, so kann zum Beispiel auch ein Datumsformat definiert werden oder eine beschreibende Achse (string) Vorgeschlagene Werte `number` `integer` `date` `string`	Einzeiliger Text	optional
yType	`yType`	Datenformat der y-Achse, so kann zum Beispiel auch ein Datumsformat definiert werden oder eine beschreibende Achse (string) Vorgeschlagene Werte `number` `integer` `date` `string`	Einzeiliger Text	optional
swap	`swap`	Falls bei einem schon erstellten Chart die Zeilen/Spaltenlogik umgestellt werden soll, so kann das durch den `swap` Parameter transponiert werden. Es können maximal 15 Werte transponiert werden. Standard `0`	Wahrheitswert	optional
Titel	`Titel`	Titel der Grafik	Einzeiliger Text	optional
Ausrichtung	`Ausrichtung`	Vorgeschlagene Werte `links` `left` `rechts` `right` `zentriert` `center`	Einzeiliger Text	vorgeschlagen
Breite	`Breite`	Vorgeschlagene Werte `400px` `600px` `50%` `100%`	Einzeiliger Text	vorgeschlagen
Rahmen	`Rahmen`	Standard 0 (aus)	Wahrheitswert	optional
Quellenangabe	`Quelle`		Einzeiliger Text	vorgeschlagen
CSS-Stile	`style`	Weitere CSS-Stile (über Breite und Rahmen hinausgehend)	Einzeiliger Text	optional

Beispiele

Generell

{{ChartDirekt
|type=bar
|x=Morgen,Mittag,Abend
|xType=string
|y1=20,4,80
|y1Title=Oranges
|y2=3,6,9
|y2Title=Bananas
|y3=20,18,15
|y3Title=Apples
|Rahmen=1
|Breite=400px
|Quelle=eine seriöse Quelle
}}

Fruchttrend

Diagrammdefinitionsseite nicht gefunden.

eine seriöse Quelle

{{ChartDirekt
|type=area
|x=1,5,100
|y1=20,4,80
|y1Title=Oranges
|y2=3,6,9
|y2Title=Bananas
|y3=20,18,15
|y3Title=Apples
|y4=3,25,15
|y4Title=Mangos
|y5=5,5,15
|y5Title=Grapes
|Breite=50%
}}

Diagrammdefinitionsseite nicht gefunden.

Einfacher Piechart (Tortendiagramm)

{{ChartDirekt
|type=pie
|x=Oranges, Strawberries, Pineapple
|y=58,23,77
|Breite=400px
|Ausrichtung=links
}}

Diagrammdefinitionsseite nicht gefunden.

Piechart (Tortendiagramm) mit Komma

Da das Komma als Datentrenner fungiert, muss man das umgehen wenn man ein Komma in der Legende möchte.

{{ChartDirekt
|type=pie
|y1Title=Oranges, Tangerines, Lemons
|y2Title=Strawberries, Blueberries, Raspberries 
|y3Title=Pineapples
|y1=58
|y2=23
|y3=77
|Breite=400px
|Ausrichtung=links
}}

Diagrammdefinitionsseite nicht gefunden.

Quasi Beschriftung der X-Achse

{{ChartDirekt
|type=bar
|x=Oranges, Strawberries, Pineapple
|xTitle=Fruit
|y=58,23,77
|Breite=400px
|Ausrichtung=rechts
}}

Diagrammdefinitionsseite nicht gefunden.

Minimalistischer Plot

{{ChartDirekt
|y=58,23,77
|yTitle=Passionfruit
|Breite=400px
}}

Diagrammdefinitionsseite nicht gefunden.

Mit eigenem Vorgabechart

Durch setzen des Parameters Definition kann eine eigene Vorlage ausgewählt werden. Der Vorteil liegt hier in einer etwas grösseren Möglichkeit den Chart anzupassen, insbesondere sind Achsenbeschriftungen möglich. Um derartige Vorlagen zu erzeugen kann man zunächst den Commonslink erzeugen durch c:Data:Gewünschter Name.chart. Die Daten kann man dann ersetzen, indem man entweder einen bestehenden Vorgabechart kopiert und den Bedürfnissen entsprechend anpasst oder von Grund auf einen neuen erzeugt. Wichtig ist, die Transform-Section einzufügen, damit das Commons-Modul Zugriff hat.

Transform-Section

Weitere Informationen und Hintergründe finden sich beim Commons-Modul c:Module:Graph:Chart.

    "transform": {
        "module": "Graph:Chart",
        "function": "main",
        "args": {
            "x": "1,5",
            "y": "10,15"
        }
    },
    "source": "Graph:Chart.tab"

Beispiel mit Vorgabechart

{{ChartDirekt
|Titel=Bevölkerungsentwicklung von Hinzhausen
|Definition=Template line population by year.chart
|x=1980,1990,2000,2010,2020
|y1=98,87,201,252,325
|y1Title=Einwohner
|Breite=50%
}}

Bevölkerungsentwicklung von Hinzhausen

Diagrammdefinitionsseite nicht gefunden.

Swap

Die Swap Funktion ermöglicht es die Achsen bei gleicher Eingabe anzupassen, so dass der Chart transponiert wird. Untenstehendes Beispiel zeigt wie das aussieht. Dies erspart ein umständliches Anpassen der Werte, wenn es ungünstig aussieht. Die Swap-Funktion ermöglicht es auch zu "spielen", welche Darstellung besser aussieht ohne viel Aufwand.

{{ChartDirekt
 |y1Title=Bregenz|y2Title=Eisenstadt|y3Title=Graz|y4Title=Innsbruck|y5Title=Klagenfurt|y6Title=Linz|y7Title=Salzburg|y8Title=St. Pölten|y9Title=Wien
 |x=Verkehrsmittelwahl, Luftqualität, Radverkehr, Öffentlicher Verkehr, Parkraum, Fußgänger, Auto-Alternativen, DURCHSCHNITT
 |y1=6.25,10,3,5.75,3.75,6.75,3,5.5
 |y2=3,9,1.75,1.75,4,7,3.75,4.32
 |y3=5.75,3.75,2.5,6.75,4.75,6,4.5,4.86
 |y4=7,8.25,4.25,7.25,4.75,4,3.5,5.57
 |y5=3.5,8.75,6,5.75,3.25,5,3.5,5.11
 |y6=5,4.5,4,6.75,4.25,6.25,3,4.82
 |y7=5.5,5.25,3,5,4.5,6,3,4.61
 |y8=4.5,9.5,5.25,2.5,3,4.25,3.25,4.61
 |y9=7,5,6.5,7.75,7.25,5.5,6.75,6.54
}}

Diagrammdefinitionsseite nicht gefunden.

{{ChartDirekt
 |y1Title=Bregenz|y2Title=Eisenstadt|y3Title=Graz|y4Title=Innsbruck|y5Title=Klagenfurt|y6Title=Linz|y7Title=Salzburg|y8Title=St. Pölten|y9Title=Wien
 |x=Verkehrsmittelwahl, Luftqualität, Radverkehr, Öffentlicher Verkehr, Parkraum, Fußgänger, Auto-Alternativen, DURCHSCHNITT
 |y1=6.25,10,3,5.75,3.75,6.75,3,5.5
 |y2=3,9,1.75,1.75,4,7,3.75,4.32
 |y3=5.75,3.75,2.5,6.75,4.75,6,4.5,4.86
 |y4=7,8.25,4.25,7.25,4.75,4,3.5,5.57
 |y5=3.5,8.75,6,5.75,3.25,5,3.5,5.11
 |y6=5,4.5,4,6.75,4.25,6.25,3,4.82
 |y7=5.5,5.25,3,5,4.5,6,3,4.61
 |y8=4.5,9.5,5.25,2.5,3,4.25,3.25,4.61
 |y9=7,5,6.5,7.75,7.25,5.5,6.75,6.54
 |swap=1
}}

Diagrammdefinitionsseite nicht gefunden.

Troubleshooting

1) Es kommt eine Fehlermeldung beim Erstellen der Grafik

Antwort: es muss für jeden Datensatz y1...y15 ein zugehöriges y1Title...y15Title definiert werden

2) Die X-Achse wird als Zahl interpretiert

Antwort: durch setzen vom Parameter xType kann ein anderes Verhalten provoziert werden (normalerweise xType=string)

3) Der Y-Achse sollte bis Null gehen, aber das tut sie nicht

Antwort: die Y-Achse kann leider aktuell nicht konfiguriert werden, siehe Phab:Task T385344. Area und Line charts gehen nie bis Null. Bar charts gehen immer bis Null. Das verwenden von Bar charts ist also ein aktueller Workaround für dieses Problem.

4) Warum kann die Höhe nicht eingestellt werden?

Antwort: aktuell ist das Feature durch die Chart-Extension noch nicht implementiert, siehe Phab:Task T376845. Eine Diskussion zum Thema findet sich in deWiki auch hier

5) Die Grafik erzeugt eine neue Farbe für jeden Punkt, aber es soll einfarbig sein

Antwort: Wechsel der Eingabe von y zu y1 und von yTitle zu y1Title

6) Ein Tortendiagramm enthält das Komma. Wie kann man trotzdem eine korrekte Darstellung erreichen?

Antwort: Die Vorlage unterstützt aktuell keinen Escape Mechanismus. Durch Wechsel der Eingabe kann das gewünschte aber erreicht werden. Also von y zu y1,y2,y3, usw. Für die andere Achse x zu y1Title,y2Title,y3Title, usw.

Vorlage:ChartDirekt/Doku

Seitenversionsstatus

Infos

Kopiervorlage

Templatedata

Vorlagenparameter

Beispiele

Generell

Einfacher Piechart (Tortendiagramm)

Piechart (Tortendiagramm) mit Komma

Quasi Beschriftung der X-Achse

Minimalistischer Plot

Mit eigenem Vorgabechart

Transform-Section

Beispiel mit Vorgabechart

Swap

Troubleshooting

Siehe auch