Binabago: Module:Graph/doc

{{#if:{{{1|}}}||<!-- Parts not to be transcluded from the wrapper templates -->
{{Module rating |alpha}}
{{Lua sidebar}}
<!-- Please place categories where indicated at the bottom of this page and interwikis at Wikidata (see [[Wikipedia:Wikidata]]) -->
Module with helper functions for the [[Help:Graph|Graph]] extension. From [[:de:Modul:Graph]].

== Functions for templates ==
=== <code>chart</code> ===
Creates a JSON object for <code><nowiki><graph></nowiki></code> to display charts. In the article namespace the template [[Template:Graph:Chart]] should be used instead. See its page for use cases.

'''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 [[:en:line chart|line chart]]s, <code>area</code> for [[:en:area chart|area chart]]s, and <code>rect</code> for (column) [[:en:bar chart|bar chart]]s, and <code>pie</code> for [[:en:pie chart|pie chart]]s. Multiple series can stacked using the <code>stacked</code> prefix, e.g. <code>stackedarea</code>.
* '''interpolate''': [[:en:interpolation|interpolation]] method for line and area charts. It is recommended to use <code>monotone</code> for a [[:en:monotone cubic interpolation|monotone cubic interpolation]] – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area.
* '''colors''': color palette of the chart as a comma-separated list of colors. The color values must be given either as <code>#rgb</code>/<code>#rrggbb</code>/<code>#aarrggbb</code> or by a [[:en:Web colors#X11 colour names|CSS color name]]. For <code>#aarrggbb</code> the <code>aa</code> component denotes the [[:en:alpha channel|alpha channel]], i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette if n <= 10 is Category10: {{ChartColors|Categ20|10}} else is Category20: {{ChartColors|Categ20|20}}).
* '''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 <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 (use <code>string</code> to prevent axis values from being repeated when there are only a few values).
* '''x''': the x-values as a comma-separated list
* '''y''' or '''y1''', '''y2''', …: the y-values for one or several data series, respectively. For pie charts <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. Setting to 0 with <code>type=line</code> creates a scatter plot.
* '''showValues''': Additionally, output the y values as text. (Currently, only (non-stacked) bar and pie charts are supported.) The output can be configured used the following parameters provided as <code>name1:value1, name2:value2</code>:
** '''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 <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''.
* '''xGrid''' and '''yGrid''': display grid lines on the x and y axes.
}}{{#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 [[Portable Network Graphics|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>
}}