General Actions:
Chart Macro
Last modified by Vincent Massol on 2012/04/10
 | Generates graphical charts from various data sources |
| Type | JAR |
| Developed by | |
| License | GNU Lesser General Public License 2.1 |
| Bundled With | XWiki Enterprise, XWiki Enterprise Manager |
Table of contents
Description
Usage
Currently chart macro supports two types of data sources. Usage of the macro slightly differs from "xdom" mode to "inline" mode:
Usage for "xdom" data sources:
{{chart source="xdom" type="<type>" params="<params>" title="<title>" height="<height>" width="<width>"/}}
Usage for "inline" data sources:
{{chart source="inline" type="<type>" params="<params>" title="<title>" height="<height>" width="<width>"}}
// Put your data table definition here.
{{/chart}}
// Put your data table definition here.
{{/chart}}
Parameters definition
| Name | Optional | Allowed values | Default value | Description |
|---|---|---|---|---|
| type | no | line, area, bar, pie, bar3D or line3D | none | Type of chart to be generated. |
| source | yes | xdom or inline | xdom | Type of the data source which provides input for charting. |
| params | yes | string | none | Additional parameters for the data source. This string contains a list of parameter name to value mappings. Available parameter names and values depend on the data source being used (refer examples below). |
| title | yes | string | none | A title string to be used when rendering the chart |
| width | yes | string | 400 | Width of the chart image in pixels |
| height | yes | string | 300 | Height of the chart image in pixels |
Examples
Example for an "xdom" data source chart
An "xdom" data source can be used when you need to draw charts from data tables located anywhere in the wiki. For an example, let's say *xwiki:Main.Data* wiki page contains the following data table definition:
(%id="table1"%)
| |X |Y |Z
|Q1|1.2|3.4|1.3
|Q2|4.5|3.4|2.3
|Q3|1.2|4.5|9.0
|Q4|3.4|1.2|1.2
| |X |Y |Z
|Q1|1.2|3.4|1.3
|Q2|4.5|3.4|2.3
|Q3|1.2|4.5|9.0
|Q4|3.4|1.2|1.2
Then you can draw a chart from this data table with following syntax (from any wiki page):
{{chart type="bar" params="document:<document_source_name>;table:table1;range:B2-D5;series:columns;" title="Chart Test" width="320" height="240"/}}
For our example with *Main.Data*, the syntax is:
{{chart type="bar" params="document:Main.Data;table:table1;range:B2-D5;series:columns;" title="Chart Test" width="320" height="240"/}}
NOTE: As you can see here, the "params" string is used to clearly define input data source:
- Wiki page: "document:Main.Data;"
- Name of the data table: "table:table1;" (the table must have an id)
- Data range: "range:B2-D5;" (just like you'd select a data range on an excel sheet)
- Orientation: "series:columns;" (defines the x and y axes)
Result:
Example for an "inline" data source chart
{{chart type="pie" source="inline" params="range:B2-D5;series:columns;" title="Chart Test" width="320" height="240"}}
| |X |Y |Z
|Q1|1.2|3.4|1.3
|Q2|4.5|3.4|2.3
|Q3|1.2|4.5|9.0
|Q4|3.4|1.2|1.2
{{/chart}}
| |X |Y |Z
|Q1|1.2|3.4|1.3
|Q2|4.5|3.4|2.3
|Q3|1.2|4.5|9.0
|Q4|3.4|1.2|1.2
{{/chart}}
See also the Syntax Distribution Chart Snippet for another example.