Sjabloon:Graph:Chart

Sjabloondocumentatie​

Voor het plotten van grafieken.

Parameters

colors

kleurenpallet van de grafiek, een lijst van kleuren door komma's gescheiden. De kleuren kunnen zijn: #rgb/#rrggbb/#aarrggbb of een Engelse CSS kleurennaam. Bij #aarrggbb geeft de aa het alpha channel aan, bijvoorbeeld FF=100% doorzichtig, 80=50% doorzichtig, etc.

hAnnotatonsLabel

toon horizontale annotatielabels bij annotatielijnen, bijvoorbeeld hAnnotatonsLabel = label1, label2, label3

hAnnotatonsLine

toon horizontale annotatielijnen bij specifieke waarden, bijvoorbeeld hAnnotatonsLine=4, 5, 6

height

hoogte van de grafiek in pixels, bij de meeste grafieken de hoogte van de Y-as

innerRadius

Alleen geldig voor een taartdiagram, de binnenste straal in pixels om een donut diagram te maken.

interpolate

Interpolatie methode voor lijn- en vlakdiagrammen. monotone is aanbevolen voor een monotone cubic interpolation. Op https://github.com/nyurik/vega/wiki/Marks#line staan de andere ondersteunde interpolatiemethoden.

legend

Toon legenda/legende. Dit werkt alleen bij meerdere datareeksen.

linewidth

Voor een lijndiagram: de dikte van de lijnen, een lijndikte van 0 resulteert in een spreidingsdiagram. Voor een taartdiagram: de ruimte tussen de taartpunten.

linewidths

Voor verschillende lijndiktes per datareeks. Een lijndikte van 0 in combinatie met "showSymbols" laat die lijn weg, toont slechts de punten, bijvoorbeeld linewidths=1, 0, 5, 0.2

showSymbols

voor lijngrafieken: toon een symbool op data punten. Een getal geeft de symboolgrootte aan in pixels, bijvoorbeeld showSymbols=3. showSymbols= geeft punten met een standaardgrootte van 2.5 pixel. Verschillende groottes zijn mogelijk per datareeks: showSymbols=1, 2, 3, 4

showValues

Voor een taartdiagram en een ongestapeld staafdiagram: Toon y waarden als tekst in de grafiek. De volgende parameters, gescheiden door komma's, definiëren hoe de tekst er uit ziet, bijvoorbeeld showValues = fontcolor:silver, fontsize:10, offset:10.

• format: Formatteer numerieken zoals op https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers en datum/tijd zoals op https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md .
• fontcolor: de kleur van de tekst
• fontsize: de grootte van de tekst
• offset: verplaats de tekst. Voor een staafdiagram en een taartdiagram met midangle definieert dit of de tekst binnen of buiten het diagram valt.
• angle voor taartdiagrammen: de hoek in graden, gebaseerd op de mid-angle van de taartpunt. midangle is de standaardwaarde.

symbolsNoFill

symbolsNoFill = vul het symbool niet, tekent alleen de omtrek.

symbolsShape

de vorm van het symbool, mogelijke waarden: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. Elke data reeks kan een eigen symbool krijgen, gebruik door komma's gescheiden waarden, bijvoorbeeld: symbolsShape= circle, cross, square

symbolsStroke

Voor "x" symbol en "symbolsNoFill": de dikte van de lijn in pixels, standaard waarde is 2.5.

type

het soort diagram:

• area, Vlakdiagram
• line, Lijndiagram of Spreidingsdiagram
• pie, taartdiagram
• rect, Staafdiagram
• stackedarea, Gestapeld Vlakdiagram
• stackedrect, Gestapeld Staafdiagram

vAnnotatonsLabel

toon verticale annotatielabels bij annotatielijnen, bijvoorbeeld vAnnotatonsLabel = label1, label2, label3

vAnnotatonsLine

toon verticale annotatielijnen bij specifieke waardes, bijvoorbeeld vAnnotatonsLine=4, 5, 6

width

breedte van de grafiek in pixels, bij de meeste grafieken de lengte van de x-as

x

de x-waarden, gescheiden door komma's, x=a,b,c

xAxisAngle

draaiing van de x-as labels in graden, aanbevolen waarden: -45, +45, -90, +90

xAxisFormat

Formatteer de labels op de x-as.

Voor de formattering van numerieken zie https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers, bijvoorbeeld

