قالب:ChartDirect

Template documentation[view] [edit] [history] [purge]

This template allows to generate simple plots using the Chart Feature. It is based on the transform functionality and used the commons module c:Module:Graph:Chart.

Copy templates

With default templates

{{ChartDirect
| type       = 
| x= | y1= | y1Title= 
| y2= | y2Title=
| y3= | y3Title=
| y4= | y4Title=
| y5= | y5Title= 
| thumb      =
| align      = 
| width      = 
| border     = 
| style      = 
| caption    =
| source     = 
}}

or With own template

{{ChartDirect
| chart     = 
| x= | y1= | y1Title= 
| y2= | y2Title=
| y3= | y3Title=
| y4= | y4Title=
| y5= | y5Title= 
| thumb      =
| align      = 
| width      = 
| border     = 
| style      = 
| caption    =
| source     = 
}}

or Simple X/Y chart (ideal for pie charts)

{{ChartDirect
| type       = 
| x= | y=
| thumb      =
| align      = 
| width      = 
| border     = 
| style      = 
| caption    =
| source     = 
}}

Examples

simple bar plot, multiple data rows

{{ChartDirect
|type=bar
|x=Oranges, Strawberries, Pineapple
|xTitle=Fruit
|y=58,23,77
| align      = left
| width      = 400px
}}

{{#chart:Template bar.chart

}}

View chart definition.

simple bar plot, one data row only

{{ChartDirect
|type=bar
|y=58,23,77
|yTitle=amount
| align      = left
| width      = 400px
}}

{{#chart:Template bar.chart

}}

View chart definition.

full width

{{ChartDirect
|type=pie
|x=Oranges, Strawberries, Pineapple
|y=58,23,77
}}

{{#chart:Template pie.chart

}}

View chart definition.

other data source and border

{{ChartDirect
|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
| border     = 1
}}

{{#chart:Template bar.chart

}}

View chart definition.

thumbnail

{{ChartDirect
| thumb
|title=Fruit trend
|type=line
|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
}}

{{#chart:Template line.chart

}}

View chart definition.

aligned and fixed width

{{ChartDirect
| chart      = Template line population by year.chart
| align      = right
| width      = 400px
|x=1980,1990,2000,2010,2020
|y1=98,87,201,252,325
|y1Title=Population
}}

{{#chart:Template line population by year.chart

}}

View chart definition.

aligned and fixed width thumbnail

{{ChartDirect
| thumb
| align      = left
| width      = 400px
| chart      = Template line population by year.chart
|x=1980,1990,2000,2010,2020
|y1=98,87,201,252,325
|y1Title=Population
}}

{{#chart:Template line population by year.chart

}}

View chart definition.

centered, fixed width, border, caption and source

{{ChartDirect
| chart      = Template line population by year.chart
| x=1980,1990,2000,2010,2020
| y1=98,87,201,252,325
| y1Title=Population
| align      = center
| width      = 400px
| caption    = Population of Exampleville
| source     = per reference xyz
}}

{{#chart:Template line population by year.chart

}}

Population of Exampleville Source: per reference xyz

swap

Demonstration of the swap parameter effect. Intention: figuring out in an easy way what is the best way to plot rows and columns.

{{ChartDirect
 |y1Title=Bregenz|y2Title=Eisenstadt|y3Title=Graz|y4Title=Innsbruck|y5Title=Klagenfurt|y6Title=Linz|y7Title=Salzburg|y8Title=St. Pölten|y9Title=Wien
 |x=traffic choice, air quality, bicycle traffic, public transport, parking space, pedestrians, car alternatives, MEAN
 |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
}}

{{#chart:Template bar.chart

}}

View chart definition.

{{ChartDirect
 |y1Title=Bregenz|y2Title=Eisenstadt|y3Title=Graz|y4Title=Innsbruck|y5Title=Klagenfurt|y6Title=Linz|y7Title=Salzburg|y8Title=St. Pölten|y9Title=Wien
 |x=traffic choice, air quality, bicycle traffic, public transport, parking space, pedestrians, car alternatives, MEAN
 |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
}}

{{#chart:Template bar.chart

}}

View chart definition.

Further information

Create own templates

