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>





おぉ、これは使ってみたい。
でもこんなにわかりやすいボードが自分で作れるだろうか？　とお思いになるかもしれません。

確かに、MotionBoardは機能が豊富ゆえに、少々作成に難しいところがあります。
しかし要領を覚えてしまえば、作成スピードははるかに増します。

今回はその中でも特徴的な、積み上げ縦棒による予実対比グラフについて解説をします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d234772c-6aaa-1d6a-a975-53b1f5629b39.png" width=15%>


#全体の流れ
今回の流れは大きくわけて、３つとなります。

１.このグラフの見方の解説
２.このグラフはどのようなデータで構成されているのか
３.どうやってグラフを作ればいいのか

さっそく見ていきましょう。


##１.このグラフの見方の解説
###予実対比の表現のしかた
営業さんですと、予算と実績、それらの達成率を出す表は作ったりしますよね。
一番シンプルなのはこんな表です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/37c603b8-842c-28ad-c9a2-461e43f6a099.png" width=40%>


ここに案件の見込みの状況が入りますと、このような表現になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/42b309e4-ac54-0f9f-0e64-aafdafb5edbe.png" width=80%>


見込みのデータはSFAシステムからとってくるような、ひとつひとつの営業さんの商談を受注できそうな確度（A、B、C）で表しています。


集計表ですとこの見え方が限界かと思います。
アラートをつけて達成率の低いところをチカチカさせることはできても、なかなか直感的とは言い難い。。。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d234772c-6aaa-1d6a-a975-53b1f5629b39.png" width=15%>
でもこちらのグラフですと目標に対しての積み上げが一目でわかりますよね。
こちらを支店ごとに並べてもいいですし、フィルター（全体検索）をつけて支店を選択するようにしても良いです。

このグラフの素晴らしいところは**画面スペースをとらない**ところです。
小さな区画の中で大きな役割を担えるので、とても重宝しています。




こちらはMotionBoardの中では「積み上げコンボ」と言われるものでして、折れ線と積み上げ縦棒を同時に表現するときに使います。