• xAxisFormat=% voor percentages, -0.1=-10%, 0=0%, .25=25%, 1=100%, 1.5=150%. xAxisFormat=.1% geeft percentages met 1 cijfer achter de 'komma'.
• xAxisFormat=03 alles 3 lang, met voorloopnullen
• xAxisFormat=.2f 2 cijfers achter de 'komma'
• xAxisFormat=d geheel getal

Noot: Het is nog niet mogelijk om getallen 'Europees' te formatteren als 583.231.475.923,00

Zie https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md voor datum/tijd.

xAxisMin, xAxisMax

voor lijn, spreidings en vlakdiagrammen: minimum en maximum waarden van de x-as. Met deze parameters kan x-as gespiegeld worden door min en max om te draaien. Zet de Max op de laagste waarde, de min op de hoogste.

xAxisTitle

Beschrijving van de variabele op de x-as

xGrid

toon verticale rasterlijnen voor x-as waarden.

xScaleType

het soort van schaal van de x-as.

• linear: lineaire schaal, de standaard
• log logaritmische schaal
• sqrt vierkantswortel-schaal

xType

datatype van x-as waarden.

• date: datums, bijvoorbeeld 2021/02/14
• integer: geheel getal
• number: getal met cijfers achter de komma
• string: tekst. Als er maar een paar waardes zijn, gebruik dan xType=string om herhaling van x-as waarden te voorkomen.

y

De y waarden van een enkele datareeks, gescheiden door komma's, bijvoorbeeld y=1,2,4,9

y1, y2, …

de y-waarden van meerdere datareeksen, bijvoorbeeld y1=1,2,4,9, y2=1,8,32,27. Bij een taartdiagram geeft y2 de straal van de taartpunten.

yAxisFormat

formatteer de labels op de y-as, de toegestane waarden zijn hetzelfde als bij xAxisFormat.

yAxisMin, and yAxisMax

voor lijn, spreidings en vlakdiagrammen: minimum en maximum waarden van de y-as. Met deze parameters kan y-as ondersteboven gezet worden door min en max om te draaien. Zet de Max op de laagste waarde, de min op de hoogste.

yAxisTitle

beschrijving van de variabele op de y-as

yGrid

toon horizontale rasterlijnen voor y-as waarden.

yScaleType

het soort van schaal op de y-as. Zie xScaleType voor mogelijke schalen.

yType

data type van y-as waarden,

• date: datums, bijvoorbeeld 2021/02/14
• integer: geheel getal
• number: getal met cijfers achter de komma
• string: tekst, alleen mogelijk bij een lijndiagram.

y1Title, y2Title, …

beschrijving van de datareeksen in de legenda/legende.

Opmerking: In de voorvertoning bij het bewerken is de grafiek een canvas element, een Vectorafbeelding. Echter, na publiceren van de pagina wordt de grafiek een PNG bestand.

Voorbeelden

Enkele datareeks

Lijndiagram

{{Graph:Chart
 | width = 450
 | height = 150
 | type = line
 | x = 1,2,3,4,5,6,7,8,9
 | y = 10,12,6,14,2,10,7,9,12
}}

De y-as begint met de kleinste y-waarde, maar deze kan worden overschreven met de parameter yAxisMin.

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Spreidingsdiagram

Een spreidingsdiagram is te maken door bij een lijndiagram de lijnen weg te laten maar wel symbolen op data punten te tonen: linewidth=0 en showSymbols=.

