PluginChartJS
Overview
PluginChartJS is a wikiplugin introduced in Tiki16 (but only started working in Tiki17 ) that can generate charts using the open-source Chart.js library.
This plugin is currently only developed to work with Doughnut- and Pie-type charts.
Please note: You should consider this plugin as experimental. Why? Because there are several charting libraries in Tiki, it is probable that some of them will be deprecated, so the community can converge on a common solution. And that solution will be deployed for all charts within Tiki, and for use with PluginList data.
Parameters
Create a JS ChartIntroduced in Tiki 16.
Go to the source code
Preferences required: wikiplugin_chartjs
| Parameters | Accepted Values | Description | Default | Since |
|---|---|---|---|---|
| (body of plugin) | JSON encoded array for data and options. | |||
height |
text | The height of the chart in px | 200 | 16.0 |
id |
text | A custom ID for the chart. | tikiChart1, tikiChart2 etc | 16.0 |
type |
text | The type of chart. Currently works with pie, bar and doughnut | pie | 16.0 |
width |
text | The width of the chart in px | 200 | 16.0 |
data_colors |
text | Colon-separated colors for the datasets in the chart. Max 10, if left empty | red:blue:green:purple:grey:orange:yellow:black:brown:cyan | 16.0 |
data_labels |
text | Colon-separated labels for the datasets in the chart. Max 10, if left empty | A:B:C:D:E:F:G:H:I:J | 16.0 |
values |
text | Colon-separated values for the chart (required if not using JSON encoded data in the plugin body) | 16.0 | |
data_highlights |
text | Colon-separated color of chart section when highlighted | 16.0 | |
debug |
digits | Uses the non-minified version of the chart.js library for easier debugging. | 0 | 18.3 |
Example usage
This code:
Copy to clipboard
{CHARTJS(values="12:3:20:11")} {CHARTJS}
Would produce:
Or this other code:
Copy to clipboard
{CHARTJS(id="mychart1" type="pie" height="300" width="400" values="15:25:60" data_labels="foo:bar:wohoo" data_colors="red:pink:orange" data_highlights="snow:lightyellow:lightgrey")}{CHARTJS}
Would produce:
Related: