Sjabloon:Graph:Chart
Sjabloondocumentatie [[{{Fullurl:Sjabloon:Gebruikt Lua
Gebruikt TemplateStyles
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/#aarrggbbof een Engelse CSS kleurennaam. Bij#aarrggbbgeeft deaahet 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.
monotoneis 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
midangledefinieert 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.
midangleis 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=03alles 3 lang, met voorloopnullenxAxisFormat=.2f2 cijfers achter de 'komma'xAxisFormat=dgeheel 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 standaardloglogaritmische schaalsqrtvierkantswortel-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=stringom 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 geefty2de 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.
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
{{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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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.}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
██ 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}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
}} bekijken]] [[{{Fullurl:Sjabloon:Gebruikt Lua
Gebruikt TemplateStyles
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/#aarrggbbof een Engelse CSS kleurennaam. Bij#aarrggbbgeeft deaahet 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.
monotoneis 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
midangledefinieert 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.
midangleis 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=03alles 3 lang, met voorloopnullenxAxisFormat=.2f2 cijfers achter de 'komma'xAxisFormat=dgeheel 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 standaardloglogaritmische schaalsqrtvierkantswortel-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=stringom 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 geefty2de 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.
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
{{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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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=
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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
}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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.}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
██ 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}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
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}}
Grafieken zijn wegens technische problemen tijdelijk niet beschikbaar.
|action=edit&preload=Sjabloon%3ASjabdoc%2Fpreload}} bewerken]]