Motionboardで時間帯別の実績件数と予定件数をリアルタイムに対比することを想定したチャートの作成

# はじめに
Motionboardは、「リアルタイム表示が得意」という特徴があります。
たとえば「IoTデバイスから数秒おきにデータをMotionboardへAPIを通して送り込んで、これを表示するとともにDBに永続化する」というような使い方も想定されているようです（IoTオプションという有料オプションだったとおもいます、うちの会社では導入してくれてませんので使えません、）

リアルタイムデータをそもそもどうこしらえるかはさておき、かつ今回は別に「リアルタイム分析」のような機能も使いませんので、リアルタイムでもなんでもないっちゃないのですが、リアルタイムっぽいことをMotionboardでやってみようとおもいます。

さて、今回は「日々の作業実績が都度DBに追加されていくようなデータ」を想定し、今時点でどのぐらいの実績が上がっているか、また予定件数と対比してどうなっているかを、リアルタイムに確認するようなグラフを作成してみます。
たとえば、現場での作業ログがリアルタイムにDBに追加されていって、この情報を、現場のデジタルサイネージでダッシュボード的に確認する、みたいな状況を想定しています。

例えばこんな感じに、作業ログを時間単位で集計し、かつ時間単位で立案されている作業予定にと突き合わせて確認する。かつ、現在時刻より右側は背景を灰色で塗りつぶす、みたいな感じのチャートを作ってみようと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/5bd4fc5a-e487-3a40-b043-a1aa8a48f236.png)

スクショもりもりで説明していきます。
当方の操作環境は時代遅れの5.7なので、「古っっっｗｗｗｗｗｗｗｗｗｗｗｗｗ」と笑ってください。設定項目自体は6.0も6.1も一緒のはず……。間違ってたらご指摘お願いします。



# データの準備
今回は演習用データを、Excelを使って勝手にこしらえさせてもらいます。
こんな感じに、1作業につき1レコードのデータが、作業のたびに都度追加されていく、みたいなテーブルを想定しています。
「作業日時」はさておき、「作業時間帯」というデータは、普通わざわざテーブルに組み込まないと思いますので、Motionboardのカスタム項目で作ればいいと思います。
今回はどうせ自分でテストデータをこしらえてExcelをデータソースとして使ってしまうので、あらかじめExcelで作ってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1b27b204-f228-9450-4241-8f1aa4194c3a.png)

Excelの数式はこんな感じでつくりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/cc48b34f-86bc-3401-6265-80c4bf9523f5.png)

```Excel
作業番号	作業者名	作業日時	作業時間	列1	列2	作業時間帯
1	作業者A	0.340277777777778	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D3,"hh:")	00-	=CONCATENATE(F3,G3)
2	作業者A	=D3+E3	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D4,"hh:")	00-	=CONCATENATE(F4,G4)
3	作業者A	=D4+E4	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D5,"hh:")	00-	=CONCATENATE(F5,G5)
4	作業者A	=D5+E5	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D6,"hh:")	00-	=CONCATENATE(F6,G6)
5	作業者A	=D6+E6	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D7,"hh:")	00-	=CONCATENATE(F7,G7)
6	作業者A	=D7+E7	=ABS(NORMINV(RAND(),0.0001,0.01))	=TEXT(D8,"hh:")	00-	=CONCATENATE(F8,G8)
```

これをExcelのピボットテーブルを使い、時間帯別に作業件数を集計してみるとこんなイメージになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c0d3aba7-574c-de37-1bdf-a85d3351a73a.png)

また、時間帯別の作業予定もこしらえてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/bd805ea9-6f0d-786d-a832-d0a50f33385c.png)

実績を集計して累積を取った値と、予定の累積を取った値とをくっつけて、グラフにするとこんなイメージになります。
冒頭に貼ったグラフと等しいです。これをMotionboardで作ってみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/9ee7debb-db0d-755f-ad5c-e8caa7135b02.png)

# Motionboardで実績データの集計
まず、データソースを作ります。
接続先を「ボード専用Excel」にして、Excelファイルをアップロードし、「読込設定」で適切な範囲を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/534d3224-1faf-141b-c8b5-a52685345dd1.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/d10aa121-1cb3-9534-ce69-5e33c41d8657.png)



次に、データソースエディタで以下のように設定します。
取り急ぎチャートの種類は「折れ線縦棒コンボ」にしておきます。
集計項目は何でもいいですが、とりあえず「作業番号」を「件数」で集計し、別名を「実績件数」としておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/34f33493-2060-cc41-84fa-8bfe616675f6.png)


また、「追加項目作成」で「事後集計項目」を追加し、「実績件数累計」を作っておきましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/89638302-43d9-d0ea-7de1-a9dd037b714c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/8600c333-bf3f-3e04-98c5-09c4f6807bff.png)


