• https://notion-plotly.netlify.app/ を使ったグラフURLを作成するサンプルです
• 解説記事: Notionのデータベースのデータを可視化するグラフURLを作成する | Web Scratch

使い方

サンプルデータベース のデータをグラフ化する手順は、次のような流れです。

1. 参照用のインデックスデータベース を作成します
   • このデータベースは、サンプルデータベースの値を集めるためだけに使います
2. インデックスデータベース に 集計用 という行を追加します
   • この行にグラフ化したいサンプルデータベースの値を集めていきます
3. サンプルデータベース に インデックスデータベース へのRelationを追加します
4. サンプルデータベース の全ての行の インデックスデータベース のRelationに 集計用 への参照を設定します
   • この時 サンプルデータベース のフィルターで 集計用 への参照をもつものだけ表示しておくと、次からサンプルデータベースに値を追加したときに自動的に参照が追加されます
   • フィルターの仕組みの解説: Notionで「ほぼ日」手帳作ってみた📖 #まいにちNotion Ep.12 - YouTube
5. インデックスデータベース にRollupを追加し、グラフ化したいデータを集める
   • この時のRollupの計算は”オリジナルを表示する”を選ぶ
6. インデックスデータベース に関数を追加し、グラフURLを作る
   • "[<https://notion-plotly.netlify.app/pie.html?values=>](<https://notion-plotly.netlify.app/pie.html?values=>)" + prop("数値") + "&labels=" + prop("支出項目")
   • 📝 labelsに & や特定の文字が入れられないため、 replaceAll などを使って削る
7. 作成したグラフURLをクリックするとグラフが見られる
   1. EmbedでグラフURLを埋め込むとNotion上でも表示できる(自動更新はされない)

https://notion-plotly.netlify.app/pie.html?values=30000,100000,100000,10000,5000,5000,10000,50000&labels=食費,家賃,貯蓄,サブスクリプション費,光熱費,通信費,日用品,その他

参照用のデータベース

インデックスデータベース

グラフ化したいデータベース

サンプルデータベース

棒グラフのサンプル