Anonymous
Not logged in
Talk
Contributions
Create account
Log in
Search
Editing
Template:Graph:Chart/doc
From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Namespaces
Template
Discussion
More
More
Page actions
Read
Edit source
History
Warning:
You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in
or
create an account
, your edits will be attributed to your username, along with other benefits.
Anti-spam check. Do
not
fill this in!
{{Documentation subpage}} {{Shortcut|Template:Graph}} {{clear}} <!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) --> == Parameters == {{#ifeq:{{{1|chart}}}|chart|<!-- Parts to be transcluded from the wrapper Template:Graph:Chart --> * '''width''': width of the chart * '''height''': height of the chart * '''type''': type of the chart: <code>line</code> for line charts, <code>area</code> for area charts, and <code>rect</code> for (column) bar charts, and <code>pie</code> for pie charts. Multiple series can stacked using the <code>stacked</code> prefix, e.g. <code>stackedarea</code>. * '''interpolate''': interpolation method for line and area charts. It is recommended to use <code>monotone</code> for a monotone cubic interpolation β further values are listed [https://github.com/vega/vega/wiki/Marks#area here]. * '''colors''': color palette of the chart as a comma-separated list of colors. The color values must be given either as <code>#rgb</code>/<code>#rrggbb</code>/<code>#aarrggbb</code> or by a CSS color name. For <code>#aarrggbb</code> the <code>aa</code> component denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. See the [http://github.com/d3/d3-scale/blob/master/README.md#schemeCategory10] * '''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) * '''xAxisFormat''' and '''yAxisFormat''': changes the formatting of the axis labels. Supported values [https://github.com/d3/d3-3.x-api-reference/blob/master/Formatting.md#numbers] and [https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md]. For example, the format <code>%</code> 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. <code>integer</code> for integers, <code>number</code> for real numbers, <code>date</code> for dates (e.g. YYYY/MM/DD), and <code>string</code> for ordinal 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 <code>y2</code> 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 * '''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 <code>name1:value1, name2:value2</code>: ** '''format''': Format the output, see [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 <code>midangle</code> this also defines if the text is inside or outside the chart. ** '''angle''' (pie charts only): text angle in degrees or <code>midangle</code> (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''. }}{{#if:{{{1|}}}|| * '''formatjson''': format JSON object for better legibility === Template wrappers === The functions <code>mapWrapper</code> and <code>chartWrapper</code> are wrappers to pass all parameters of the calling template to the respective <code>map</code> and <code>chart</code> functions. }} '''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. {{#if:{{{1|}}}||<!-- Parts not to be transcluded from the wrapper templates --> <nowiki>{{</nowiki>#invoke:{{BASEPAGENAME}}|''function_wrapper_name''<nowiki>}}</nowiki> }} {{#ifeq:{{{nocat}}}|yes|| <includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | | <!-- Categories below this line, please; interwikis at Wikidata --> [[Category:Graph, chart and plot templates]] }}</includeonly> }} == Examples == Line Chart:<br /> <tt><nowiki>{{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}}</nowiki></tt><br />{{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}}<br /> Note: The y-axis starts from the smallest y value, though this can be overridden with the <tt>yAxisMin</tt> parameter. Area chart:<br /> <tt><nowiki>{{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|colors={{MEActionGray}}}}</nowiki></tt><br />{{Graph:Chart|width=400|height=100|type=area|colors={{MEActionGray}}|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}<br /> Note: The y-axis starts from zero Bar chart:<br /> <tt><nowiki>{{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}}</nowiki></tt><br />{{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:<br /> <tt><nowiki>{{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={{MEActionRed}},{{MEActionBlue}}}}</nowiki></tt><br />{{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={{MEActionRed}},{{MEActionBlue}}}} Area chart with more than one data series showing blended overlap:<br /> <tt><nowiki>{{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=#80e7453a,#800ba7bc}}</nowiki></tt><br />{{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=(#80e7453a,#800ba7bc)}} Bar chart with multiple data series:<br /> <tt><nowiki>{{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={{MEActionRed}},{{MEActionBlue}}}}</nowiki></tt><br />{{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={{MEActionRed}},{{MEActionBlue}}}} Area chart with smoothed data values:<br /> <tt><nowiki>{{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}}</nowiki></tt><br />{{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:<br /> <tt><nowiki>{{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}}</nowiki></tt><br />{{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}} <tt><nowiki>{{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}}</nowiki></tt><br /> {{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}} <tt><nowiki>{{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=}}</nowiki></tt><br /> {{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=}} <tt><nowiki>{{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=}}</nowiki></tt><br /> {{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=}} <tt><nowiki>{{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}}</nowiki></tt><br /> {{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 /> <tt><nowiki>{{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}} }}</nowiki></tt><br />{{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}} }}<br /> == See also == * {{tl|Line chart}} {{Template:Graph, chart and plot templates}} <includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox|| <!-- Categories below this line, please; interwikis at Wikidata --> [[Category:Graph, chart and plot templates]] }}</includeonly> <templatedata> { "params": { "width": { "suggested": true, "label": "width", "description": "width in pixels, leave blank for auto", "example": "350", "autovalue": "" }, "height": { "suggested": true, "label": "height", "description": "height in pixels", "example": "400, auto", "autovalue": "auto" }, "type": { "description": "bar, line, pie, rect (colum graph), or area, stackedarea, stackedbar", "example": "line", "default": "rect", "autovalue": "rect", "required": true, "suggested": true, "label": "type" }, "xAxisTitle": { "autovalue": "", "suggested": true }, "yAxisTitle": { "suggested": true, "example": "%" }, "legend": { "description": "true or false, only shows for multiple series, leave blank for a legend", "suggested": true, "label": "Legend", "example": "false" }, "x": { "description": "x axis values, comma separated without spaces, delete this for a pie chart ", "example": "1,2,3,4,5", "autovalue": "1,2,3,4,5", "aliases": [ "x1" ], "suggested": true }, "y1": { "aliases": [ "y" ], "description": "y axis values, comma separated ", "example": "51,67,89,90", "suggested": true, "autovalue": "" }, "y2": { "description": "y axis values for series 2, comma separated, delete this if there is no second series ", "example": "8,10,7,22,15", "suggested": true }, "y3": { "description": "y axis values for series 3, comma separated " }, "showValues": { "description": "show y values as text, can be formatted, angle only applies to pie charts ", "example": "false,true,offset:5,fontsize:16px,angle:120" }, "fontsize": {}, "y2Title": { "suggested": true }, "y1Title": { "suggested": true }, "x2": {}, "interpolate": {}, "showSymbols": { "description": "for line charts only " }, "lineWidth": { "description": "for line graphs, or distance between pie chart segments " }, "colors": { "aliases": [ "color" ], "description": "red,blue,gray or {{MEActionRed}} etc,#3B3E3F color blind safe colors: #E69F00 (orange), #E56B4E9 (sky blue), #E009E73, #F0E442 (yellow), #0072B2 (blue), #D55E00 (orange red), #CC79A7, #BBBBBB, #000000", "example": "{{MEActionRed}},{{MEActionBlue}},#3B3E3F,seagreen", "autovalue": "", "suggested": true, "default": "{{MEActionRed}},{{MEActionBlue}},{{MEActionGray}},{{MEActionDGray}}", "label": "colors" }, "innerRadius": {}, "formatJson": { "default": "true", "autovalue": "" }, "xAxisMin": {}, "xAxisMax": {}, "yAxisMin": {}, "yAxisMax": {}, "xAxisAngle": { "description": "rotate x axis labels e.g. -45, 45, -90, +90", "example": "+90", "type": "number", "default": "+90" }, "x3": { "description": "x axis values, comma separated" }, "x4": { "description": "x axis values, comma separated" }, "x5": {}, "x6": {}, "x7": {}, "x8": {}, "x9": {}, "y4": {}, "y5": {}, "y6": {}, "y7": {}, "y8": {}, "y9": {}, "y10": {} }, "paramOrder": [ "width", "height", "type", "xAxisTitle", "yAxisTitle", "legend", "x", "y1", "y2", "y3", "showValues", "fontsize", "y1Title", "y2Title", "x2", "interpolate", "showSymbols", "lineWidth", "colors", "innerRadius", "formatJson", "xAxisMin", "xAxisMax", "yAxisMin", "yAxisMax", "xAxisAngle", "x3", "x4", "x5", "x6", "x7", "x8", "x9", "y4", "y5", "y6", "y7", "y8", "y9", "y10" ], "description": "Creates charts, eg Line:\n width=400 height=100 type=line x=1,2,3,4,5,6 y=10,12,6,14,2,10\n\nTwo Y series - set:\n width 400px height 100px xAxisTitle X yAxisTitle Y legend=Key type=rect \nx=1,2,3,4,5,6 y1=10,12,6,14,2,10 y2=5,2,6,4,2,1 colors={{MEActionRed}}, {{MEActionBlue}}\n\nPie:\ntype =pie legend=Legend x=A,B,C,D,E y1=10,12,6,14,2 \n\nfor a caption edit source to add this wrapper after -\n{{Image frame |caption=source: Jason et al 2010| content={{Graph:Chart{{....}} }}" } </templatedata>
Summary:
Please make sure your edits are consistent with
MEpedia's guidelines
.
By saving changes, you agree to the
Terms of use
, and you irrevocably agree to release your contribution under the
CC BY-SA 3.0 License
and the
GFDL
. You agree that a hyperlink or URL is sufficient attribution under the Creative Commons license.
Cancel
Editing help
(opens in new window)
Templates used on this page:
Template:Category other
(
edit
)
Template:Clear
(
edit
)
Template:Documentation subpage
(
edit
)
Template:Graph, chart and plot templates
(
edit
)
Template:Graph:Chart
(
edit
)
Template:Image frame
(
edit
)
Template:LangSwitch
(
edit
)
Template:MEActionBlue
(
edit
)
Template:MEActionGray
(
edit
)
Template:MEActionRed
(
edit
)
Template:Mbox
(
edit
)
Template:Navbox
(
edit
)
Template:Shortcut
(
edit
)
Template:Shortcut text
(
edit
)
Template:Strong
(
edit
)
Template:Terminate sentence
(
edit
)
Template:Tl
(
edit
)
Template:Uselang
(
edit
)
Module:Arguments
(
edit
)
Module:Graph
(
edit
)
Module:Message box
(
edit
)
Module:Message box/configuration
(
edit
)
Module:Navbar
(
edit
)
Module:Navbox
(
edit
)
Module:No globals
(
edit
)
Module:Shortcut
(
edit
)
Module:Shortcut/config
(
edit
)
Module:Text
(
edit
)
Module:Yesno
(
edit
)
Navigation
Navigation
Skip to content
Main page
Browse
Become an editor
Random page
Popular pages
Abbreviations
Glossary
About MEpedia
Links for editors
Contents
Guidelines
Recent changes
Pages in need
Search
Help
Wiki tools
Wiki tools
Special pages
Page tools
Page tools
User page tools
More
What links here
Related changes
Page information
Page logs