Sjabloon:Graph:Chart
Voor het plotten van grafieken.
Parameters
- colors
- kleurenpalet 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 deaa
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
, Vlakdiagramline
, Lijndiagram of Spreidingsdiagrampie
, taartdiagramrect
, Staafdiagramstackedarea
, Gestapeld Vlakdiagramstackedrect
, 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 voorloopnullenxAxisFormat=.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 standaardlog
logaritmische schaalsqrt
vierkantswortel-schaal
- xType
- datatype van x-as waarden.
date
: datums, bijvoorbeeld 2021/02/14integer
: geheel getalnumber
: getal met cijfers achter de kommastring
: tekst. Als er maar een paar waardes zijn, gebruik danxType=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 geefty2
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/14integer
: geheel getalnumber
: getal met cijfers achter de kommastring
: 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
.
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= }}
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 }}
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 }}
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 }}
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 }}
{{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= }}
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 }}
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 }}
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 = {{Repeat|7|, }} .40, .44, .42, .47, .44, .43, .42 }}
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 }}
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 }}
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 }}
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 }}
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= }}
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 }}
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 }}
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.}}
██ 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:
Sjabloon:Kolommen lijst
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}}
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}}
Voor het plotten van grafieken.
Parameters
- colors
- kleurenpalet 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 deaa
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
, Vlakdiagramline
, Lijndiagram of Spreidingsdiagrampie
, taartdiagramrect
, Staafdiagramstackedarea
, Gestapeld Vlakdiagramstackedrect
, 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 voorloopnullenxAxisFormat=.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 standaardlog
logaritmische schaalsqrt
vierkantswortel-schaal
- xType
- datatype van x-as waarden.
date
: datums, bijvoorbeeld 2021/02/14integer
: geheel getalnumber
: getal met cijfers achter de kommastring
: tekst. Als er maar een paar waardes zijn, gebruik danxType=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 geefty2
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/14integer
: geheel getalnumber
: getal met cijfers achter de kommastring
: 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
.
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= }}
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 }}
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 }}
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 }}
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 }}
{{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= }}
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 }}
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 }}
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 = {{Repeat|7|, }} .40, .44, .42, .47, .44, .43, .42 }}
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 }}
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 }}
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 }}
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 }}
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= }}
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 }}
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 }}
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.}}
██ 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:
Sjabloon:Kolommen lijst
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}}
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}}