【Adalo】データをいくら入力しても表示範囲が一定のグラフを作ってみた

（なぜこれを書いたか）
Adaloのグラフに関する質問をある方から頂きました。
質：「データをいくら入力しても表示範囲が一定のグラフが作りたいです」
私：「えっ？それどういうこと。何かサンプルはあるの？」

質：「例えば1月から5月までの気温のグラフがあって、6月のデータを入れると一番古い1月のデータが削除され、6月のデータがグラフに反映されるという事をしたいんです。
つまりどんなにデータを入れても表示するのは5ヶ月分だけで、データが1個追加になる度に、一番古いデータが1個削除されるというシステムにしたいんです。」

ここまで読まれて、「自分はそんなグラフ、別に作りたくもないし、興味も無いよ」と思われた方がいるかと思います。ちょっとだけ話を聞いて下さい。この話は結構、応用性があっていろいろなところで使えそうな感じがするんです。

（応用例）
～Max50行のデータベースを作る～
ちょっと前まではAdaloは無料で使う場合、データベースは50行までという制限がありました。（現在は緩和されて無料は200行Maxになりました）

私がAdaloを使い始めた時にデータベースをどんどん追加していって50行に達したら、一番古い1行目のデータを削除、もう1行追加するときは2行目を削除する「Max50行」という名前のアプリを作りました。

上記のグラフの話もこれと一緒で、同じロジックでアプリが作成できます。データの数が制限されたデータベースというのは結構あるんじゃないかと思い備忘録も兼ねてブログとして書いてみました。

１．Adaloで5か月分の気温グラフを作る

まずサンプルとして1月～5月までの5ヶ月の最高気温のグラフを作ります。
（目標）
新規データを１つ追加すると一番古い行データが１つ削除されるシステムを作る。→行データ数（レコード数）はいつも5個だけとする

①今回作ったデータベース
　以下のような5か月分のデータが入ったデータベースを作りました。

②AdaloのHome画面の配置
グラフコンポーネントを配置し、その上にデータを入力するためのインプットを２つとデータ送信ボタンを1つ置きました。

③プレビュー画面
上記のデータベースからは以下のような折れ線グラフが作成されます。
画面上部のインプットから新規データを入力します。

２．インプットとボタンを選択してリストを作る

④インプット2個とボタン1個を選択状態にしてリストにします

データベースとは別のリストを作り、その中から一番古いデータが選択できるようにします。（ここはAdalo独特の考え方かと思います。他のNoCodeからAdaloに移った時に理解しにくい部分かも知れない）

⑤MakeList直後の状態
薄い字でインプットとボタンが繰り返された状態になります。薄い部分が無くなるところまで黄色い枠の一番下を上に持ち上げます。

３．リスト部分の設定

⑥リストにした部分を選択して、sortの設定をします
一番古いデータを1個選択できるように別のリストを作る。
ソートの部分では古い→新しいの順番にデータを並べて、表示個数を１にすると一番古いデータ1個を選択できる。

４．ボタンの設定（データの追加）

⑦ボタンのAction設定を行う
・「データ数が5個以上だったらデータを1個削除」（Delete）
・　→「新規データを追加」(Create)

⑧Createの設定ではインプットからX軸、Y軸の値を持ってくる

５．データ入力で動作確認

⑨新規データを入力してみる
5月のデータまで入っているので（X,Y）=（6月,33℃）というデータを入れてみます。

⑩6月のデータが追加されました。
追加と同時に1月のデータは削除されました。グラフも2月～6月の5か月間に変わっています。

⑪データベースを確認してみます
1月のデータが予定通り削除され、6月のデータが追加になっています。いつも5か月分のデータしか保持しないようなシステムになっています。

一番のポイントはインプットとボタンを選択してリストを作るMake Listの部分でしょうか。Adaloの使い始めの頃は何故そんなことをやるのか理解出来ませんでした。

これをやると大元のリストはそのまま存在させた状態で、一部分を編集した別リストを作ることが出来、ボタンを押したときに2つのリストを対象としたActionが設定できるのです。

これはいろいろな場面で応用が利くような気がしています。

（関連ブログ）

（過去の投稿はこちら）
https://note.com/mucho3/n/n632515d056d1