Difference between revisions of "Module:Graph/doc"
Jump to navigation
Jump to search
blackwiki>Sillyfolkboy (document inverted scale feature) |
(update link) |
||
| Line 14: | Line 14: | ||
* '''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>. | * '''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. | * '''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 is [ | + | * '''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 is [https://github.com/d3/d3-scale-chromatic/blob/master/README.md#schemeCategory10 <code>category10</code>]). |
* '''xAxisTitle''' and '''yAxisTitle''': captions of the x and y axes | * '''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. | * '''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. | ||
Revision as of 23:18, 7 August 2019
| This module is rated as alpha. It is ready for third-party input, and may be used on a few pages to see if problems arise, but should be watched. Suggestions for new features or changes in their input and output mechanisms are welcome. |
Module with helper functions for the Graph extension. From de:Modul:Graph.
Functions for templates
chart
Creates a JSON object for <graph> to display charts. In the article namespace the template Template:Graph:Chart should be used instead. See its page for use cases.
Parameters:
- width: width of the chart
- height: height of the chart
- type: type of the chart:
linefor line charts,areafor area charts, andrectfor (column) bar charts, andpiefor pie charts. Multiple series can stacked using thestackedprefix, e.g.stackedarea. - interpolate: interpolation method for line and area charts. It is recommended to use
monotonefor a monotone cubic interpolation – further supported values are listed at https://github.com/vega/vega/wiki/Marks#area. - colors: color palette of the chart as a comma-separated list of colors. The color values must be given either as
#rgb/#rrggbb/#aarrggbbor by a CSS color name. For#aarrggbbtheaacomponent denotes the alpha channel, i.e. FF=100% opacity, 80=50% opacity/transparency, etc. (The default color palette iscategory10). - 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.
integerfor integers,numberfor real numbers,datefor dates (e.g. YYYY/MM/DD), andstringfor ordinal values (usestringto 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
y2denotes 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
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
midanglethis also defines if the text is inside or outside the chart. - angle (pie charts only): text angle in degrees or
midangle(default) for dynamic angles based on the mid-angle of the pie sector.
- showSymbols: For line charts: show a symbol (circle) at each data point. (usage: showSymbols=true)
- innerRadius: For pie charts: defines the inner radius to create a doughnut chart.
- formatjson: format JSON object for better legibility
Template wrappers
The functions mapWrapper and chartWrapper are wrappers to pass all parameters of the calling template to the respective map and chart 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. {{#invoke:Graph