【kintone】人毎、時系列の棒グラフを描く

こんにちは！

今回は前回作成したアプリの、「分類する項目」の大項目、中項目、小項目を設定して、人ごとの時系列の棒グラフ作り実況？をしたいと思います。


前回：[【kintone】表とグラフの「集計方法」の設定](https://qiita.com/juri_don/items/623e6f6bf86a554b94a2)

# 分類する項目

前回までは「分類する項目」には「大項目」しか設定していませんでした。

大項目の下のプラスボタンで、中項目、小項目まで追加することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/a12c2589-856a-3293-5be6-66a2535562d3.png)

##　中項目を設定する
今回のテーマは**「人毎（ごと）」の「時系列」の棒グラフを作りたい**です。

まずは表で考えます。もともとの表の設定と表プレビューは以下のとおり。
これを時系列の棒グラフに書き換えるのが最終目標です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/1f152245-97a7-ea94-9125-802e94eb98a6.png)


これに時系列要素を追加するには

**さらに日付で分類する**

とすればよさそうです。
そこで、中項目に「日付」を追加してみました。
すると、表プレビューはこんなことになってしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/69eec87c-4eb8-0e6c-9589-e1ca4ff11287.png)

順番がメチャクチャなので人ごとにも、時系列にも見づらい表になってしまいました。

## 整理された表からグラフをイメージする

グラフをイメージするためには、表のデータが順番に並んでいると嬉しいです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/8927c788-c99c-e395-cf69-32692d6f3c97.png)

まず人毎に分かれて並び、人それぞれに時系列があるというような表です。

次にゴールの姿を思い浮かべましょう・・・。
「人毎（ごと）」の「時系列」のグラフとして、こんな感じのグラフをイメージします。
人毎、年ごとに分類されて時系列並ぶ棒グラフです。（Excelで描きました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/37780721-a916-1cfa-f5b8-62450840f58e.png)

グラフのこの部分が**大項目**と**中項目**を表しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/e9cc0863-c697-aae6-bc48-267d09f8d101.png)


ここにもし小項目を追加すると、
ココに入ることになります。（小項目として四半期を追加してみました）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/f0efbfbc-9661-008b-d85f-ba9f5897a4ed.png)



## 順番に並べる=ソート

もう一度、順番がメチャクチャな表の状態にもどして順番に並べる（ソート）設定をしてみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/69eec87c-4eb8-0e6c-9589-e1ca4ff11287.png)

年単位の時系列で分類したいので
中項目には日付の「年単位」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/de96d310-5308-b219-f5a1-e5cd16f8f378.png)

日付がすべて1月1日になりましたが、まだデータの順番はバラバラです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c84ba90e-b3c4-d46a-d772-3f0960c1d251.png)

ソートの設定を以下のようにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/080d2813-9afb-6eae-86bd-df3cbc3d4091.png)

* 大項目（名前）の昇順（小さい順）
* 中項目（日付）の昇順（小さい順）

という設定をしてからプレビューの表を見ると
名前、日付でスッキリな表になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/5052dc20-e286-5b39-0e5f-e3cf3d7b2d94.png)

# 縦棒グラフの設定
ではここでグラフの種類を変更してみます。
縦棒グラフを選びましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/3ca96488-f913-16b9-a93c-a2ab8c0934b5.png)

すると、グラフも大項目、中項目で分かれ、順番通りに棒グラフが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/9175de7b-04e6-e99c-eb1f-820263e320e7.png)

Excelで作成したグラフと比較するとこんな感じ。似てますね！

| Excel| kintone |
|:-:|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/37780721-a916-1cfa-f5b8-62450840f58e.png)   |  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/9175de7b-04e6-e99c-eb1f-820263e320e7.png) |

## 小項目を追加する

小項目として「日付」の「四半期」を追加してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/c20af4de-c025-f746-fb22-bf9e035992f1.png)

**Excel**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b9e42ffa-325d-2725-00d8-5b68aa8d6284.png)
**kintone** 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/03a45e76-266e-a7ce-4158-62e9135bb99e.png)


なかなかゴチャっとしてしまいますね💦
上手な作り方があったら教えてほしいですが、こんな感じで大、中、小項目まで使用してグラフを作成することができます。

中項目までの設定が見やすいのかもしれません。

## （おまけ）集計方法を増やすと・・・
また、「集計方法」を2つ以上にすると・・・

凡例には「分類する項目」の**最小の項目**が色分けされて表示されていましたが、
集計方法を2つ以上にすると、集計方法が凡例になります。

また、集計方法の、数値が大きい方（この場合は合計）を基準にした目盛りになるため、レコード数が見えなくなってしまっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d8b8c2da-db13-d60b-2408-6ccf96ce65ca.png)

# 完成したグラフ

今回の目標は、**「人毎（ごと）」の「時系列」の棒グラフを作りたい**でした。
完成グラフは、大項目、中項目を設定したこちらの棒グラフということにしたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/229ccb08-271f-31b1-9410-4c31e5388962.png)



# まとめ

今回は人毎の時系列が分かりやすい棒グラフを作りました。

* 時系列の要素を追加するために「日付」を分類する項目に追加
* データの並びを時系列にするためには、日付でソートする
* グラフの凡例は、分類する項目の最小項目になる
* 集計方法を2つ以上にするとグラフの凡例は集計方法になる
 
グラフの設定はこう↓でした

| 設定項目 | 設定値 |
|:-:|:-:|
| グラフの種類  | 縦棒グラフ  |
| 分類する項目　大  | 名前  |
| 分類する項目　中| 日付（年）  |
| 集計方法  | 合計（使ったお金）  |
|ソート 1| 大項目　昇順|
|ソート 2| 中項目　昇順|

是非練習してみてくださいね👀！

# 次回は折れ線グラフ
時系列なら折れ線グラフのほうが分かりやすいのでは？
と思うかもしれません。

ここでそのまま折れ線グラフにしてしまうと
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/37dedc89-61aa-99f2-1e81-caa0b5ecbcb4.png)

↓こんなグラフになってしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/51efd885-049b-aaf6-a032-f8c128b32625.png)

ほしいグラフはどちらかと言うと、人毎に時系列が分かりやすい、こちらのグラフです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/d717b66e-46fd-3184-96f7-bc264ba0fd6f.png)

人毎に、日付の年毎に仲間分けをしたのにどうして・・・涙

というわけで、次回は、仲間分け方法を工夫しながら、折れ線グラフ作ってみたいと思います！