Predloga:Graph:Chart
Parameters
[uredi kodo] | Uporablja Lua: |
| Povezane strani |
|---|
 | Ta predloga uporablja TemplateStyles: |
Meta vsebuje sorodne informacije na:
- width: width of the chart
- height: height of the chart
- type: type of the chart:
linefor line charts,areafor area charts, andrectfor (column) bar charts, andpiefor pie charts. Multiple series can stacked using thestackedprefix, e.g.stackedarea. - interpolate: interpolation method for line and area charts. It is recommended to use
monotonefor a monotone cubic interpolation – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area. - colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as
#rgb/#rrggbb/#aarrggbbor by a CSS color name. For#aarrggbbtheaacomponent denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10: else is Category20: ). - 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). These parameters can be used to invert the scale of a numeric axis by setting the lowest value to the Max and highest value to the Min.
- xAxisFormat and yAxisFormat: changes the formatting of the axis labels. Supported values are listed at https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time. 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.
integerfor integers,numberfor real numbers,datefor dates (e.g. YYYY/MM/DD), andstringfor ordinal values (usestringto prevent axis values from being repeated when there are only a few 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
y2denotes 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. Setting to 0 with
type=linecreates a scatter plot. - 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 according to https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers for numbers and https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md for date/time.
- fontcolor: text color
- fontsize: text size
- offset: move text by the given offset. For bar charts and pie charts with
midanglethis 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.
- xGrid and yGrid: display grid lines on the x and y axes.
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.
Examples
[uredi kodo]Basic examples
[uredi kodo]Line Chart:
{{Graph:Chart
| width = 400
| height = 150
| type = line
| x = 1,2,3,4,5,6,7,8
| y = 10,12,6,14,2,10,7,9
}}
 | Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Note: The y-axis starts from zero
Bar chart:
{{Graph:Chart
| width=400
| height=100
| xAxisTitle=The X axis
| yAxisTitle=The Y axis
| type=rect
| x=1,2,3,4,5,6,7,8
| y=10,12,6,14,2,10,7,9
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Multiple data series
[uredi kodo]Line chart with more than one data series, using colors:
{{Graph:Chart
| width=400
| height=150
| 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=#0000aa,#ff8000
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
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=#800000aa,#80ff8000
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
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=#800000aa,#80ff8000
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Area chart with smoothed data values:
{{Graph:Chart
| width=400
| height=150
| 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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Bar chart with stacked data series:
{{Graph:Chart
| width=400 | height=150
| 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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Pie charts
[uredi kodo]{{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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
{{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=
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
{{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=
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
{{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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Scatter plot
[uredi kodo]By using a line plot with linewidth=0, it is possible to create a scatter plot:
{{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=1
|linewidth=0
|yGrid= |xGrid=
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Using percentages
[uredi kodo]- When
xAxisFormatoryAxisFormatis set to%, a percentage sign will be added to the scale of the corresponding axis. - A value of
1equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance.25for 25%. - Including the code
| yAxisMin=0 | yAxisMax=1will force the y axis scale to run from 0% to 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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
A graph showing values greater than 100% and negative values:
{{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
| yAxisFormat = %
| showSymbols =
| y1 = 2, .43, 1.20, .39, .43, .0, -.38, -.20, .18, .54 , 0
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Display
[uredi kodo]Line chart in an {{image frame}}:
{{Image frame
| caption=Line chart
| content = {{Graph:Chart
| width=400
| height=150
| type=line
| x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9
}}
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Line chart
Bar chart in a {{side box}}:
{{Side box |metadata=No<!--This makes the box display on the mobile site-->
| above = '''A graph of something'''
| abovestyle = text-align:center
| text = {{Graph:Chart
|height = 150
|width = 200
|xAxisTitle = Year
|xAxisAngle = -40
|yAxisTitle = Units of something
|yAxisMin = 0
|type = rect
|showValues = offset:4
|x = 2011, 2012, 2013, 2014, 2015, 2016
|y1 = 1326, 145, 203, 377, 639, 306
|y2 = , , , 226, 208, 276
|colors = blue,grey
}}
| below = Caption & source links here
}}
A graph of something
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Caption & source links here
Legends
[uredi kodo]A legend can be added where there are multiple data series:
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=Legend
| y1Title=Blue
| y2Title=Orange
| 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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
The title can be omitted by leaving the parameter blank:
{{Graph:Chart
| width=400
| height=150
| xAxisTitle=X
| yAxisTitle=Y
| legend=
| y1Title=Blue
| y2Title=Orange
| 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
}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
Long legend entries can look clumsy. It may be better to omit the legend parameter and use {{Legend}} (or a similar template) instead:
{{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
}}
{{legend|darkred|This is a long legend entry and wouldn't look so good if it was part of the graph itself.}}
{{legend|gold|This is another fairly long entry.}}
| Grafikoni so zaradi tehničnih težav trenutno nedostopni. |
This is a long legend entry and wouldn't look so good if it was part of the graph itself.
This is another fairly long entry.
This method also allows the use of wiki formatting and the insertion of links. Graphs using the default colors need to specify the hex values in the legend templates:
#1f77b4
#ff7f0e
#2ca02c
#d62728
#9467bd
#8c564b
#e377c2
#7f7f7f
#bcbd22
#17becf
Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.