MotionBoardでif文を書こう〜今のグラフをさらに見やすく美しく〜


最初に

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



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

【MotionBoardとは】

様々なデータソースからデータをあつめ、1つの画面上で統合するMotionBoard。
クラウドサービスとの接続もでき、チャットツール送信もできるのでとてもおもしろいです。

※キャプチャはウイングアーク1st社のホームページより抜粋
ウイングアーク1st株式会社 MotionBoard

みなさんはMotionBoardの中でif文が書けることを知っていますか?

if (Self([実績]) == 0){
 return Number.NaN;
} else {
 return Self([累計実績]);
}

上のコードはMotionBoardの中で書いたコードです。
内容は
「"実績"という項目が0のときはNaNを入れて、0以外のときは"累計実績"という項目を入れてね」
という意味になります。

MotionBoardはGUI操作がボード構築の中心になりますが、こういったコードを書くところもあります。
自在なデータ加工が実現できるのです。

今回はこのif文をどこで書いて、下図のグラフをつくっていきます

全体の流れ

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

1.今回のやりたいことの確認
2.事後計算スクリプト(if文)を用意する

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

1.今回のやりたいことの確認


こちらは加工をしていないデータをそのままグラフ化したものです。

元のデータはこちら。

予算は未来の数字まで登録されていますが、実績については現在進行形になるので、空白になっているところがあります。
これをそのままグラフ化して、予実対比をしてみると、

黄色い線のように横ばいの点が出てしまいます。
まだ実績が出ていないところなので、この線・・・消したくないですか?

ちなみにグラフは累計の数字となっています。
まず行項目に「年月」を置きます。

累計表示のやり方についてはこちらです。

データソースエディタから「追加項目作成」を選び、「事後計算項目」を選択します。

赤枠の入力補助から「予算」の項目を「累計(行)」関数を使って「計算式に挿入」を選択します。

行項目に「年月」を置いているので、累計(行)を選択するのですね。

これで累計のグラフが表示できます。

予算はこの累計でOKです。
実績については同じように作ると

こうなります。
実績が横ばいになるグラフが出るかと思います。
なので実績については「実績 = 0 のときは表示しないよ」という宣言が必要になります。

いよいよif文の登場です。

2.事後計算スクリプト(if文)を用意する

さぁやってきました、今回のメインです。

データソースエディタから「追加項目作成」を選び、「事後計算項目」を選択します。

if (Self([実績]) == 0){
 return Number.NaN;
} else {
 return Self([累計実績]);
}

ここはスミマセン、入力補助がなく、手書きしなければなりません。

プログラム初心者の方にちょっと解説をすると
returnは入れる値です。
つまり
・実績が0のとき、NaN(なにもいれない)を入れる
・実績が0以外のとき、累計した実績を入れる

とします。NaNを入れると折れ線グラフにポイントが出ないのですね。

操作は以上で終了です。

このような形でif文を書くことができるのですが、あまり複雑なものを書きすぎると、描画レスポンスが悪くなるので、注意が必要です。

おわりに

完成図を見てみましょう。

黄色の実績は数字が入っていないところはグラフから出なくなりました。
これで毎月実績が入ると、黄色のグラフはどんどん伸びるグラフの完成です。

いかがだったでしょうか?
MotionBoardつくりの参考になりましたら幸いです。