[積み上げコンボのマニュアル解説](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-6f7d69e3-981c-a2e4-d3ca-c8bd966ac562.html#UUID-6f7d69e3-981c-a2e4-d3ca-c8bd966ac562_d38915e23022)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/dc9d268f-b32e-0878-f125-39211082b5b2.png" width=50%>


ただし、今回は折れ線を使いません！
実は積み上げコンボは様々な機能を持っていて、その中で特殊な使い方をしているのですね。




##２.このグラフはどのようなデータで構成されているのか


さて、今のチャートを表現するために使用したデータは下記の３つとなります。
　実績（売上）
　見込み（商談）
　目標（予算）

SFAの確定のデータを使えば、実績と見込みがひとつのデータとしてとれると思いますが、今回は分けて考えます。

３つのデータはこのような項目を持っています。
（銀行のSFAデータをイメージしています）

**実績（売上）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4a92a041-f787-ba2b-f2c2-85daa14bb41a.png" width=110%>

**見込み（商談）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/a283d40e-4f24-c5a1-17a6-283285fa45f3.png" width=60%>

**目標（予算）**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/eba20326-12a3-1af4-6ea8-503080b63427.png" width=60%>

最低限必要な要素としては
　①日付項目はあるか（年月・年月日がバラバラでもOK）
　②行員コード（営業担当者コード）があるか
という点になります。

行員コードがあれば、行員マスタから行員名称がとってくることができ、さらに付随する支店コードもとってこれるでしょう。
さらに支店マスタから支店名もとってこれるはずです。
つまり３つのデータソースの中で行員コードさえあれば、行員名や支店名で３つとも集計し、ひとつのグラフで表現することが可能です。
年月についても同様で、目標は年月日でデータを持たないので、実績（売上）と見込み（商談）に年月日があれば、
MotionBoard内で年月の項目を作り、そちらを使用することができます。

集計ができるということは、全体検索がかけられますので、グラフの使用価値がどんどんと増しますね。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/0a1f9229-19c8-0532-73fb-158b794ac62c.png" width=25%>


さて、この３つのデータですが、先ほどのグラフを作るためには、MotionBoard上で多少なりデータをこねくりまわす必要があります。
今回はカスタム項目と結合データソースを使って加工をしていきたいと思います。

##３.どうやってグラフを作ればいいのか
MotionBoard、というかBIシステムの構築の中で、かなり重要な要素を占めるのが、このデータ加工要素です。
グラフで表現するために、いかにデータを加工するかが肝となります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d234772c-6aaa-1d6a-a975-53b1f5629b39.png" width=15%>
今回のグラフですと、"実績"となる実績(売上)データと、確度の入っている見込み(商談)データはひとつの棒グラフの中に入っていて、
目標となる背景の紫については目標(予算)データです。


実績(売上)、見込み(商談）、目標(予算）のデータをそれぞれ読み込み、加工をして、結合データソースでがっちゃんこします。

まずは加工内容の整理です。

|重要度  |項目  |技法  |加工対象のデータソース  |
|---|---|---|---|
|**必須**  |確度  |カスタム項目  |実績(売上)、目標(予算)|
|あったら便利  |年月  |カスタム項目  |実績(売上)、見込み(商談)|
|あったら便利  |支店名  |マスター項目  |目標(予算)|

あったら便利のところはすべてのデータソースで年月、支店名があれば全体検索が使えるので、用意しておくと便利です。
今回は必須の確度だけ作りましょう。

今回のデータは複雑なExcel読み込み設定は必要ありません。
目標(予算)をクロス列で読み込むくらいです。
そのやり方やもっと複雑な読み込み設定についてはこちらをご参照ください。
[MotionBoardのExcel読み込み機能を使おう](https://qiita.com/Ryo---san/items/15fb18f1a77975250bc0)

結合データソースはこのような形になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/64648bee-4c1b-57a5-cbdb-5b1a1f4cd8a0.png" width=40%>

|データソース  |読み込むデータ  |
|---|---|
|DS1  |実績(売上)  |
|DS2  |目標(予算)  |
|DS3  |見込み(商談)  |

３つのデータを実績、A、B、C、目標とわけて金額を表示するためには、
結合データソースで共通となる項目"確度"を用意してあげなければいけません。

DS1とDS2には確度がありませんので、カスタム項目で用意をしてあげましょう。
データソースエディタ画面の左下にある「追加項目作成」より、カスタム項目を選びます。
まずは実績(売上)に確度を作りたいので、作成するデータソースはDS1を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/3ef4da27-34ea-e9f7-997e-f1c493c621ee.png" width=40%>

項目名を"確度"として、計算式のところに 実績 と入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2e950643-3a8b-0638-0dfe-e9ee9ae9d22f.png" width=40%>

そうするとDS1に新しい項目が追加され、その中身のデータは全て"実績"という文字列が入ることになります。

同じことをDS2の"目標"にも行います。
目標のデータは年月が横に伸びています。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/eba20326-12a3-1af4-6ea8-503080b63427.png" width=60%>

BI的には"年月"という項目があって、縦にデータが入ってもらいたいので、Excel読み込み設定で、クロス列を指定します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/f63be7e1-f0cb-3f74-9c8d-25905d8b80f4.png" width=40%>
[クロス列についてのマニュアルはこちら](https://cs.wingarc.com/manual/mb/6.1/ja/UUID-867933b2-dd6a-9f78-edaa-fefceda55a39.html#UUID-867933b2-dd6a-9f78-edaa-fefceda55a39_d38915e143369)

データソースエディタ画面の左下にある「追加項目作成」より、カスタム項目を選びます。
目標(予算）に確度を作りたいので、作成するデータソースはDS1を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/62bc71cd-b661-22f0-2805-af5df4830d42.png" width=40%>


項目名を"確度"として、計算式のところに 目標 と入力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/b5ec2a57-32a0-1ab5-786a-22912fec95b4.png" width=40%>

こうすると確度がDS1,DS2,DS3に作れましたので、結合データソースで項目として使用することができます。
また、集計項目には"金額"をセットします。
DS1,DS2,DS3で数値項目の名称が金額となっていない場合は、別名をつけてあげて、統一をしましょう。
そして、画面下にある「DS2以降にDS1と同じ名前の集計項目があれば合計する」にチェックを入れて、
おすすめチャートから**おすすめされていませんが**積み上げコンボを選択すると、確度毎に金額が積み上がったグラフができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/fbf07732-0ea3-48ad-e87a-3e5ded747b2e.png" width=40%>

あとはグラフの並び順を変更しましょう。
グラフの下から、実績→A→B→C　となるようにします。

列項目に置いた"確度"の項目の鉛筆アイコンで編集を開き、ソートの「カスタム設定」をクリック
実績
A
B
C
と並べましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/3cabea0e-2825-f4de-029e-fda4061a7eb8.png" width=40%>

そして、チャートとしてボード内に表示をさせて、"目標"の場所で右クリックして「列スタイルを変更する」を選び、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/4d53af4a-7d69-0e80-6011-b9bb23aa03ff.png" width=40%>

「列を背景塗りにする」にして、OKボタンをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2a63d6e6-5c0e-40bd-36c3-fce1f6f06cec.png" width=20%>

これでようやくこのグラフができたかと思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/d234772c-6aaa-1d6a-a975-53b1f5629b39.png" width=15%>

あとは色合いを決めるカラー設定とデータラベルの初期表示を「凡例のみ表示」として、
凡例の表示フォーマットを「項目全階層昇順」とすればOKです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/e9961f1b-8567-a889-485d-fabeddf4a335.png" width=20%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/001f247f-3c58-cde4-8f75-236badeb4db0.png" width=20%>


いかがでしょう、目指すチャートは完成しましたでしょうか？
MotionBoardのおもしろいところは、チャートの使い方ひとつひとつが自分のアイディア次第となるところです。
公式の使い方とはちょっと違う、でもすごくわかりやすい表現というものはまだまだたくさんあると思います。
こちらの木戸しぃさぁさんのNoteはまさにその最たる例だと思います。
[【MotionBoard】バブル図をバブル図っぽくなく使ってみた話。](https://note.com/shiisaa/n/nee7fe2d3fa34)



長い記事となってしまいましたが、ぜひMotionBoardのチャート表現を使いこなしてみてください。