Template:Graph:Chart/doc

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Shortcut:
  • Template:Graph

Parameters[edit source]

  • width: width of the chart
  • height: height of the chart
  • type: type of the chart: line for line charts, area for area charts, and rect for (column) bar charts, and pie for pie charts. Multiple series can stacked using the stacked prefix, e.g. stackedarea.
  • interpolate: interpolation method for line and area charts. It is recommended to use monotone for a monotone cubic interpolation – further values are listed here.
  • colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as #rgb/#rrggbb/#aarrggbb or by a CSS color name. For #aarrggbb the aa component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. See the [1]
  • xAxisTitle and yAxisTitle: captions of the x and y axes
  • xAxisMin, xAxisMax, yAxisMin, and yAxisMax: minimum and maximum values of the x and y axes (not yet supported for bar charts)
  • xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values [2] and [3]. For example, the format % can be used to output percentages.
  • xAxisAngle: rotates the x axis labels by the specified angle. Recommended values are: -45, +45, -90, +90
  • xType and yType: Data types of the values, e.g. integer for integers, number for real numbers, date for dates (e.g. YYYY/MM/DD), and string for ordinal values.
  • x: the x-values as a comma-separated list
  • y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts y2 denotes the radiuses of the corresponding sectors.
  • legend: show legend (only works in case of multiple data series)
  • y1Title, y2Title, …: defines the label of the respective data series in the legend
  • linewidth: line width for line charts or distance between the pie segments for pie charts
  • showValues: Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as name1:value1, name2:value2:
    • format: Format the output, see [4] for numbers and [5] for date/time.
    • fontcolor: text color
    • fontsize: text size
    • offset: move text by the given offset. For bar charts and pie charts with midangle this also defines if the text is inside or outside the chart.
    • angle (pie charts only): text angle in degrees or midangle (default) for dynamic angles based on the mid-angle of the pie sector.
  • showSymbols: For line charts: show a symbol (circle) at each data point. (usage: showSymbols=true)
  • innerRadius: For pie charts: defines the inner radius to create a doughnut chart.
  • formatjson: format JSON object for better legibility

Template wrappers

The functions mapWrapper and chartWrapper are wrappers to pass all parameters of the calling template to the respective map and chart functions.

Note: In the editor preview the graph extension creates a canvas element with vector graphics. However, when saving the page a PNG raster graphics is generated instead.

{{#invoke:Graph:Chart


Examples[edit source]

Line Chart:

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


Note: The y-axis starts from the smallest y value, though this can be overridden with the yAxisMin parameter.

Area chart:

{{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|colors={{MEActionGray}}}}


Note: The y-axis starts from zero

Bar chart:

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

Line chart with more than one data series, using colors:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|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={{MEActionRed}},{{MEActionBlue}}}}

Area chart with more than one data series showing blended overlap:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|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=#80e7453a,#800ba7bc}}

Bar chart with multiple data series:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|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={{MEActionRed}},{{MEActionBlue}}}}

Area chart with smoothed data values:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|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}}

Bar chart with stacked data series:

{{Graph:Chart|width=400|height=100|xAxisTitle=X|yAxisTitle=Y|legend=Legend|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}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|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=Legende|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200|showValues=}}

{{Graph:Chart|width=100|height=100|type=pie|legend=Legende|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=}}

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

Line Chart in an image frame:

{{Image frame |caption=Line Chart |content={{Graph:Chart|width=400|height=100|type=line|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}} }}

Line Chart


See also[edit source]

{{Line chart}}


Creates charts, eg Line: width=400 height=100 type=line x=1,2,3,4,5,6 y=10,12,6,14,2,10 Two Y series - set: width 400px height 100px xAxisTitle X yAxisTitle Y legend=Key type=rect x=1,2,3,4,5,6 y1=10,12,6,14,2,10 y2=5,2,6,4,2,1 colors={{MEActionRed}}, {{MEActionBlue}} Pie: type =pie legend=Legend x=A,B,C,D,E y1=10,12,6,14,2 for a caption edit source to add this wrapper after - {{Image frame |caption=source: Jason et al 2010| content={{Graph:Chart{{....}} }}

Template parameters

ParameterDescriptionTypeStatus
widthwidth

width in pixels, leave blank for auto

Example
350
Auto value
Unknownsuggested
heightheight

height in pixels

Example
400, auto
Auto value
auto
Unknownsuggested
typetype

bar, line, pie, rect (colum graph), or area, stackedarea, stackedbar

Default
rect
Example
line
Auto value
rect
Unknownrequired
xAxisTitlexAxisTitle

no description

Auto value
Unknownsuggested
yAxisTitleyAxisTitle

no description

Example
%
Unknownsuggested
Legendlegend

true or false, only shows for multiple series, leave blank for a legend

Example
false
Unknownsuggested
xx x1

x axis values, comma separated without spaces, delete this for a pie chart

Example
1,2,3,4,5
Auto value
1,2,3,4,5
Unknownsuggested
y1y1 y

y axis values, comma separated

Example
51,67,89,90
Auto value
Unknownsuggested
y2y2

y axis values for series 2, comma separated, delete this if there is no second series

Example
8,10,7,22,15
Unknownsuggested
y3y3

y axis values for series 3, comma separated

Unknownoptional
showValuesshowValues

show y values as text, can be formatted, angle only applies to pie charts

Example
false,true,offset:5,fontsize:16px,angle:120
Unknownoptional
fontsizefontsize

no description

Unknownoptional
y1Titley1Title

no description

Unknownsuggested
y2Titley2Title

no description

Unknownsuggested
x2x2

no description

Unknownoptional
interpolateinterpolate

no description

Unknownoptional
showSymbolsshowSymbols

for line charts only

Unknownoptional
lineWidthlineWidth

for line graphs, or distance between pie chart segments

Unknownoptional
colorscolors color

red,blue,gray or {{MEActionRed}} etc,#3B3E3F color blind safe colors: #E69F00 (orange), #E56B4E9 (sky blue), #E009E73, #F0E442 (yellow), #0072B2 (blue), #D55E00 (orange red), #CC79A7, #BBBBBB, #000000

Default
{{MEActionRed}},{{MEActionBlue}},{{MEActionGray}},{{MEActionDGray}}
Example
{{MEActionRed}},{{MEActionBlue}},#3B3E3F,seagreen
Auto value
Unknownsuggested
innerRadiusinnerRadius

no description

Unknownoptional
formatJsonformatJson

no description

Default
true
Auto value
Unknownoptional
xAxisMinxAxisMin

no description

Unknownoptional
xAxisMaxxAxisMax

no description

Unknownoptional
yAxisMinyAxisMin

no description

Unknownoptional
yAxisMaxyAxisMax

no description

Unknownoptional
xAxisAnglexAxisAngle

rotate x axis labels e.g. -45, 45, -90, +90

Default
+90
Example
+90
Numberoptional
x3x3

x axis values, comma separated

Unknownoptional
x4x4

x axis values, comma separated

Unknownoptional
x5x5

no description

Unknownoptional
x6x6

no description

Unknownoptional
x7x7

no description

Unknownoptional
x8x8

no description

Unknownoptional
x9x9

no description

Unknownoptional
y4y4

no description

Unknownoptional
y5y5

no description

Unknownoptional
y6y6

no description

Unknownoptional
y7y7

no description

Unknownoptional
y8y8

no description

Unknownoptional
y9y9

no description

Unknownoptional
y10y10

no description

Unknownoptional