TableToChartJS
Last modified by Vincent Massol on 2024/10/30 11:32
Description
Draws charts using Chart.js and the data from a table.
Usage
(% id="myTable" %)
|=Header1|=Header2
|label|numeric value
...
{{tableToChartJS type="..." table="myTable" /}}
|=Header1|=Header2
|label|numeric value
...
{{tableToChartJS type="..." table="myTable" /}}
Parameters
| Name | Description | Mandatory | Default |
|---|---|---|---|
| type | The type of chart. Choose from: line, bar, radar, pie, doughnut, polarArea, bubble, scatter. | Yes | |
| 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 | |
| title | Chart title, added as aria-label to the generated canvas | No | |
| id | Chart identifier | No |
Examples
Single Data Set
| Issue Type | Count |
|---|---|
| Bug | 23 |
| Improvement | 17 |
| New Feature | 9 |
| Ideas | 0 |
Multiple Data Sets
| Issue Type | CKEditor | Diagram |
|---|---|---|
| Bug | 25 | 34 |
| Improvement | 17 | 11 |
| New Feature | 5 | 6 |
| Ideas | 0 | 0 |
| Month | 2016 | 2017 |
|---|---|---|
| January | 65 | 61 |
| February | 59 | 73 |
| March | 80 | 82 |
| April | 81 | 69 |
| May | 56 | 70 |
| June | 55 | 58 |
| July | 40 | 47 |
| Month | 2016 | 2017 |
|---|---|---|
| Eating | 65 | 28 |
| Running | 40 | 100 |
| Cycling | 55 | 27 |
| Coding | 56 | 96 |
| Designing | 81 | 19 |
| Sleeping | 90 | 40 |
| Drinking | 59 | 48 |
Merged Data Sets
| Issue Type | Project | Count |
|---|---|---|
| Bug | CKEditor | 23 |
| Bug | Diagram | 34 |
| Improvement | CKEditor | 17 |
| Improvement | Diagram | 11 |
| New Feature | CKEditor | 5 |
| New Feature | Diagram | 6 |
