Joplin plugin which renders an HTML charts based on markdown or csv tables
The goal of this Joplin plugin is to render an HTML chart based on a markdown or csv with minimum configuration.
It is based on the turn-to-chart library.
- Download the last release from this repository.
- Open Joplin > Options > Plugins > Install from File
- Select the jpl file you downloaded.
- In your markdown page, create a markdown or csv table which respects this contraints:
- Have at least 2 columns
- All columns except the first one are numbers.
- Wrap your table with `turnToChart and `
- Add options after the table
Example of a markdown table with extra options:
~~~
``turnToChart
year | apple | pear
----------- | ----- | -----
2019 | 2 | 3
2020 | 4 | 6
2021 | 3 | 8
xAxisType: date
xAxisNbOfTicks: 4
yAxisFormat: ($.0f
yAxisNbOfTicks: 4
yAxisOrigin: from zero
`
~~~
Example of a csv table with extra options:
~~~
`turnToChart
year , apple , pear
2019 , 2 , 3
2020 , 4 , 6
2021 , 3 , 8
xAxisType: date
xAxisNbOfTicks: 4
yAxisFormat: ($.0f
yAxisNbOfTicks: 4
yAxisOrigin: from zero
`
~~~
To see all the available options, go check the turn-to-chart library page
Example of a table with formulas:
~~~
`turnToChart`
| xAxis | linear | square |
|---------|--------- |---------------- |
| 0 | 0| 0|
| 1 | 2| 1|
| 2 | 4| 4|
| 3 | 6| 9|
~~~
- Joplin - Getting started with plugin development
- Joplin - Plugin API reference
- Joplin - Data API reference
- Joplin - Plugin examples
The plugin is built using Webpack, which creates the compiled code in /dist. A JPL archive will also be created at the root, which can use to distribute the plugin.
To build the plugin, simply run npm run dist.
The project is setup to use TypeScript, although you can change the configuration to use plain JavaScript.
To update the plugin framework, run npm run update`.
In general this command tries to do the right thing - in particular it's going to merge the changes in package.json and .gitignore instead of overwriting. It will also leave "/src" as well as README.md untouched.
The file that may cause problem is "webpack.config.js" because it's going to be overwritten. For that reason, if you want to change it, consider creating a separate JavaScript file and include it in webpack.config.js. That way, when you update, you only have to restore the line that include your file.