1
2

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でわかりやすい差分比較のグラフをつくってみた

Last updated at Posted at 2021-03-11

最初に

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



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

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

今回はこちらのグラフについてグラフを紹介します。
image.png

わかりやすい時系列推移グラフについて

時系列推移をみたいときのグラフは、ある程度形が決まっているものです。
image.png

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

この集計項目の数が多すぎてはいけません。
image.png
上の図は集計項目が5個あります。こうなると時系列の推移が見にくくなってしまいます。

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

それでもたくさんの情報をグラフに載せたい

MotionBoardはアクションボタンを用意すると、集計軸を自在に切り替えることができます。
yoqfx-9xawz.gif

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

それが冒頭のこちらのグラフです。
image.png

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

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

1.事後計算項目で差分の判定をする

今回のグラフの大きなポイントは差分フラグをつくることです。
実績 - 予算 が正のときは2、負のときは1というフラグを作ります。

作り方事後計算項目でif文を書きます。
そう、事後計算項目でif文が書けるのです。

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

こうすると差分FLGには1か2という数字が返ってくることになります。
グラフで見るとこんな感じです。
image.png
※チャートは折れ線縦棒コンボを選択しましょう

2.差分FLGを背景塗りにする

次はこの差分FLGの棒グラフになっているところを右クリックして、「列スタイルを変更する」を選択します。
image.png

「列を背景塗りにする」を選択し、「カラー設定」をクリックします。

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

(ここちょっと設定が独特で難しいのですが)
対象集計項目名:差分FLG
集計値:1
色:白
とします。
image.png

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

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

image.png

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

そうするとぼくのグラフはこんな感じになりました。
image.png

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

3.差分FLGの軸を設定する

今はわかりやすいように、グラフの中に集計値を表示させています。(データラベルといいます)

これを見ると1と2は当然高さが違うので、ちょっと変な感じです。
差分FLGが1のとき(実績より予算が高い場合)も同じ高さにしましょう。
image.png

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

設定してみましょう。
チャート編集から「共通設定>軸」を選び、「最大値、最小値、単位」のギアマークをクリックします。

集計項目:差分FLG に対して、軸を固定します。
「入力した最小/最大値で固定する」を
最小:0
最大:1
とします。
image.png

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

こうすると背景塗りの最大値が1となり、見た目がすっきりします。
image.png

あとはデータラベルをなくしたり、予算と実績の色を変えればOK。

このように、各月が達成しているかいないかがひとめでわかるグラフができました。
image.png

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

1
2
1

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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?