Joplin-plugin-turn-to-chart NPM

:memo::curly_loop::bar_chart: Transforms tables to charts

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.

Category Example

Number Example

CSV Example

How to install

Download the last release from this repository.
Open Joplin > Options > Plugins > Install from File
Select the jpl file you downloaded.

How to use

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
```

Available options

To see all the available options, go check the turn-to-chart library page

Formulas

turnToChart is compatible with Markdown table calculations plugin. Install it to be able to add formulas in your table.

Example of a table with formulas:

```turnToChart
| xAxis   | linear         |    square       |
|---------|---------       |---------------- |
| 0       |<!--FM 2*A1--> 0|<!--FM A1*A1--> 0|
| 1       |<!--FM 2*A2--> 2|<!--FM A2*A2--> 1|
| 2       |<!--FM 2*A3--> 4|<!--FM A3*A3--> 4|
| 3       |<!--FM 2*A4--> 6|<!--FM A4*A4--> 9|
```

Development

If you want to contribute to this plugin you can find here some userful references:

Building the plugin

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.

Updating the plugin framework

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.