そして、作成されたチャートにおいて、実績件数累計の「列スタイル」を「棒」から「折れ線」に変更すればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1879c0f2-2394-4121-43b1-43174089666f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/5a7b0842-97e3-6006-e9c7-f9fc40dc0796.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/e08705d0-d753-23fe-da10-78b4c6666d73.png)

# Motionboardで予実データの集計
では次に、集計された実績データに対して、予定データを突合せたチャートを作ってみましょう。
今回は、「結合データソース」という機能を使おうと思います。

先ほどのデータソースをコピーして新しいデータソースにした後、データソースエディタを開きます。
データソース選択で、「DS1」の隣の「＋」ボタンを押して、「DS2」を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1a1569f1-e52f-fa0a-db40-d97ffd2b20f9.png)

追加したDS2でも同じExcelを選択し、次は予定データが書き込まれたシートのデータ領域を選択してOKします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/553f4def-4f77-6bf7-638a-f4f82043dcad.png)


DS2のデータを取り込めました。
これで、DS1とDS2の集計を1つのデータソースファイルの中で同時に行えるようになります。
「実績件数」は、「表示」のチェックを外して非表示にしておきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/21da402c-fb87-7602-a9f6-bdb801bf0f07.png)

結合データソースは、いまいちどう使っていいのかわかっていませんでした。
最近ようやく理解できるようなきがしてきていて、私は『DS1での集計軸（行と列）と、DS2での集計軸（行と列）が一致してさえいれば、違う情報源であっても、集計結果を重ね合わせて表現できる』というようなイメージで使っています。もし間違ってたらだれかコメントお願いします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/e813aace-818b-e20e-f5c0-4aa969631e9c.png)

ちなみに、DS2のデータは事後集計項目は作成できないようなので、事前に集計しておきました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/933d478d-6ee7-260f-3ed4-d148816cb962.png)




このデータソースを使ってチャートを作ります。
折れ線チャートを指定してチャートを作成してみましたが、第2軸が自動的に設定されてしまったので、まずは軸を統一化させます。
チャートエディタから、共通設定-軸-数値軸の設定-表示を「1つに集約」にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/50b84d39-db67-f1dc-63ba-a0cb8c48ea93.png)

チャートメニューの軸の設定から変更してもいいです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/ec9b60c5-6011-8c31-59ec-abfb73bb5909.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/42905d60-8949-c0ba-854e-c44ace07b339.png)

集約軸の名前がダサいので変更します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/9c92d169-58bd-c78a-dcfa-7efd10682d65.png)

できました。
チャートのデザインがダサかったので、修正したところもスクショ貼っておきます。データポイントアイコンを追加したり、影消したり、色つけたりしています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/debac953-3ea9-0879-5b2a-84edc329e352.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/2b78c6c9-060f-5d78-6075-6e62f482970e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/010b9739-d222-79da-155e-ae1774aeefbd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/caa9e9b7-98af-a5fa-707f-040adaedf331.png)


# 背景を塗りつぶす

背景を塗りつぶすには、まず先にユーザシステム変数で、現在時刻の変数を作っておきましょう。
私は以下のような変数を作っています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/f8343404-c8a1-9586-beff-9b584418a2d3.png)

次に、チャートエディタ-折れ線・棒系設定-行目盛り線の設定-行目盛り線を設定するを開きます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/e436a2e1-e012-c888-4319-b49956faf6cf.png)
こんなかんじに設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/a3a7f4f9-f4e2-58ab-ceb5-da7bdc1f3581.png)

すると、こんな感じのチャートになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/fb8023ee-13d2-246a-5b85-d2a1d6803b64.png)

今回のテストデータでは実績データをすべての時刻で入力してしまっているのですが、
想定では実績ログデータは、都度データが追加されていくことになります。

ただ、実績値は累積値を表示しているため、もし今が16:00時点だとして、17:00以降のデータがなかったとしても、16:00時点の累積値がずっと横に伸びて表示されてしまいます。
たとえば、実績データを16:00までのデータに絞ってみると、以下のチャートのように実績が入っていない部分も、ずっと右に伸びて表示されてしまいます。気持ち悪いですが仕方ない。なんとかする方法ご存じの方教えてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/4b27ce4e-a0b0-2a78-986d-04c923b1a653.png)
（2021/04/07 08:32 追記）
以下の記事を参考にすれば、横に伸びずに済むかもしれません。ご参考まで。
@Ryo---san　[MotionBoardでif文を書こう〜今のグラフをさらに見やすく美しく〜](https://qiita.com/Ryo---san/items/51875032a5324aed8dae)
# アイテムのリフレッシュ間隔を設定
あとはアイテムプロパティのリフレッシュ間隔を適切な値に設定すれば、自動的にチャートアイテムが更新されるのではないでしょうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/27e0e2d0-b51b-19fb-aa0b-85125b0f0d6f.png)


# おわりに
需要あるのかな…
あとMotionboardを個人で使える感じのサービスとかないっすかね…
お目通しありがとうございました。