Chart.js Integration
 | Create various types of charts using chart.js |
| Type | XAR |
| Category | Macro |
| Developed by | Marius Dumitru Florea, slauriere, Manuel Leduc |
| Active Installs | 22 |
| Rating | |
| License | GNU Lesser General Public License 2.1 |
| Compatibility | XWiki 8.4+ |
Table of contents
Description
Create various types of charts using Chart.js.
ChartJS Macro
{{chartjs}} macro allows you to use all the features of Chart.js inside a wiki page.
Usage
{
"labels": [...],
"datasets": [...]
}
{{/chartjs}}
Parameters
| Name | Description | Mandatory | Default | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| type | The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter. | Yes | |||||||||||||||||||||
| title | Chart title, added as aria-label to the generated canvas | No | |||||||||||||||||||||
| id | Chart identifier | No | |||||||||||||||||||||
| options | Advanced options specified as JSON. Checkout the Chart.js documentation for the available configuration options. In addition to the options that can be defined in the standard ChartJS library, the following options can be used in this macro:
| No | |||||||||||||||||||||
| width | Width of the generated chart. | No | |||||||||||||||||||||
| height | Height of the generated chart. | No | |||||||||||||||||||||
| cssClass | Additional CSS class to be added to the chart container. It can be useful in particular for setting the canvas dimensions at the CSS level. | No |
The content of the macro is in JSON format and matches the 'data' parameter from the Chart.js documentation. The content is mandatory.
Examples
options="{~"backgroundColors~": [~"#ff16e8~", ~"#0018f4~",~"#065d00~"]}"}}
{
"labels": [
"Bug",
"Improvement",
"New Feature"
],
"datasets": [{
"label": "CKEditor",
"data": [23, 17, 5]
}, {
"label": "Diagram",
"data": [34, 11, 6]
}]
}
{{/chartjs}}
options="{~"backgroundColors~": [~"#ff16e8~", ~"#0018f4~",~"#065d00~"],
~"legend~": {~"display~": false},
~"layout~": {
~"padding~": {
~"left~": 50,
~"right~": 50,
~"top~": 50,
~"bottom~": 50
}
},
~"plugins~": {~"datalabels~":
{~"anchor~":~"end~", ~"align~": ~"end~"}}}"}}
{
"labels": [
"Bug",
"Improvement",
"New Feature"
],
"datasets": [{
"label": "CKEditor",
"data": [23, 17, 5]
}]
}
{{/chartjs}}
Table to ChartJS Macro
Draw charts using Chart.js and the data from a table.
Usage
|=Header1|=Header2
|label|numeric value
...
{{tableToChartJS type="..." title="myChart" table="myTable" /}}
Parameters
| Name | Description | Mandatory | Default |
|---|---|---|---|
| type | The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter. | Yes | |
| title | Chart title, added as aria-label to the generated canvas | No | |
| id | Chart identifier | No | |
| multipleDataSets | Whether the specified table includes multiple data sets. | No | false |
| table | Identifies the source table. | Yes | |
| dataSetLabel | The index of the table column that represents the data set label. | No | |
| options | Advanced chart options specified as JSON. Please refer to the documentation of the same 'option' parameter of the ChartJS macro. | No | |
| width | Width of the generated chart. | No | |
| height | Height of the generated chart. | No | |
| cssClass | Additional CSS class to be added to the chart container. | No |
This macro doesn't have any content.
Examples
Single Data Set
|=Issue Type|=Count
|Bug|23
|Improvement|17
|New Feature|5
{{tableToChartJS type="polarArea" table="singleDataSet" /}}
Multiple Data Sets
|=Issue Type|=CKEditor|=Diagram
|Bug|23|34
|Improvement|17|11
|New Feature|5|6
{{tableToChartJS type="doughnut" table="multipleDataSets" multipleDataSets="true" /}}
|=Month|=2016|=2017
|January|65|61
|February|59|73
|March|80|82
|April|81|69
|May|56|70
|June|55|58
|July|40|47
{{tableToChartJS type="line" table="multipleDataSetsLine" multipleDataSets="true"/}}
|=Month|=2016|=2017
|Eating|65|28
|Running|40|100
|Cycling|55|27
|Coding|56|96
|Designing|81|19
|Sleeping|90|40
|Drinking|59|48
{{tableToChartJS type="radar" table="multipleDataSetsRadar" multipleDataSets="true"/}}
|=Issue Type|=Project|=Count
|Bug|CKEditor|23
|Bug|Diagram|34
|Improvement|CKEditor|17
|Improvement|Diagram|11
|New Feature|CKEditor|5
|New Feature|Diagram|6
{{velocity}}
#set ($stackedBarOptions = {
'scales': {
'xAxes': [{
'stacked': true
}],
'yAxes': [{
'stacked': true
}]
}
})
{{tableToChartJS type="horizontalBar" table="multipleDataSets" multipleDataSets="true" dataSetLabel="1"
options='$jsontool.serialize($stackedBarOptions)'/}}
{{/velocity}}
Prerequisites & Installation Instructions
We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.
You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Release Notes
v1.6.3
The following translations have been updated with this release:
v1.6.2
Added Manuel Leduc to the list of developers
v1.6.1
v1.6
v1.5
v1.4
v1.3
v1.2
v1.1.6
v1.1.5
v1.1.4
v1.1.3
v1.1.2
v1.1.1
v1.1
v1.0
Dependencies
Dependencies for this extension (org.xwiki.contrib:application-chartjs-ui 1.6.3):
- org.xwiki.platform:xwiki-platform-rendering-macro-velocity 8.4
- org.xwiki.rendering:xwiki-rendering-macro-html 8.4
- org.xwiki.platform:xwiki-platform-rendering-macro-code 8.4
- org.xwiki.platform:xwiki-platform-rendering-wikimacro-store 8.4
- org.xwiki.platform:xwiki-platform-localization-source-wiki 8.4
- org.webjars:requirejs 2.2.0
- org.webjars:jquery 2.2.2
- org.xwiki.contrib:application-chartjs-webjar 1.6.3
