xref: /plugin/vegalite/README.md (revision 39296c152262818f39e69de7d96cd8763dc158f7) 
1# Vega-Lite Plugin for DokuWiki
2
3This is a plugin for [DokuWiki](https://www.dokuwiki.org/dokuwiki). It provides support for the interactive graphing tool [Vega-Lite](https://vega.github.io/vega-lite/). Vega-Lite is a JavaScript based interactive graphing tool using  concise, declarative JSON syntax to create diagrams dynamically.
4
51. [Installation](#installation)
62. [Basic example](#basic-example)
73. [Further Functionality](#further-functionality)
84. [Configuration and Settings](#configuration-and-settings)
95. [Known Problems](#known-problems)
106. [License](#license)
11
12## Installation
13
14Install the plugin using the [Dokuwiki Plugin Manager](https://www.dokuwiki.org/plugin:plugin). Refer to [Plugins](https://www.dokuwiki.org/plugins|Plugins) on how to install plugins manually.
15
16⚠️ The plugin requires PHP 8.0+ to function properly.
17
18## Basic example
19
20Provide the Vega-Lite data enclosed by the ```<vegalite>``` tags:
21
22    <vegalite>
23    {
24        "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
25        "description": "A simple bar chart with embedded data.",
26        "data": {
27            "values": [
28            {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
29            {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
30            {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
31            ]
32        },
33        "mark": "bar",
34        "encoding": {
35            "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
36            "y": {"field": "b", "type": "quantitative"}
37        }
38    }
39    </vegalite>
40
41This will be rendered by the plugin and shown as:
42
43![The diagram as provided by Vega-Lite](https://github.com/RobertWeinmeister/dokuwiki-vegalite/blob/main/example.png?raw=true)
44
45Vega-Lite supports multiple other graphs besides the shown bar chart, for more examples and details on the Vega-Lite syntax, see <https://vega.github.io/vega-lite/examples/>.
46
47## Further Functionality
48
49### Size Adjustmens
50
51The width and height of the container of the diagram can be adjusted using
52
53    <vegalite #width #height>
54
55where #width and #height can take any value supported by CSS, for example:
56
57    <vegalite 100% 1cm>
58
59## Configuration and Settings
60
61No further configuration is required.
62
63### Version and Location
64
65You can choose which Vega/Vega-Lite/Vega-Embed versions you want to use:
66
67- The locally hosted versions (currently versions 6.2.0/6.4.3/7.1.0) or
68- the remotely hosted, currently available, latest version.
69
70## License
71
72This project is licensed under the GNU General Public License v2.0. See the [LICENSE](LICENSE) file for details.
73
74Vega, Vega-Lite and Vega-Embed are licensed under the BSD 3-Clause "New" or "Revised" License. See the [LICENSE VEGA](LICENSE%20LICENSE%20VEGA), [LICENSE VEGA-LITE](LICENSE%20LICENSE%20VEGA-LITE) and [LICENSE VEGA-EMBED](LICENSE%20LICENSE%20VEGA-EMBED) file for details.
75