Difference between revisions of "Template:Graph:Chart/doc"
imported>Great Brightstar (→Parameters: Update) |
imported>קיפודנחש (→Examples: formatting, for improve readability) |
||
Line 10: | Line 10: | ||
== Examples == | == Examples == | ||
− | Line Chart:< | + | Line Chart: |
− | + | <pre> | |
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 <tt>yAxisMin</tt> parameter. | Note: The y-axis starts from the smallest y value, though this can be overridden with the <tt>yAxisMin</tt> parameter. | ||
− | Area chart:< | + | Area chart: |
− | + | <pre> | |
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 | ||
+ | }} | ||
Note: The y-axis starts from zero | Note: The y-axis starts from zero | ||
− | Bar chart:< | + | Bar chart: |
− | < | + | <pre> |
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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: | ||
+ | <pre> | ||
+ | {{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=#0000aa,#ff8000 | ||
+ | }} | ||
+ | </pre>{{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=#0000aa,#ff8000 | ||
+ | }} | ||
+ | |||
+ | Area chart with more than one data series showing blended overlap: | ||
+ | <pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | </pre>{{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 | ||
+ | }} | ||
+ | |||
+ | Bar chart with multiple data series: | ||
+ | <pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | |||
+ | Area chart with smoothed data values: | ||
+ | <pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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: | |
− | + | <pre> | |
+ | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 | ||
+ | }} | ||
− | |||
− | |||
− | + | <pre> | |
− | + | {{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 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 | ||
+ | }} | ||
− | |||
− | |||
− | + | <pre> | |
− | + | {{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= | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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= | ||
+ | }} | ||
− | |||
− | |||
− | < | + | <pre> |
− | {{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= | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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= | ||
+ | }} | ||
− | < | + | <pre> |
− | {{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 | ||
+ | | innerRadius=40 | ||
+ | | legend=Legende | ||
+ | | x=A,B,C,D,E,F,G,H,I | ||
+ | | y1=100,200,150,300,100,100,150,50,200 | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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:<br /> | Line Chart in an image frame:<br /> | ||
− | < | + | <pre> |
+ | {{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 | ||
+ | }} | ||
+ | }} | ||
+ | </pre> | ||
+ | {{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 | ||
+ | }} | ||
+ | }} | ||
== See also == | == See also == |
Revision as of 16:29, 24 April 2019
![]() | This is a documentation subpage for Template:Graph:Chart. It contains usage information, categories and other content that is not part of the original template page. |
Parameters
![]() | This template uses Lua: |
Template:TemplateStyles Template:Meta
- width: width of the chart
- height: height of the chart
- type: type of the chart:
line
for line charts,area
for area charts, andrect
for (column) bar charts, andpie
for pie charts. Multiple series can stacked using thestacked
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.[dead link] - 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
theaa
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), andstring
for ordinal values (usestring
to prevent axis values from being repeated when there are only a few values). - xScaleType and yScaleType: scale types of the x and y axes, e.g.
linear
for linear scale (default),log
for logarithmic scale andsqrt
for square root scale. - 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. - linewidths: different line widths may be defined for each series of data with csv, if set to 0 with "showSymbols" results with points graph, eg.:
linewidths=1, 0, 5, 0.2
- showSymbols: show symbol on data point for line graphs, if number is provided it's size of symbol, default 2.5. may be defined for each series of data with csv, eg.:
showSymbols=1, 2, 3, 4
- symbolsShape: custom shape for symbol: circle, x, square, cross, diamond, triangle_up, triangle_down, triangle_right, triangle_left. May be defined for each series of data with csv, eg.:
symbolsShape= circle, cross, square
- symbolsNoFill: if true symbol will be without fill (only stroke),
- symbolsStroke: if "x" symbol is used or option "symbolsNoFill" symbol stroke width, default 2.5
- 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.
- 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.
- Annotations
- vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g.
hAnnotatonsLine=4, 5, 6
- vAnnotatonsLabel and vAnnotatonsLabel: display vertical or horizontal annotation labels for lines e.g.
hAnnotationLabel = label1, label2, label3
- vAnnotatonsLine and hAnnotatonsLine: display vertical or horizontal annotation lines on specific values e.g.
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
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 }}
<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"line","properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>
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 }}
<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"area","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph> 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 }}
<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":6},{"y":7,"series":"y","x":7},{"y":9,"series":"y","x":8}]}],"width":400}</graph>
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=#0000aa,#ff8000 }}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":false,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"stroke":{"value":"red"}},"update":{"stroke":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"stroke":{"scale":"color","field":"series"},"strokeWidth":{"value":2.5}}},"type":"line"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
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 }}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
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 }}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["#0000aa","#ff8000"]},{"type":"ordinal","name":"transparency","range":["0.50196078431373","0.50196078431373"]}],"version":2,"marks":[{"type":"group","from":{"data":"chart","transform":[{"groupby":"x","type":"facet"}]},"properties":{"enter":{"width":{"scale":"x","band":true},"x":{"scale":"x","field":"key"}}},"marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fillOpacity":{"scale":"transparency","field":"series"},"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"series","field":"series"},"y2":{"scale":"y","value":0},"width":{"scale":"series","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"scales":[{"domain":{"field":"series"},"type":"ordinal","name":"series","range":"width"}]}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]}],"width":400}</graph>
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 }}
<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"interpolate":{"value":"monotone"},"y2":{"scale":"y","field":"layout_end"},"x":{"scale":"x","field":"x"},"fill":{"scale":"color","field":"series"}}},"type":"area"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y1","x":1},{"y":12,"series":"y1","x":2},{"y":6,"series":"y1","x":3},{"y":14,"series":"y1","x":4},{"y":2,"series":"y1","x":5},{"y":10,"series":"y1","x":6},{"y":7,"series":"y1","x":7},{"y":9,"series":"y1","x":8},{"y":2,"series":"y2","x":1},{"y":4,"series":"y2","x":2},{"y":6,"series":"y2","x":3},{"y":8,"series":"y2","x":4},{"y":13,"series":"y2","x":5},{"y":11,"series":"y2","x":6},{"y":9,"series":"y2","x":7},{"y":2,"series":"y2","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>
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>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legend","fill":"color"}],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"stats","field":"sum_y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":["seagreen","orchid"]}],"version":2,"marks":[{"type":"group","marks":[{"properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"layout_start"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","field":"layout_end"},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"type":"rect"}],"from":{"data":"chart","transform":[{"field":"y","type":"stack","sortby":["-_id"],"groupby":["x"]},{"groupby":["series"],"type":"facet"}]}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Data A","x":1},{"y":12,"series":"Data A","x":2},{"y":6,"series":"Data A","x":3},{"y":14,"series":"Data A","x":4},{"y":2,"series":"Data A","x":5},{"y":10,"series":"Data A","x":6},{"y":7,"series":"Data A","x":7},{"y":9,"series":"Data A","x":8},{"y":2,"series":"Data B","x":1},{"y":4,"series":"Data B","x":2},{"y":6,"series":"Data B","x":3},{"y":8,"series":"Data B","x":4},{"y":13,"series":"Data B","x":5},{"y":11,"series":"Data B","x":6},{"y":9,"series":"Data B","x":7},{"y":2,"series":"Data B","x":8}]},{"transform":[{"type":"aggregate","summarize":{"y":"sum"},"groupby":["x"]}],"name":"stats","source":"chart"}],"width":400}</graph>
{{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>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legende","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>
{{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>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legende","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"offset":-4,"value":100},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>
{{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>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legende","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"range":[0,100],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","field":"r"},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-4,"field":"r"},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string","r":"integer"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"width":100}</graph>
{{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 }}
<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Legende","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":40},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A"},{"y":200,"x":"B"},{"y":150,"x":"C"},{"y":300,"x":"D"},{"y":100,"x":"E"},{"y":100,"x":"F"},{"y":150,"x":"G"},{"y":50,"x":"H"},{"y":200,"x":"I"}]}],"width":100}</graph>
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 }} }}
See also
- {{Line chart}}