kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- appsheetで折れ線グラフを作りたい人
- appsheetで積み上げ式のグラフが作りたい人
今回の記事内容は、折れ線グラフの作り方についてです。
こちらの記事でヒストグラムの作成は、既存のデータ形式でもグラフ化が容易でオススメの機能と紹介していました(^^)
ただ、やはり折れ線グラフが作成できないと非常に残念・・
今回ご紹介する方法は、汎用性の高いグラフの設定方法になるので、特に
何かの件数をカウントするデータ
こういったデータをグラフ化したい読者の方の助けになると思います。
それでは勉強していきましょう！
appsheetではなく、looker studioでグラフを作成するほうが個人的にはおすすめです
looker studioを使ったことがない人向けに編集画面の説明をしています(^^)
【初心者向け】Looker studioの基本的な使い方
looker studioでグラフを作成するときに非常に便利な関数が学べます(^^)
【必修関数】Looker studioで使うCASE関数
データの準備
今回はコールセンターの問い合わせ件数をカウントするアプリをイメージして作成しました。
そういった環境で働いたことがないため完全な想像ですが・・笑
アプリ作成のために使用したシートは、次の2シートです(^^)
各シートの詳細説明をします。
登録したダミーデータ
各カラムの設定
このシートはコールセンターにかかってきた電話の内容を登録するシートです。
検証のために適当に登録したダミーデータ
各カラムの説明
このシートはコールセンターシートに登録されたデータをカテゴリー別に集計するシートです。
今回は記事では受信日で集計するようにしています。
記事ではグラフのイメージが欲しいため、ダミーデータを先行して入力しています（コールセンターシートと集計シートに関連性はなし）
入力データの準備ができたら早速appsheetに取り込んでみましょう！
注意点として集計シートの日付がLABELになっていることを確認をしてください。
また、〇〇件数のデータタイプがNumberになっていることが必要です。
グラフの作成
データの読み込みと微修正が完了したら、折れ線グラフの作成をします。
手順は以下の流れを参考に(^^)
appsheetでグラフを作成する＝View typeをchart
Chart typeでグラフの種類、Chart columnsでグラフに載せる項目を決めることが出来ます。
今回は折れ線グラフ、〇〇件数の推移を見たいので設定は以下のようにします。
Chart typeをcol series[line]
Chart columnsに〇〇件数とつく4つのカラムをセット
Chart colorsでグラフの色、Sort byでLABEL値の昇順、降順を選ぶことが出来ます。
今回は問い合わせ件数を赤色、クレーム件数をオレンジ色、クレーム件数を黄色、新規受付件数を緑色に設定しました。
本日の数値をこれまでの集計に合算するアクションボタンを作成する
次に、データを累計させるアクションボタンの作成をします。
作成の流れは以下を参考にしてください(^^)
赤枠で囲んだ部分を参考に設定を行います。
add a new row to another table…：今いるテーブル(コールセンター)から他のテーブルに値を送るアクション
- ID：uniqueid()
- 問い合わせ件数：count(select(コールセンター[カテゴリー],and([カテゴリー]=問い合わせ,[受信日]=today())))+max(集計[問い合わせ件数])
- クレーム件数：count(select(コールセンター[カテゴリー],and([カテゴリー]=クレーム,[受信日]=today())))+max(集計[クレーム件数])
- 解約件数：count(select(コールセンター[カテゴリー],and([カテゴリー]=解約,[受信日]=today())))+max(集計[解約件数])
- 新規受付件数：count(select(コールセンター[カテゴリー],and([カテゴリー]=新規受付,[受信日]=today())))+max(集計[新規受付件数])
- 日付：today()
下線の色はグラフの色と合わせています。
アクションボタンの設定は以上です(^^)
累計件数を算出する関数の考え方
先ほどさらっと流した累計件数を算出する関数の考え方について説明します。
どれも基本構造は同じなので問い合わせ件数を例に解説します。
count(select(コールセンター[カテゴリー],and([カテゴリー]=問い合わせ,[受信日]=today())))+max(集計[問い合わせ件数])
まず大前提として、この関数は青の下線と赤の下線の数字を足し算しています。
わからない人は今は関数をコピペするだけでOK！
解説は一枚絵にまとめましたが、
本日登録分のデータのレコード数を計上して、これまでの累計数値に足す
やっていることとしてはこれです。
推奨設定のおまけ
より使い勝手を向上させるためのTIPSとして、私ならこうする！という設定をご紹介します。
本記事の内容からは外れますので、興味のない方は読み飛ばしてOKです(^^)
アクションボタンの誤作動をなくさせる
直前までアクションボタンの説明をしていたのでまずはこれから(^^)
Only if this condition is trueに以下の条件式を入力します。
not(in(today(),集計[日付]))
この関数を入力しておくことで、1日1回しかこのボタンを押せなくなります。
Yes/Noを返す関数は使用頻度が高いです
not()関数やin()関数などのYes/Noを返す関数は、こちらの記事で詳しくまとめています(^^)
【永久保存版】appsheetで覚えておくべきYes/No関数
グラフに目標の数値を入力する
続いて、折れ線グラフに目標値を入力する設定を行ってみます。
設定はAdd Virtual Columnから行います。
目標のクレーム件数を30件とする場合
目標の新規受付件数を70件とする場合
設定としては、
App formulaに目標数値、TypeをNumberにする
だけです。作成したVirtual ColumnをChart columnsにセットします。
目標件数がグラフに表示されました(^^)
この設定は、appsheetの軸の最大値や最小値が指定できない仕様を無理やりなくすことも可能なTIPSです。
設定の検証
最後に記事内で作成した仕組みがきちんと作動するか確認します。
本日（2022/7/24）の件数を増やしたいためこれまでのグラフ値よりも多く入力しています！
このシートは読者の皆さんのアプリでそれぞれ入力してみてください。
本日の集計は、初期設定ではDetail Viewの画面上部にあります。
このボタンを押すことでコールセンターシートにあるデータが集計シートに送られます。
本日分のデータ計上前
本日分のデータ計上後
累計データに本日分のデータが合算されているのが確認できました(^^)
まとめ
以上、appsheetでの折れ線グラフの作り方についての記事でした。
ちなみに、この記事の設定方法なら積み上げ式の棒グラフも同じように作成できます(^^)
Chart typeをcol series[stack]に変更するだけ(^^)
他に検討余地のある改善テーマとしては、
- 本日分のコールセンターのデータのみを表示させる（スライス）
- 本日分のデータにのみアクションボタンを表示させる（context()関数）
- Automaionで集計作業を自動化する
あたりが考えられそうですね(^^)
改善テーマを解決するための設定は参考記事から学べます
スライス設定の基本から応用まで、汎用性の高い設定についてまとめています(^^)
【永久保存版】汎用性の高いスライスの設定5選
アプリの使いやすさを追求するための関数について学べます(^^)
【簡単設定！】context()関数の使い方
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)