2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MotionBoardのレイヤーチャートを極めてみる

Posted at

最初に

MotionBoardは綺麗でわかりやすいグラフや画面を作ることができます。



綺麗な上に、動いたりもします。
気になる人は下記リンクをクリックしてください。体験デモもできます。
MotionBoard 体験デモについて(公式HPより)

【MotionBoardとは】
様々なデータソースからデータをあつめ、1つの画面上で統合するMotionBoard。 クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。 ※キャプチャはウイングアーク1st社のホームページより抜粋 [ウイングアーク1st株式会社 MotionBoard](https://www.wingarc.com/product/motionboard/index.html)

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

今回のお題はこちらのレイヤーチャートの重ね合わせです。

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

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

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

全体の流れ

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

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

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

1.このグラフの見方の解説

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

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

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

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

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

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

実績(売上)

見込み(商談)

目標(予算)

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

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

集計ができるということは、全体検索がかけられますので、グラフの使用価値がどんどんと増しますね。

3.どうやってグラフを作ればいいのか

レイヤーチャートの重ね合わせは簡単です。
なぜなら3つの独立したチャートを作り、重ね合わせればいいだけだからです。

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

①今期の実績+見込みの年月推移チャート(積み上げコンボ)

いきなりちょっと難しいですね。
実績(売上)と見込み(商談)を積み上げるために、データを加工する必要があります。
たぶんこの作業が今回の中で一番難しいです。
実績(売上)と見込み(商談)をひとつのグラフで表現するために、今回はMotionBoard Viewを使用します。
MotionBoard Viewの詳細の設定はここでは省きます。

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

大事なのは、今回は確度(実績、A、B、C、D)という項目を使いたいのですが、実績(売上)にはそのような項目がないので、
実績(売上)に対して、カスタム項目で"確度"という項目を作り「実績」とベタ打ちする必要があるくらいです。

データソースはこのような形になります。

事後計算で累計額を出していますが、計算式は非表示にしている"購入額(1)"にしています。
ボタン切り替えで累計額を出す際に、通常の購入額は"無効"扱いとなるので、事後計算ができなくなるんですね。
こちらは他のデータソースにも共通して、仕込みましょう。

あとはチャート全体をうっすら透明にしたり、データラベルを表示させたりをしておきます。

②先期の実績+見込みの年月推移チャート(積み上げエリア)

こちらは基本的に上記と変わりありません。
先期の表示となりますので、データソースの検索を1年前にして、チャートを積み上げエリアに変えるだけです。
このチャートは先期の情報なので、あくまで参考情報です。
なのでチャートの不透明度は0.1くらいにしてしまいましょう。

③目標の年月推移チャート(折れ線)

こちらはシンプルな棒グラフを出すだけです。

レイヤーチャートを重ね合わせる

さて、3つのグラフを作りましたので、重ね合わせましょう。
レイヤーチャートの重ね合わせはひとつをメインチャートとして、あとふたつをサブチャートとします。
今回のメインチャートはもちろん ①今期の実績+見込みの年月推移チャート(積み上げコンボ) です。
プロパティからチャートメニューが表示になっていることを確認して、「レイヤーチャート編集」をクリック

ドラッグ&ドロップをして、他の2つのチャートを載せて、「閉じる」をクリック

綺麗に重ねられたら完成です。

単月・累計ボタンを作る

最後に、単月・累計を切り替えるボタンを用意しましょう。
データソースの"累計"を無効にしていると思うので、こちらを有効にして、単月の項目を無効に切り替えるアクションボタンをセットします。

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

さて、できました。
動作確認をしてみましょう。

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

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

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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?