Template:Graph:Chart: Difference between revisions
wp>MusikBot II m Changed protection settings for "Template:Graph:Chart": High-risk template or module: 5001 transclusions (more info) ([Edit=Require template editor access] (indefinite) [Move=Require template editor access] (indefinite)) |
m 1 revision imported |
(One intermediate revision by the same user not shown) | |
(No difference)
|
Latest revision as of 00:42, 2 August 2024
This template uses Lua: |
Related pages |
---|
Lua error: bad argument #1 to "get" (not a valid title).
CSV2Chart
If you have data from a spreadsheet document (e.g. LibreOffice Calc) or in a statistics software R/R-Studio, you can export them to CSV file. The CSV file can be loaded with an v:en:AppLSAC, that is able to convert the CSV in chart for the data. The column should have headers in the first row. The column of the CSV file contain float or integer values. CSV2WikiChart was created as support tool for Wikipedia and for Wikiversity learning resources that contain data.
Parameters
- 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/nyurik/vega/wiki/Marks#line. - 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: Lua error: bad argument #1 to "get" (not a valid title). else is Category20: Lua error: bad argument #1 to "get" (not a valid title).). See Template:ChartColors for details. - 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. For example, the format
%
can be used to output percentages. For date/time specification of supported values is https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md , e.g.xAxisFormat=%d-%m-%Y
for result 13-01-1977. - 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). Remarks:Date
type doesn't work for bar graphs. Fordate
data input please use ISO date format (e.g. YYYY-MM-DD) acc. to date and time formats used in HTML. Other date formats may work but not in all browsers. Date is unfortunately displayed only in en-US format for all Wikipedia languages. Workaround is to use xAxisFormat and yAxisFormat with numerical dates format. - 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.- A logarithmic chart allows only positive values to be plotted. A square root scale chart cannot show negative values.
- x: the x-values as a comma-separated list, for dates and time see remark in xType and yType
- y or y1, y2, …: the y-values for one or several data series, respectively. For pie charts
y2
denotes the radius of the corresponding sectors. For dates and time see remark in xType and yType - 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
(e.g.|showValues=fontcolor:blue,angle:0
).- 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
- vAnnotationsLine and hAnnotationsLine: display vertical or horizontal annotation lines on specific values e.g.
hAnnotationsLine=4, 5, 6
- vAnnotationsLabel and hAnnotationsLabel: display vertical or horizontal annotation labels for lines e.g.
hAnnotationLabel = label1, label2, label3
- vAnnotationsLine and hAnnotationsLine: 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
Basic examples
Line Chart:
{{Graph:Chart | width = 450 | height = 150 | type = line | x = 1,2,3,4,5,6,7,8,9 | y = 10,12,6,14,2,10,7,9,12 }}
<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":150,"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},{"y":12,"series":"y","x":9}]}],"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=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 }}
<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":"The X axis","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":"The Y axis","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>
Multiple data series
Line chart with more than one data series, using colors:
{{Graph:Chart | width=400 | height=150 | xGrid= | yGrid= | 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 | y1Title=Y1 Series | y2=2,4,6,8,13,11,9,2 | y2Title=Y2 Series | 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":150,"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":true},{"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":true}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"Y1 Series","x":1},{"y":12,"series":"Y1 Series","x":2},{"y":6,"series":"Y1 Series","x":3},{"y":14,"series":"Y1 Series","x":4},{"y":2,"series":"Y1 Series","x":5},{"y":10,"series":"Y1 Series","x":6},{"y":7,"series":"Y1 Series","x":7},{"y":9,"series":"Y1 Series","x":8},{"y":2,"series":"Y2 Series","x":1},{"y":4,"series":"Y2 Series","x":2},{"y":6,"series":"Y2 Series","x":3},{"y":8,"series":"Y2 Series","x":4},{"y":13,"series":"Y2 Series","x":5},{"y":11,"series":"Y2 Series","x":6},{"y":9,"series":"Y2 Series","x":7},{"y":2,"series":"Y2 Series","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=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 }}
<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":150,"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=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 }}
<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":150,"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>
Pie charts
{{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 }}
<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","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=Letter | 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":"Letter","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=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= }}
<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Letter","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=Letter | 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":"Letter","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>
Scatter plot
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= }}
<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"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[8.5]}],"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":0}}},"from":{"data":"chart"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":200,"axes":[{"type":"x","scale":"x","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":true},{"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":true}],"data":[{"format":{"parse":{"y":"integer","x":"number"},"type":"json"},"name":"chart","values":[{"y":1517,"series":"y1","x":15.7},{"y":970,"series":"y1","x":10.8},{"y":4075,"series":"y1","x":68.5},{"y":3819,"series":"y1","x":33.4},{"y":2106,"series":"y1","x":23.8},{"y":2919,"series":"y1","x":42.2},{"y":2428,"series":"y1","x":27.1},{"y":2164,"series":"y1","x":38.2},{"y":1393,"series":"y1","x":13.5},{"y":7603,"series":"y1","x":74.3}]}],"width":500}</graph>
Using percentages
- When
xAxisFormat
oryAxisFormat
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 }}
<graph>{"legends":[],"scales":[{"type":"linear","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"range":"width","nice":true},{"clamp":true,"type":"linear","zero":false,"range":"height","nice":true,"name":"y","domainMax":1,"domain":{"data":"chart","field":"y"},"domainMin":0},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"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"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}}],"height":350,"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":"%","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":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0.43,"series":"y1","x":4},{"y":0.39,"series":"y1","x":8},{"y":0.43,"series":"y1","x":9},{"y":0.38,"series":"y1","x":10},{"y":0.38,"series":"y1","x":11},{"y":0.4,"series":"y1","x":12},{"y":0.48,"series":"y1","x":13},{"y":0.54,"series":"y1","x":14},{"y":0.42,"series":"y1","x":15},{"y":0.47,"series":"y1","x":16},{"y":0.45,"series":"y1","x":17},{"y":0.48,"series":"y1","x":18},{"y":0.44,"series":"y1","x":19},{"y":0.41,"series":"y1","x":20},{"y":0.41,"series":"y1","x":21},{"y":0.45,"series":"y1","x":22},{"y":0.46,"series":"y1","x":23},{"y":0.4,"series":"y2","x":1},{"y":0.377,"series":"y2","x":2},{"y":0.38,"series":"y2","x":3},{"y":0.39,"series":"y2","x":5},{"y":0.38,"series":"y2","x":6},{"y":0.419,"series":"y2","x":7},{"y":0.55,"series":"y2","x":8},{"y":0.6,"series":"y2","x":9},{"y":0.63,"series":"y2","x":10},{"y":0.27,"series":"y3","x":1},{"y":0.311,"series":"y3","x":2},{"y":0.31,"series":"y3","x":3},{"y":0.26,"series":"y3","x":5},{"y":0.28,"series":"y3","x":6},{"y":0.285,"series":"y3","x":7},{"y":0.4,"series":"y4","x":8},{"y":0.44,"series":"y4","x":9},{"y":0.42,"series":"y4","x":10},{"y":0.47,"series":"y4","x":11},{"y":0.44,"series":"y4","x":12},{"y":0.43,"series":"y4","x":13},{"y":0.42,"series":"y4","x":14}]}],"width":450}</graph>
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 }}
<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"}},{"type":"symbol","properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"value":50},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"value":"circle"},"strokeWidth":{"value":0}}},"from":{"data":"chart"}}],"height":350,"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":"%","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":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":2,"series":"y1","x":1},{"y":0.43,"series":"y1","x":2},{"y":1.2,"series":"y1","x":3},{"y":0.39,"series":"y1","x":4},{"y":0.43,"series":"y1","x":5},{"y":0,"series":"y1","x":6},{"y":-0.38,"series":"y1","x":7},{"y":-0.2,"series":"y1","x":8},{"y":0.18,"series":"y1","x":9},{"y":0.54,"series":"y1","x":10},{"y":0,"series":"y1","x":11}]}],"width":450}</graph>
Legends
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 }}<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":"category10"}],"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":150,"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":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph>
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 }}<graph>{"legends":[{"properties":{"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"","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":"category10"}],"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":150,"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":"Blue","x":1},{"y":12,"series":"Blue","x":2},{"y":6,"series":"Blue","x":3},{"y":14,"series":"Blue","x":4},{"y":2,"series":"Blue","x":5},{"y":10,"series":"Blue","x":6},{"y":7,"series":"Blue","x":7},{"y":9,"series":"Blue","x":8},{"y":2,"series":"Orange","x":1},{"y":4,"series":"Orange","x":2},{"y":6,"series":"Orange","x":3},{"y":8,"series":"Orange","x":4},{"y":13,"series":"Orange","x":5},{"y":11,"series":"Orange","x":6},{"y":9,"series":"Orange","x":7},{"y":2,"series":"Orange","x":8}]}],"width":400}</graph>
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.}}<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":["darkred","gold"]}],"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":150,"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>
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.
Annotations
Line Chart with horizontal annotations only:
{{Graph:Chart |hannotatonslabel=label4, label5, label6 |hannotatonsline=4, 5, 6 |linewidths=2,4,0 |showSymbols=3,3,3 |symbolsShape=triangle_up, cross, cross |type=line |x=0,1,2,3 |y1=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y3=3,1.342,2.63,6.32423}}
<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"},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"line","range":[2,4,0]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symSize","range":[34,136,76.5]},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"symShape","range":["triangle-up","cross","square"]}],"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":{"scale":"line","field":"series"}}},"type":"line"},{"properties":{"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"size":{"scale":"symSize","field":"series"},"fill":{"scale":"color","field":"series"},"stroke":{"scale":"color","field":"series"},"shape":{"scale":"symShape","field":"series"},"strokeWidth":{"value":0}}},"type":"symbol"}],"from":{"data":"chart","transform":[{"groupby":["series"],"type":"facet"}]}},{"type":"rule","properties":{"update":{"y":{"scale":"y","field":"y"},"x":{"value":0},"x2":{"field":{"group":"width"}},"stroke":{"value":"#54595d"},"opacity":{"value":0.75},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"h_anno"}},{"type":"text","properties":{"update":{"y":{"scale":"y","offset":3,"field":"y"},"x":{"value":0,"offset":3},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":0},"fill":{"value":"#54595d"}}},"from":{"data":"h_anno"}}],"height":200,"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","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":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":0,"series":"y1","x":0},{"y":3.342,"series":"y1","x":1},{"y":2.3423,"series":"y1","x":2},{"y":5.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":3,"series":"y3","x":0},{"y":1.342,"series":"y3","x":1},{"y":2.63,"series":"y3","x":2},{"y":6.32423,"series":"y3","x":3}]},{"format":{"parse":{"y":"number"},"type":"json"},"name":"h_anno","values":[{"y":"4","label":"label4"},{"y":"5","label":"label5"},{"y":"6","label":"label6"}]}],"width":200}</graph>
Area chart with vertical annotations only
{{Graph:Chart |vAnnotatonsLine=1, 2, 3 |vAnnotatonsLabel=label1, label2, label3 |colors=#ffff5ba0, #641050ff, #ffaaff00 |type=area |x=0,1,2,3 |y3=0,3.342,2.3423,5.32423|y2=1,2.342,4.63,2.32423|y1=3,1.342,2.63,6.32423}}
<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":["#ff5ba0","#1050ff","#aaff00"]},{"type":"ordinal","name":"transparency","range":["1","0.3921568627451","1"]}],"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"}]}},{"type":"rule","properties":{"update":{"y":{"value":0},"x":{"scale":"x","field":"x"},"opacity":{"value":0.75},"y2":{"field":{"group":"height"}},"stroke":{"value":"#54595d"},"strokeWidth":{"value":"#54595d"}}},"from":{"data":"v_anno"}},{"type":"text","properties":{"update":{"y":{"offset":-3,"field":{"group":"height"}},"x":{"scale":"x","offset":3,"field":"x"},"opacity":{"value":0.75},"baseline":{"value":"top"},"text":{"field":"label"},"angle":{"value":-90},"fill":{"value":"#54595d"}}},"from":{"data":"v_anno"}}],"height":200,"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","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":"number","x":"integer"},"type":"json"},"name":"chart","values":[{"y":3,"series":"y1","x":0},{"y":1.342,"series":"y1","x":1},{"y":2.63,"series":"y1","x":2},{"y":6.32423,"series":"y1","x":3},{"y":1,"series":"y2","x":0},{"y":2.342,"series":"y2","x":1},{"y":4.63,"series":"y2","x":2},{"y":2.32423,"series":"y2","x":3},{"y":0,"series":"y3","x":0},{"y":3.342,"series":"y3","x":1},{"y":2.3423,"series":"y3","x":2},{"y":5.32423,"series":"y3","x":3}]},{"format":{"parse":{"x":"integer"},"type":"json"},"name":"v_anno","values":[{"label":"label1","x":"1"},{"label":"label2","x":"2"},{"label":"label3","x":"3"}]}],"width":200}</graph>
Display
Putting a Chart in an {{image frame}} allows the graph to float and text may wrap around it:
{{Image frame | caption=Line chart | content = {{Graph:Chart | width=400 | height=150 | type=line | yAxisMin = -1 | x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9 }} }}
To add a title above the chart and source links below the chart, an option is to use a 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 }}