Predloga:Graph:Chart/dok

To je dokumentacijska podstran za glavno stran Predloga:Graph:Chart. Namenjena je shranjevanju navodil, kategorizaciji in drugi vsebini, ki ni del glavne strani. Predloga ima preizkušanju namenjen peskovnik in testneprimere.

Uporablja Lua: Module:Graph

Ta predloga uporablja TemplateStyles: Predloga:Graph:Chart/styles.css

Meta vsebuje sorodne informacije na:

Predloga:Graph:Chart

• 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 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/#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. (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. integer for integers, number for real numbers, date for dates (e.g. YYYY/MM/DD), and string for ordinal values (use string to 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 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. Setting to 0 with type=line creates 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 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.
• 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.

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.

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.

{{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.

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.

• When xAxisFormat or yAxisFormat is set to %, a percentage sign will be added to the scale of the corresponding axis.
• A value of 1 equals 100%. A decimal point should be added in front of percentages between 0 and 100, for instance .25 for 25%.
• Including the code | yAxisMin=0 | yAxisMax=1 will 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.

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

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 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:

Alternatively, CSS color names (or hex values) can be specified in the graph and the legend templates.