Motionboardの散布図でCCPMのフィーバーチャートっぽいやつを作る

## はじめに
プロジェクト管理手法「CCPM（Critical Chain Project Management）」によく出てくる、「進捗率」と「バッファ消化率」を軸にとって、その日その日の「プロジェクトの状態」を時系列でプロットした図です。

このチャート自体は、管理層からは「イイねぇ！わかりやすいじゃん！」と評判がいいです。
このチャートの読み解き方というか、捉え方には、なかなか相当なコツというか訓練がいると思いますし、
えらい人がそのへんを理解したうえで「イイ」と言っているのかどうなのかはよくわかりませんが、
ともかく、"それっぽい感じのチャート"をMotionboardで書いてみようと思います。

で、Motionboardの「散布図」を使って書くのですが、
往々にしてMotionboardのチャートプロパティは使ってみないと分からない感満載なので、
例によって、スクショもりもりで自分用のメモがってら記述していきますので、暇な方はお付き合いください。


## フィーバーチャートの見た目
こんなやつです。詳細は各自調べてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/24b5373e-dacc-f2fd-35f9-7e6f4b783330.png)

## 完成形
こうなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/bd6868fa-d888-e69c-d6e4-f3c896cb5a2e.png)

## 解説
### サンプルデータの準備
とりあえずサンプルデータとして、日付、進捗率、バッファ消化率をもつ適当なデータを準備します。
テキストエディタでCSVなどにして保存し、あとでボード専用textとしてアップロードしてデータソース定義に使います。

```
#フィーバーチャートサンプルデータ
日付	進捗率	バッファ消化率
1	0.0 	0.0 
2	6.7 	0.5 
3	12.1 	4.0 
4	16.6 	13.6 
5	27.5 	8.2 
6	29.0 	16.9 
7	36.6 	17.6 
8	37.1 	29.0 
9	39.5 	31.5 
10	42.1 	29.8 
11	46.6 	32.3 
12	48.9 	36.5 
13	49.0 	44.7 
14	50.1 	50.6 
15	53.0 	60.0 
16	57.4 	54.1 
17	60.5 	60.3 
18	63.8 	58.6 
19	66.8 	64.5 
20	68.7 	71.0 
21	69.5 	89.1 
22	74.2 	80.4 
23	78.4 	93.5 
24	82.9 	96.0 
25	87.6 	92.8 
26	94.1 	93.1 
27	97.8 	97.3 
28	100.0 	100.0 
```

### 背景画像の準備
それっぽい背景画像を作ります。私はパワポで図形を組合せて画像で保存しました。
CCPMでの背景の赤黄青の傾きなどは経験的に定めるものであり、目安がある物でもないようです。ビーイングのBM3でも確か傾きは自由に設定するものだったはずです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1213bdb7-4f36-d86d-73af-e0889d0797e2.png)

### サンプルデータの取り込み
先ほど作成したサンプルデータをCSVアップロードして、データソース定義を作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/516f4e07-9904-8129-0dd5-f95b457a554d.png)
文字化けしたりうまく読めないときは、読込設定で文字コードと区切り文字を確認しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c97cb4a9-4cf1-cb36-c64a-f05ab7bfe97f.png)

### データソース定義の作成
このように設定してください。
デフォルトの散布図は、集計項目で集計された値を、それぞれX軸Y軸の値と判断して描画します。
したがって、それぞれ「バッファ消化率」と「進捗率」を集計項目に置きます。
集計項目の順番で、1番目をY軸、2番目をX軸として解釈するので、その順番に配置します。
チャートの設定で逆転させることもできはしますが、データソース定義で先に設定しといたほうがいいでしょう。
（肌感覚的には1番目がX軸な印象でしたが、Motionboardはそうではないようですね。）
ちなみに遷移矢印の順番は「行」に入れた値をソートして使うようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/d000207b-1fc3-efcb-f2a1-f91b584ba615.png)


ちなみに、おすすめチャートから散布図を選択すると、既にそれっぽいチャートが描画できているのがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/0c3a98c0-c7a0-f47d-719d-6887b64de8c7.png)


### チャートエディタ諸々の設定
まずデフォルトでこの状態になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c7decbc5-6303-62fd-1eca-c29916da15cf.png)


「アイテムプロパティ」凡例表示を非表示にしておいて
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/2bbf23f2-57f7-8718-d74c-7bcbce3d57ec.png)

チャートエディタでまずは「散布図・バブル設定>全般」の設定にて、
「遷移矢印を表示する」にチェックをいれて、矢印の大きさを調整します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/aaacca62-10c4-9a2d-575e-71e98bc566fe.png)


つぎに、「散布図・バブル全般>散布図」の設定にて、一番下の項目に「一点の大きさ」があるので、適当に設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/37cc5107-7399-4c0f-abc1-c23bfa9eb336.png)


「共通設定>全般」で、見づらい影を消しておきましょう
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/18c49004-7ca8-44e8-5090-e3bd1bb5f3a2.png)

「共通設定>背景」で、CCPMっぽい背景画像を指定します。背景の種類を画像にして、先程作成した背景画像をアップロードして指定します。
ちなみにスケールマーカーはうまくいきませんでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/e1294152-1067-be13-5ccd-4de57b63226f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c2530bdf-aa27-21b1-dd54-961b5eef2ccb.png)

「共通設定>軸」か、チャートメニューから、軸の設定をしておきましょう。
どっちからでも設定はできますが、若干ダイアログが異なっており、チャート側からいったほうが設定がラクです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/1f0c511d-15e7-2594-f2c5-eb74e706832d.png)

軸の固定を「入力した最小最大値で固定する」にして、適当に設定します。
目盛りも適当に設定します。バッファ消化率と進捗率のどちらも設定しておきます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/2e65157c-bf6f-efe4-e669-839761b1263e.png)

それっぽい色にして
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/2021d9d0-9c0d-2a19-3ece-e8f06edb94f6.png)

できました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/59384c20-4f88-5dde-8e27-c26828a04b45.png)



## 失敗例
ちなみに、このように、「行項目に進捗率、列項目にバッファ消化率、集計項目に日付」というようなデータソースにして、
チャートエディタの散布図・バブル設定>全般の「X軸Y軸の設定」を「X軸に行、Y軸に列を設定」にすると、
軸が数値軸にならず、等間隔にラベル付けされてしまいますし、そもそも遷移矢印が書けませんので失敗します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c39bdc91-f7db-c0a5-f068-9b38d0c04d0c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/0ae5f39d-366d-45a2-3c6f-02c20201cbca.png)

## 複数のプロジェクトの進捗を見る場合
プロジェクト番号みたいなデータを追加して、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/bf5ac7eb-933f-69da-00c2-45d18f8fa809.png)
これを列項目に追加しますと、もうひとつデータができます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/c464b498-64ab-7326-4b21-bee3c172ddf8.png)
実際だとこんな感じに線が重なって描画されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/e76c7531-739d-d010-926a-b397d264bc33.png)

チャートの分割をすれば
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/864b91fb-5743-fdac-02a7-b04eeb3678cc.png)
ならべて表示することもできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/507249/4f90d662-780c-86b3-681e-ceb1955b0948.png)



## おわりに
フィーバーチャートっぽいチャートを作ることができました。
そもそも、こういうデータをどう作り上げるかが難関な気もしますし、
このフィーバーチャートをどう活用するか次第な気もしますが、
一応できますよっていうことで、ご参考になれば幸いです。