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>


こんなオシャレなボードをいきなり作るのはちょっと難しいです。
なのでひとつずつの機能を紐解いて解説をしていきたいと思います。

今回のお題はこちらの**レイヤーチャートの重ね合わせ**です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/10f992f4-2bb1-f7b0-8b81-6909ac17208c.png" width=60%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ce2a1eba-d16e-0990-020a-03098ce4150d.png" width=60%>

このチャートは、３つのグラフを重ね合わせしています。
今期実績・見込み・目標の年月推移、そして前年の実績・見込みの年月推移が一目でわかるチャートです。
情報が多いのに、わかりやすい、**欲張りセットなチャートです。**

レイヤーチャートは年月推移のように同じ時間軸を表現したチャートを重ね合わせることができます。
取得するデータが全然違っていても、年月のように共通する項目があれば、重ね合わせられるのでとても便利です。

このチャートの作り方を解説してまいります。


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

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

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



##１.このグラフの見方の解説
これはもうさっき言っちゃいましたね。正直これ以上に補足情報のない、シンプルなチャートです。
＞今期実績・見込み・目標の年月推移、そして前年の実績・見込みの年月推移が一目でわかるチャートです。
営業さんが見たい情報がギュッと詰まった感じですね。


レイヤーチャートの重ね合わせはシンプルです。
３つのチャートを作って重ねればOKです。
ひとつずつのチャートを紐解いていきましょう。

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


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

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%>


##３.どうやってグラフを作ればいいのか
レイヤーチャートの重ね合わせは簡単です。
なぜなら**３つの独立したチャートを作り、重ね合わせればいいだけ**だからです。

そんな訳で、グラフを３つ作ってみましょう。
共通して設定をする点として、今回は単月と累積のボタン切り替えをします。
時系列推移は単月と累計の両方がみたいと思いますので、その設定も合わせて入れていきましょう。


###①今期の実績＋見込みの年月推移チャート（積み上げコンボ）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/2d0d5a7e-3af2-07e4-44e2-40a53dcb41b6.png" width=60%>

いきなりちょっと難しいですね。
実績（売上）と見込み（商談）を積み上げるために、データを加工する必要があります。
たぶんこの作業が今回の中で一番難しいです。
実績（売上）と見込み（商談）をひとつのグラフで表現するために、今回はMotionBoard Viewを使用します。
MotionBoard Viewの詳細の設定はここでは省きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/349f34c3-ab2b-65fc-35cc-b1e95f776a5b.png" width=60%>

同一の項目だけで縦結合（Union）しています。
チャートで使う項目は少しなので、Unionの設定もしやすいです。

大事なのは、今回は確度（実績、A、B、C、D）という項目を使いたいのですが、実績（売上）にはそのような項目がないので、
実績（売上）に対して、カスタム項目で"確度"という項目を作り「実績」とベタ打ちする必要があるくらいです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/380f92d2-555e-fb5f-adfc-3484a1b54984.png" width=60%>


データソースはこのような形になります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1453484f-808b-9e13-34e8-3c37be6d515e.png" width=60%>
事後計算で累計額を出していますが、計算式は非表示にしている"購入額(1)"にしています。
ボタン切り替えで累計額を出す際に、通常の購入額は"無効"扱いとなるので、事後計算ができなくなるんですね。
こちらは他のデータソースにも共通して、仕込みましょう。

あとはチャート全体をうっすら透明にしたり、データラベルを表示させたりをしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/187f2af9-5af5-2b3e-be0f-78d739ee42b6.png" width=30%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/11e55040-df45-7477-3d56-3f257af81204.png" width=30%>


###②先期の実績＋見込みの年月推移チャート（積み上げエリア）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/bdb3e619-488a-da6e-91a1-2e1fca3ca123.png" width=60%>

こちらは基本的に上記と変わりありません。
先期の表示となりますので、データソースの検索を1年前にして、チャートを積み上げエリアに変えるだけです。
このチャートは先期の情報なので、あくまで参考情報です。
なのでチャートの不透明度は0.1くらいにしてしまいましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/6ee54f30-414c-8438-39af-350954a84e80.png" width=30%>


###③目標の年月推移チャート（折れ線）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/40c30fdb-ee25-4884-aa33-c9a014b8f4a3.png" width=60%>

こちらはシンプルな棒グラフを出すだけです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1201237a-455a-2ab7-7ff3-c9086505548d.png" width=60%>




###レイヤーチャートを重ね合わせる
さて、３つのグラフを作りましたので、重ね合わせましょう。
レイヤーチャートの重ね合わせはひとつをメインチャートとして、あとふたつをサブチャートとします。
今回のメインチャートはもちろん ①今期の実績＋見込みの年月推移チャート（積み上げコンボ） です。
プロパティからチャートメニューが表示になっていることを確認して、「レイヤーチャート編集」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/658162ea-ef28-9077-cb20-0a1f517813b4.png" width=60%>

ドラッグ＆ドロップをして、他の２つのチャートを載せて、「閉じる」をクリック
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/ab7d33ac-447e-9ca7-49e0-0169291d708d.png" width=60%>

綺麗に重ねられたら完成です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/1cafb0ff-d7ec-0382-2585-e07791b8ef57.png" width=60%>


###単月・累計ボタンを作る
最後に、単月・累計を切り替えるボタンを用意しましょう。
データソースの"累計"を無効にしていると思うので、こちらを有効にして、単月の項目を無効に切り替えるアクションボタンをセットします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/95274e41-8e8b-f05c-6339-3303ebc6271d.png" width=60%>

画面キャプチャは図形の色を変えたり、ボード下にある集計表も切り替えたりしていますが、
最低限必要なのは、"項目変更"が3つで、それぞれのデータソースに対して、単月と累計を切り替える処理をいれます。

さて、できました。
動作確認をしてみましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/657414/78f8b0b8-01a3-6551-df9b-c13d9f85acef.gif" width=60%>

綺麗に単月と累計の切り替えができ、３つのチャートをひとつにあわせることができました。

いかがでしたでしょうか？
レイヤーチャートはMotionBoardの得意技とする、様々なデータソースをひとつのボードネイで可視化するために
よく使う機能となります。

ぜひ活用してみてください。