1# Acharts Plugin for DokuWiki
2
3The `achart` plugin for DokuWiki makes it easy to insert interactive data charts rendered by [APEXCHARTS.JS](http://www.apexcharts.com/).
4
5This plugin accepts the same JavaScript object that ApexCharts takes to generate a chart. Any chart describable by a static JavaScript object is supported. All types of charts natively supported by ApexCharts can be rendered.
6
7[js-yaml v4.1.0](https://github.com/nodeca/js-yaml)
8
9[ApexCharts v3.28.2](https://github.com/apexcharts/apexcharts.js)
10
11## Installation
12The latest ZIP package of this plugin can be downloaded [here](http://github.com/karl257/dokuwiki-plugin-achart/zipball/master).
13
14If you install this plugin manually, make sure it is installed in `lib/plugins/achart/` - if the folder is called different it may not work.
15
16Please refer to the [DokuWiki document](http://www.dokuwiki.org/plugins) for additional info on how to install plugins in DokuWiki.
17
18Here are a few screenshots of the rendered charts:
19
20![Line Chart with Annotations](https://i.imgur.com/HvWG7Lk.png)
21
22![Bar chart](https://i.imgur.com/h3TPT0D.png)
23
24![Pie chart](https://i.imgur.com/qS26V9z.png)
25
26For more examples, check the [Examples](https://apexcharts.com/javascript-chart-demos).
27
28## Usage
29
30### Data from a local file
31
32```
33<achart url=:wiki:convertcsv.csv height=320px align=center>
34{
35  chart: {
36      height: 350,
37      type: 'bar',
38  },
39  dataLabels: {
40      enabled: false
41  },
42  title: {
43      text: "Ajax Example",
44  }
45}
46</achart>
47```
48
49### Data from a remote file
50```
51<achart url=https://gist.github.com/karl257/6e799cc0d8a5e47ac11d97672a6890dc/raw/0a80ea7ff3b89d0f376aec0eff0d817550b32334/convertcsv.csv height=320px align=center>
52{
53  chart: {
54      height: 350,
55      type: 'bar',
56  },
57  dataLabels: {
58      enabled: false
59  },
60  title: {
61      text: "From web",
62  }
63}
64</achart>
65```
66
67### Add data directly
68
69```
70var options = {
71    chart: {
72        width: 380,
73        type: 'pie',
74        toolbar: { show: true,tools: { download: true } },
75    },
76    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
77    series: [44, 55, 13, 43, 22],
78    responsive: [{
79        breakpoint: 480,
80        options: {
81            chart: {
82                width: 200
83            },
84            legend: {
85                position: 'bottom'
86            }
87        }
88    }]
89}
90```
91This plugin accepts the same JavaScript object that the `new ApexCharts()` function of ApexCharts takes to render a chart. To include a chart in your DokuWiki page, simply wrap such a JavaScript object with a `<achart>` tag.
92
93To render a pie chart for example:
94```
95<achart>
96{
97    chart: {
98        width: 380,
99        type: 'pie',
100        toolbar: { show: true,tools: { download: true } },
101    },
102    labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
103    series: [44, 55, 13, 43, 22],
104    responsive: [{
105        breakpoint: 480,
106        options: {
107            chart: {
108                width: 200
109            },
110            legend: {
111                position: 'bottom'
112            }
113        }
114    }]
115}
116</achart>
117```
118
119Also note that you can include comments in the snippet, both styles (`//` and `/* */`) are supported.
120
121The major restriction is that the JavaScript object must be **static**, i.e. it cannot include function calls or function expressions, for security reasons.
122
123## Options
124The `<achart>` tag can carry optional attributes to customize the appearance of the chart. The attributes are separated by spaces, each specified in the format of `name=value`. Valid attributes are:
125
126| Name     | Description |
127|:--------:|:----------- |
128| `width`  | Width of the chart, specified in CSS format, e.g. 50% or 320px. |
129| `height` | Height of the chart, in the same format as `width`. |
130| `align`  | Chart alignment, can be `left`, `right` or `center`. |
131
132For instance to make your chart occupying half width of its container and floated to the right:
133```
134<achart align="right" width=50% >
135  {
136    ...
137  }
138</achart>
139```
140
141## Thanks
142This plugin is based on [dokuwiki-plugin-c3chart](https://github.com/jasonxxu/dokuwiki-plugin-c3chart) created by @jasonxxu and inspired by [dokuwiki-plugin-amchart](https://github.com/35niavlys/dokuwiki-plugin-amchart) created by @35niavlys, Special thanks to them.
143
144## More examples ##
145Visit [apexcharts.com](https://apexcharts.com/javascript-chart-demos/)
146
147## Todo
148
149Support Pdf and ODT export
150
151## License
152Copyright (C) Karl Nickel
153
154This program is free software; you can redistribute it and/or modify
155it under the terms of the GNU General Public License as published by
156the Free Software Foundation; version 2 of the License
157
158This program is distributed in the hope that it will be useful,
159but WITHOUT ANY WARRANTY; without even the implied warranty of
160MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
161GNU General Public License for more details.
162
163See the COPYING file in your DokuWiki folder for details
164