By using the parameter chart an own chart can be selected as template. The advantage is a better adaptability of the chart, especially descriptions of the axes. It is important to include the Transform-section for the commons module.

Transform-Section

More detailed information can be found in the commons module c:Module:Graph:Chart.

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

Troubleshooting

1) error message when generating the plot

hint: for each data row y1...y15, one corresponding y1Title...y15Title must be defined

2) the x-axis is interpreted as a number

hint: setting xType can force a different behaviour (usually xType=string)

3) the y-axis should be based on zero

response: unfortunately, this cannot be configured at the moment with the chart extension. See Phab:Task T385344. Area und Line charts are not going to zero. Bar charts are going to zero. Therefore bar charts can be a workaround for this limitation.

4) height of the plot should be configurable

response: unfortunately, this cannot be configured at the moment with the chart extension. See Phab:Task T376845.

5) the plot shows in different colors, but it should be one color only

hint: change y to y1 and yTitle to y1Title

6) nan values in the data set cause wrong/confused plots

response: known limitation/bug (Phab:Task T413353). A workaround in this case is to generate a .tab file in commons and plot using Template:Chart alternatively replace the problematic nan values with zeroes.

TemplateData

Includes a chart with source attribution and allows adjusting alignment, width, and border.

وسائط القالب
وسيط		وصف	نوع	حالة
x	`x`	Values x-Axis. Note: with pie charts either use only x and y, or use y1-y15 as needed	سطر	اختياري
xTitle	`xTitle`	Option to show a Title on the X-axis, if the other values are just x and y (no y1-y15)	سطر	اختياري
y	`y`	Values y-Axis. Note: values y and y1-15 cannot be combined. If y is used, every new entry will be interpreted as one additional data row. Data rows are limited to 15.	سطر	اختياري
yTitle	`yTitle`	Legend value y-Axis	سطر	اختياري
y1	`y1`	Values first row y-Axis. Further parameters y2-y15 are supported مثال 520,621,433	رقم	مقترح
y1Title	`y1Title`	Legend value y-Axis. It is necessary for each y-Axis row (e.g. y1 and y1Title). Additional parameters y2-y15 are supported مثال population of Exampleville	سطر	مقترح
xType	`xType`	Data format of the x-Axis القيم المقترحة `number` `integer` `date` `string`	سطر	اختياري
yType	`yType`	Data format of the x-Axis القيم المقترحة `number` `integer` `date` `string`	سطر	اختياري
Use of predefined template charts	`type`	Data:...chart on Wikimedia Commons. Predefined charts based on the selected plot type. If parameter <code>chart</code> or <code>definition</code> is set, this parameter will be ignored. القيم المقترحة `bar` `pie` `line` `area` غيابي bar	سطر	اختياري
swap	`swap`	Option to transpose an already defined chart (swapping rows/columns). Up to 15 values can be swapped per data row. غيابي 0	بولياني	اختياري
Display as thumbnail	`thumb` `1`	Set to any value to display in a gray box like an image thumbnail القيم المقترحة `thumb` مثال thumb	سطر	اختياري
Alignment	`align` `2`	Chart alignment, either "left", "right", or "center" القيم المقترحة `left` `right` `center`	سطر	اختياري
Width	`width` `3`	Width in pixels or percent القيم المقترحة `400px` `600px` `50%` `100%`	سطر	اختياري
Caption	`caption` `4`	Caption to display before the source information. Make sure to use ending punctuation. مثال This is a chart caption.	نص	اختياري
Chart definition	`chart` `definition`	Chart on Wikimedia Commons, without the "Data:" prefix مثال Example.chart	سطر	مطلوب
Source attribution	`source`	Option to cite a source مثال some reference	سطر	اختياري
Border	`border`	Set to "1" to enable a border القيم المقترحة `1` مثال 1	بولياني	اختياري
CSS styles	`style`	Additional CSS styles (beyond width and border) مثال border-width:5px;	سطر	اختياري
Hide source	`hideSource`	Set to any value to disable linking to the source القيم المقترحة `1` مثال 1	بولياني	اختياري

انظر أيضاً

The above documentation is transcluded from قالب:ChartDirect/doc. (edit | history)
Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this template.