# 【Bubble】チャートの作り方（動的なチャート変更）

**URL:** <https://www.nocode-faq.com/t/topic/2283>\
**Category:** bubble\
**Created:** [2021 年 10 月 25 日午前 10:09 UTC](https://www.nocode-faq.com/t/topic/2283 "2021-10-25T10:09:52Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yukichi0628](https://avatars.discourse-cdn.com/v4/letter/y/ac91a4/32.png) [@yukichi0628](https://www.nocode-faq.com/u/yukichi0628)\
**Post date:** [2021 年 10 月 25 日午前 10:09 UTC](https://www.nocode-faq.com/t/topic/2283/1 "2021-10-25T10:09:52Z")

</div>

いつもお世話になります。  
先日投稿させてもらったアプリをさらに進化させようとしていますが苦戦しています。皆さんのお力をお貸しください。

今回実現したいことは、DBに登録されている年月をリストとしてドロップダウンに反映させて、反映させた年月を選ぶとそれに対応したデータがチャートに表示したい。

色々試してみましたが、全く歯が立たずです。  
ご教授よろしくお願いします。

【画面イメージ】

 ![スクリーンショット 2021-10-25 18.57.47](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8c94b41c321bfa9c4ad1f52329083c5a5f13c737.png)

【DBの状態】

 ![スクリーンショット 2021-10-25 19.02.12](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/cb914cc1ec27f42aa7b6707e114242c193c501d8.png)

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2021 年 10 月 25 日午後 12:41 UTC](https://www.nocode-faq.com/t/topic/2283/2 "2021-10-25T12:41:54Z")

</div>

Dropdownの値として、DBの年月項目をRounded to monthしてからGroup by同じ項目として設定します。  
下のグラフに設定するデータも同じ方法で処理した上でGroup byのaggreementにcountやsumなどで値を割り当てる。

でできると思います！  
が、この処理って毎回画面を開いた時に計算するのは計算コストがもったいないです。  
見たい項目が決まっているのであればrecurringで毎日バッチで計算させた解をDBに格納しておくのが良いと思います。

---

<div class="post-metadata">

**Author:** ![yukichi0628](https://avatars.discourse-cdn.com/v4/letter/y/ac91a4/32.png) [@yukichi0628](https://www.nocode-faq.com/u/yukichi0628)\
**Post date:** [2021 年 10 月 26 日午前 9:52 UTC](https://www.nocode-faq.com/t/topic/2283/3 "2021-10-26T09:52:29Z")

</div>

返信ありがとうございます！  
レベルが高すぎて中々理解できず苦戦中です。

下記のようなイメージで良いですか？そうするとGroup byがうまく設定できず…ご教授お願いします！

 ![スクリーンショット 2021-10-26 18.50.05](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4d3a7d14c5f82b8a9c4c18a65c7884197722fe49.png)

---

<div class="post-metadata">

**Author:** ![yukikun](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yukikun/32/3485_2.png) [@yukikun](https://www.nocode-faq.com/u/yukikun)\
**Post date:** [2021 年 10 月 26 日午前 10:59 UTC](https://www.nocode-faq.com/t/topic/2283/4 "2021-10-26T10:59:30Z")

</div>

会社の分類は入れていませんが、概念的なサンプルを作ってみました。  
画面内で1回で処理を行う想定の場合、Dropdownに設定する内容が日付項目である必要が出てしまうため、2021年10月などの表記が難しいかもしれません。

現状のサンプルとしては、左に表示されている内容からDropdownに日付を設定（毎月1日0時にしている）。  
その日付をもとに、Dropdown.value\<=集計範囲\<Dropdown.value.addMonth(1) として1ヶ月間の値の範囲を検索して計算しています。

日付を綺麗に表示させる場合は、Dropdownに表示させる専用のテーブル（yyyy/mmとdateデータのみ）を用意してそちらでフィルタさせ、dateフィールドを使って集計をかけると良いと思います。

実働サンプル

> **[Bubble - Visual Programming](https://testce.bubbleapps.io/version-test/dashboard)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

エディタ

> **[Bubble Editor - Testce](https://bubble.io/page?type=page&name=dashboard&id=testce&tab=tabs-1)**
>
> Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

---

<div class="post-metadata">

**Author:** ![yukichi0628](https://avatars.discourse-cdn.com/v4/letter/y/ac91a4/32.png) [@yukichi0628](https://www.nocode-faq.com/u/yukichi0628)\
**Post date:** [2021 年 10 月 31 日午前 2:21 UTC](https://www.nocode-faq.com/t/topic/2283/5 "2021-10-31T02:21:25Z")

</div>

@yukikun  
色々ヒントをいただきましたので、試行錯誤してできました！ありがとうございました！

 ![スクリーンショット 2021-10-31 11.18.03](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6a2dc352eaa1e9f6952a6b27aac4b60cd45af67c.png)  
 ![スクリーンショット 2021-10-31 11.18.29](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c92ba53bed96a0bee1a4ba7905bb9069cee16ab7.png)