MotionBoardでわかりやすい差分比較のグラフをつくってみた

#最初に
MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/04c48011-e65b-88dd-f666-a838819636e4.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e777e485-f3d0-3dc7-57e2-ddddd2df8860.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/7bc601e7-ace8-cafa-2313-c2d66b9de500.gif" width=60%>
綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
[MotionBoard　体験デモについて（公式HPより）](https://www.wingarc.com/product/motionboard/demo/index.html)

<details><summary>【MotionBoardとは】</summary><div>
様々なデータソースからデータをあつめ、１つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657180/877897e8-35d1-b055-a80c-b9051866bc38.png" width=60%>
※キャプチャはウイングアーク1st社のホームページより抜粋
[ウイングアーク１ｓｔ株式会社　MotionBoard](https://www.wingarc.com/product/motionboard/index.html)
</div></details>

今回はこちらのグラフについてグラフを紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9cc1b68e-ba8d-8a87-8837-9ba22fb8937e.png)

#わかりやすい時系列推移グラフについて
時系列推移をみたいときのグラフは、ある程度形が決まっているものです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b3e7f584-6a38-a7a7-1841-9ee00c78dae6.png)

時系列推移なので、横軸は年や月などが並びます。
大事なのはもうひとつの軸です。それは売上金額、粗利金額、予算、売上数量などの集計項目です。

この集計項目の数が多すぎてはいけません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/24a591b9-f7e8-c95a-e738-59f3888e1b59.png)
上の図は集計項目が５個あります。こうなると時系列の推移が見にくくなってしまいます。

集計項目の数は多すぎず少なすぎずがベストです。

##それでもたくさんの情報をグラフに載せたい
MotionBoardはアクションボタンを用意すると、集計軸を自在に切り替えることができます。
![yoqfx-9xawz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/78805bca-3ec3-33e8-99a2-39ed0dd35feb.gif)


しかし今回はMotionBoardの機能ではなく、表現を駆使してみたいと思います。

それが冒頭のこちらのグラフです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9cc1b68e-ba8d-8a87-8837-9ba22fb8937e.png)

灰色の棒グラフは予算、黄緑の棒グラフは実績。
実績 - 予算　が正の場合は背景に色が入り、負の場合は背景が白色です。
こうすることでパッと見て、予算より上回った月を確認することができます。

このグラフの作り方を見ていきましょう。
１.事後計算項目で差分の判定をする
２.差分FLGを背景塗りにする
３.差分FLGの軸を設定する


##１.事後計算項目で差分の判定をする
今回のグラフの大きなポイントは**差分フラグをつくること**です。
実績 - 予算　が正のときは2、負のときは1というフラグを作ります。

作り方事後計算項目でif文を書きます。
そう、事後計算項目でif文が書けるのです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/5318b931-ca88-5224-d4ed-3e2a2468b7bb.png" width=60%>


```
if ( Self([実績])-Self([予算]) < 0 ) {
    return 1;
} else {
    return 2;
}
```

こうすると差分FLGには1か2という数字が返ってくることになります。
グラフで見るとこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/c5b1082a-2cdd-4f52-5c1c-cbaa1ce2e13b.png)
※チャートは折れ線縦棒コンボを選択しましょう

##２.差分FLGを背景塗りにする
次はこの差分FLGの棒グラフになっているところを右クリックして、「列スタイルを変更する」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ea891ad4-ff94-e4b7-3937-9764363d4179.png)

「列を背景塗りにする」を選択し、「カラー設定」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4dba3410-0759-a5df-4174-5ddfa81bdd50.png" width=40%>

ここで差分FLGの値によって、色を変える処理を行います。

（ここちょっと設定が独特で難しいのですが）
対象集計項目名：差分FLG
集計値：1
色：白
とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/0b2d27f7-927a-aa4a-0c58-c64f1c7ea8bd.png)

チャートの中で、差分FLG（中間一致でなく完全一致でもOK）という項目名のものの集計値が1のときに色を白にするというものです。
**MotionBoardはこれができるので、グラフの色を自由自在に変えられるのですね。**

作ったら、「新規作成」として、次は
対象集計項目名：差分FLG
集計値：2
色：白
とします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ee9d5b88-8a96-21a1-d75f-145e3272b7d6.png)

こちらも忘れずに「新規作成」をクリック。

そうするとぼくのグラフはこんな感じになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b3038104-6af6-c09b-66c6-47ff2f900854.png)

背景塗りはこれで終わり、続いては軸の設定です。

##３.差分FLGの軸を設定する
今はわかりやすいように、グラフの中に集計値を表示させています。（データラベルといいます）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ad15186c-8925-b78a-2971-04994e59e32f.png" width=40%>


これを見ると1と2は当然高さが違うので、ちょっと変な感じです。
差分FLGが1のとき（実績より予算が高い場合）も同じ高さにしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ab5e2b98-b22f-5a17-7d75-bf22cc44d9a6.png)

何をするかというと、差分FLGのみ軸の最大値を1にします。2は見切れるようにするんですね。
そうすると1でも2でも高さいっぱいに色が変わるのです。

設定してみましょう。
チャート編集から「共通設定＞軸」を選び、「最大値、最小値、単位」のギアマークをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b818e93c-9f8b-aa7d-017a-d0385167112c.png" width=40%>

集計項目：差分FLG　に対して、軸を固定します。
「入力した最小/最大値で固定する」を
最小：0
最大：1
とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/90559955-190c-404c-965d-047c8340caeb.png)

忘れずにこちらを「新規登録」します。

こうすると背景塗りの最大値が1となり、見た目がすっきりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1ae24744-ed46-4a2c-f027-9b595b74b299.png)

あとはデータラベルをなくしたり、予算と実績の色を変えればOK。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b0d7eeb4-0d25-b97e-e3b0-1f08d4816d23.png" width=50%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/9aeeef9b-8821-beb8-b30f-e3d635c1dca0.png" width=70%>

このように、各月が達成しているかいないかがひとめでわかるグラフができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/da145699-428f-3157-a059-9f70851ef417.png)



いかがだったでしょうか？
MotionBoardにはこんなかゆいところに手が届く機能がたくさんありますので、今後もたくさん紹介して行けたら幸いです。