{{Graph:Chart
|width=500
|height=200
|type=line
|x=15.7,10.8,68.5,33.4,23.8,42.2,27.1,38.2,13.5,74.3
|y1=1517,970,4075,3819,2106,2919,2428,2164,1393,7603
|showSymbols=
|linewidth=0
|yGrid= |xGrid= 
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Vlakdiagram

{{Graph:Chart
 | width=400
 | height=100
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Opmerking: De y-as begint bij nul.

Zwevende veelhoek of polygoon

{{Graph:Chart
 | width=400
 | height=100
 | type=area
 | x=10,20,30,10
 | y=200,100,300,200
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Staafdiagram

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=De X-as
 | yAxisTitle=De Y-as
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y=10,12,6,14,2,10,7,9
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Taartdiagram

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | showValues=
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Donutdiagram

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | innerRadius=40
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Meerdere datareeksen

Lijndiagram met meer dan één datareeks, met kleuren

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | colors=#0000aa,#ff8000
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Met percentages, y-as met min-max van 0-100%

{{Graph:Chart
| width = 450
| height = 350
| x = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
| yAxisMin = 0
| yAxisMax = 1
| yAxisFormat = %
| showSymbols = 
| y1 = , , , .43, , , , .39, .43, .38, .38, .40, .48, .54 , .42, .47, .45, .48, .44, .41, .41, .45, .46
| y2 = .40, .377, .38, , .39, .38, .419, .55, .60, .63
| y3 = .27, .311, .31, , .26, .28, .285
| y4 = {{loop|7|, }} .40, .44, .42, .47, .44, .43, .42
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Vlakdiagram met meer dan één datareeks, met overlap

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | type=area
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | colors=#800000aa,#80ff8000
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Staafdiagram met meer dan één datareeks

{{Graph:Chart
 | width=400
 | height=100
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | type=rect
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 |colors=#800000aa,#80ff8000
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Gestapeld Staafdiagram

{{Graph:Chart
 | width=400 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | type=stackedrect
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | y1Title=Data A
 | y2Title=Data B
 | colors=seagreen, orchid
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Vlakdiagram met geïnterpoleerde gegevenswaarden

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | type=stackedarea
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
 | interpolate=monotone
 | colors=seagreen, orchid
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Taartdiagram met twee datareeksen

{{Graph:Chart
 | width=100
 | height=100
 | type=pie
 | legend=Letter
 | x=A,B,C,D,E,F,G,H,I
 | y1=100,200,150,300,100,100,150,50,200
 | y2=7,8,9,8,8,9,10,9,5
 | showValues=
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Legenda

Een legenda kan worden toegevoegd als er meerdere datareeksen zijn:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=Legenda
 | y1Title=Blauw
 | y2Title=Oranje
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

De titel kan worden weggelaten door de parameter leeg te laten:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | legend=
 | y1Title=Blauw
 | y2Title=Oranje
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Lange legenda's kunnen er onhandig uitzien. Het kan dan beter zijn om de legendaparameter weg te laten en in plaats daarvan {{Legenda}} te gebruiken:

{{Graph:Chart
 | width=400
 | height=150
 | xAxisTitle=X
 | yAxisTitle=Y
 | colors=darkred, gold
 | type=line
 | x=1,2,3,4,5,6,7,8
 | y1=10,12,6,14,2,10,7,9
 | y2=2,4,6,8,13,11,9,2
}}
{{Legenda|darkred|Dit is een lange legendatekst en zou er niet mooi uitzien als het deel zou uitmaken van de grafiek zelf.}}
{{Legenda|gold|Dit is een andere redelijke lange tekst.}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

■ Dit is een lange legendatekst en zou er niet mooi uitzien als het deel zou uitmaken van de grafiek zelf.

■ Dit is een andere redelijke lange tekst.

Deze methode maakt ook het gebruik van wiki-opmaak en het invoegen van links mogelijk. Grafieken die de standaardkleuren gebruiken, moeten de hex-waarden in de legenda-sjablonen specificeren:

■ #1f77b4

■ #ff7f0e

■ #2ca02c

■ #d62728

■ #9467bd

■ #8c564b

■ #e377c2

■ #7f7f7f

■ #bcbd22

■ #17becf

Als alternatief kunnen CSS-kleurnamen (of hex-waarden) worden gespecificeerd in de grafiek en de legenda-sjablonen.

Annotaties

Lijndiagram met alleen horizontale annotaties:

{{Graph:Chart
|hannotatonslabel=label4, label5, label6
|hannotatonsline=4, 5, 6
|linewidths=2,4,0
|showSymbols=3,3,3
|symbolsShape=triangle_up, cross, cross
|type=line
|x=0,1,2,3
|y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.

Vlakdiagram met alleen verticale annotaties:

{{Graph:Chart
|vAnnotatonsLine=1, 2, 3 
|vAnnotatonsLabel=label1, label2, label3
|colors=#ffff5ba0, #641050ff, #ffaaff00
|type=area
|x=0,1,2,3
|y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}

Vanwege een beveiligingsprobleem met de MediaWiki Graph-software is het momenteel niet mogelijk deze grafiek weer te geven. Zodra de software is bijgewerkt zal de grafiek vanzelf weer zichtbaar worden.