Notion Charts
Notion Charts is a simple tool to create beautiful charts for Notion.so.
Details
Usage
For public Notion pages
Simply use https://charts.mathix.ninja url, and follow the documentation below.
For private Notion pages
You'll need to host your own version of this repository. The best way to do that is by clicking this button below, it will automatically host this API on vercel.com which is 100% free.
Details
Then when the hosting is completed simply follow documentation instructions below and enjoy
Don't forget to use your URL instead of
charts.mathix.ninja.
If you want to stay up to date I recommend you to use a Deploy Hook.
Principles
1. The aggregator
It's used to group your database by it's values.
For example if you have a database which contains peoples (
name, age, height, weight).By setting your aggregator to the
age column all these people will be grouped by their ages. So if the second Notion Chart "column" is the height with the avg action, you will plot the average height by ages of your dataset.2. Actions
Right now there is 4 actions possible:
value=> Simply return the value of the cell.
count=> Will count how many items are in the aggregated set.
sum=> Return sum of all values in the aggregated set. (only works with numbers)
avg=> Return average of all values in the aggregated set. (only works with numbers)
Examples
Todo-list pie chart
Details
Type repartition of non-evolving Pokémons
Details
Specs by type of non-evolving Pokémons
Details
Pokedex normal types candle-stick chart
Details
API Documentation
For fast and easy previews you can now go directly here.
Split notion url
https://www.notion.so/fa9b093633c0479f886fdb857f57f9b0?v=c94a0043c3df410cb461e7698cee6aff
<collection> = fa9b093633c0479f886fdb857f57f9b0
<view> = c94a0043c3df410cb461e7698cee6affImage charts
[
GET] => /image-chart/<collection>/<view>?s=SCHEMA&t=CHART_TYPEQuery parameters
[REQUIRED]
t => line | bar | radar | doughnut | pie | polarArea | bubble | scatter[REQUIRED]
s => [[ColumnName:ColumnIndex:action], ...]ColumnName=> Display name of the selected Notion column.
ColumnIndex=> Notion Index of the selected column.
action=> Action to perform on the column data. (See Actions)
Interactives charts
[
GET] => /schema-chart/<collection>/<view>?s=SCHEMA&t=CHART_TYPE&darkQuery parameters
[REQUIRED]
t => line | bar | radar | doughnut | pie | polarArea | bubble | scatter[REQUIRED]
s => [[ColumnName:ColumnIndex:action], ...]ColumnName=> Display name of the selected Notion column.
ColumnIndex=> Notion Index of the selected column.
action=> Action to perform on the column data. (See Actions)
[OPTIONAL]
dark => If set in url, a Notion dark theme is applied.Open for contributions
Please feel free to contribute to this project!