Reveal - グラフ選択のチートシート



# はじめに

## Revealとは
[Reveal  ダッシュボードをアプリケーションに組み込み](https://www.revealbi.io/jp)
> Reveal Embeddedは、アプリケーションに組み込み可能なデータ可視化SDKです。シンプルな価格体系、組み込みの容易さでアプリケーションの価値を最大限向上することができます。

## この記事は
Revealは30以上のグラフが選択出来ますが(2019/12現在)
非常に種類が豊富なため、それぞれどんな項目を設定すれば表示できるのか？
設定例を交えたチートシートを作りました！

# グリッド
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/37fab6db-8170-ddc0-fec4-7e4a9433d024.png)


## グリッド

グリッドは、行と列のレイアウトでデータを表示します
Excelのように行、列でデータを表示したい場合にもよく利用されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/725deabc-f446-bf18-091f-8dbb501f7228.png)


### 設定例
- "列"に表示したい項目を設定

## ピボット

対象集計データは第2のテーブルに表示され、自動的に表内格納データの並替、合計値、平均値、総数、標準偏差が出力できるほか、クロス集計が利用できる。
(出典:[Wikipedia ピボットテーブル](https://ja.wikipedia.org/wiki/%E3%83%94%E3%83%9C%E3%83%83%E3%83%88%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB))

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3714b133-6805-5e03-d6bf-4762c991c299.png)

### 設定例
- "行"に商品別、"値"に売上金額を設定して、商品毎の売上金額の合計を表示


# カテゴリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/c847f02b-11e4-f954-9197-b221cd611282.png)


## 柱状

柱状シリーズは複数の項目を比較や、時間毎のデータの変化を可視化する際に利用できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3dd95f53-0af3-1901-1c80-2f39016c0712.png)

### 設定例
 - "ラベル"に商品名、"値"に売上金額を設定して、商品別の売上金額を表示


## 棒
棒状シリーズは複数の項目を比較や、時間毎のデータの変化を可視化する際に利用できる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/d6c7a55b-95d1-4322-cc0f-7d83c35c5420.png)

### 設定例
 - "ラベル"に商品名、"値"に売上金額を設定して、商品別の売上金額を表示

## 円
各項目の全体に対する割合を可視化することができる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3fcbe5fe-5be1-baf1-be4a-bc710d816541.png)

### 設定例
 - "ラベル"に商品名、"値"に売上金額を設定して、合計売上金額に対する商品別の割合を表示

## ドーナツ
各項目の全体に対する割合を可視化することができる。
※円グラフとの異なるのは、ドーナツのように真ん中が空洞になっている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/12eaa627-3b95-86ee-67d6-deb3afd5f228.png)

### 設定例

 - "ラベル"に商品名、"値"に売上金額を設定して、合計売上金額に対する商品別の割合を表示



## ファンネル

ファンネル チャートは、ファンネル図形の単一シリーズでデータを表示するチャートです。セクションを複数含むことが可能で、データ全体に対する割合が一目で分かる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3d8a0329-272a-6d98-7262-7342b23fe799.png)

### 設定例

 - "ラベル"に商品名、"値"に売上金額を設定して、売上金額が高い順に可視化

## 複合

2つの値の関連性を複合し、一目で把握できるグラフを作成できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/bc6314c2-cf9c-28ab-6188-ea7ee6c5fff6.png)


### 設定例

- "ラベル"に仕入日、"チャート1"に仕入額、"チャート2"に材料廃棄率


## 積層型柱状

特定の項目の積層(累積)でデータを可視化したい場合に利用。
X軸(ラベル)には、日付が設定されることが多く、古い日付から新しい日付の比較に使われる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/2a824eb8-0822-7e4f-0a34-24acb60c2ab8.png)

### 設定例

- "ラベル"に仕入日、"値"に材料視医学、"カテゴリ"に曜日


## 積層型棒

棒タイプの積層グラフ。
総コストに対しての内訳を分かりやすく可視化し、
日付(Y軸)や数値(X軸)で可視化する場合に利用する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/3f476845-1199-30cc-0de3-0852400f1c51.png)

### 設定例

- "ラベル"に仕入日、"値"に材料仕入額、販管費を設定


## 積層型エリア

積層で指定した項目の割合を表示する際に利用。
総コストのうち、各内訳の項目を設定することで割合を可視化する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/7defd6e9-1b1d-e195-3046-02b4f2bd88f9.png)

### 設定例
- "ラベル"に仕入日、"値"に材料仕入額、販管費を設定


## エリア
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/68f1a753-d893-5009-0288-d9faac7ac4c5.png)


### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額、販管費

## 折れ線
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/88cf70ac-71be-2d25-23c0-1013440b38c6.png)

### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額


## ステップエリア

階段をステップしているかのように、段差があるチャート。
一定期間の数値の変化を表示する場合に便利。ステップ エリア グラフの X（水平）軸は一定期間を示す。
銀行残高や抵当利息など、定期的または不定期で変化する数字をプロットする場合に役立つ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/e34ad1c2-c0b6-641c-4383-be6f2395ce24.png)


### 設定例
 - "ラベル"に仕入日、"値"に材料仕入額

## ステップ折れ線
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/8b23681b-49eb-c2c9-ddd7-013f81a32cb4.png)

一定期間の数値の変化を表示する場合に便利。
ステップエリアと同じく、銀行残高や抵当利息など、定期的または不定期で変化する数字をプロットする場合に役立つ。

### 設定例
 - "ラベル"に仕入日、"値"に材料仕入額



## スプラインエリア
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/289c1d2e-ffc0-34ae-16a2-b488afdf6556.png)

### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額、売上額


## スプライン
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/ca03b4ff-26bf-9516-353d-1cdf898345ac.png)

### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額、売上額

# ゲージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/52088241-72ff-98c2-ec29-a54e2ff95f0d.png)

## リニア
増減するデータ（たとえば、温度）を視覚的に表示するために使用されます。温度計を表すために垂直方向のリニア ゲージを作成することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/ba7af078-7117-e98f-8783-848e51ac7cc9.png)

### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額

## 円形
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/c0ab1bea-9ba9-2269-8a6a-7576f8a0670f.png)

### 設定例

 - "ラベル"に仕入日、"値"に材料仕入額


## テキスト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/24b4a00b-89f5-d46b-bca2-234bb9002084.png)

### 設定例

 - "値"に売上額

## ブレット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/ed945491-b25e-743d-8f9e-b6187df461b5.png)

### 設定例

 - "ラベル"に仕入日(曜日)、"値"に材料仕入れ額、"ターゲット"に販管費


## KPI(日付)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/91854623-5b25-b269-da74-4423ed5fa0ab.png)

### 設定例

- "ラベル"に売上日、"値"に売上金額

## KPI(数値)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/a3f3d488-261c-13e9-fcfc-e4cffa20ac56.png)

### 設定例

- "ラベル"に売上日、"値"に売上金額、"ターゲット"に材料仕入額

# 散布図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/7c9bebd1-c2b0-cc4a-8ede-271ed8d5aa05.png)

## バブル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/d82d7709-ab50-38ed-7e37-2497d19733b6.png)

### 設定例
- "ラベル"に年齢、"X-AXIS"に売上個数、"Y-AXIS"に年齢、"バブル半径"に売上個数、"COLOR"に年齢

## 散布図
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/49d09140-d308-e1ff-260e-6fa851b41fd3.png)

### 設定例
- "ラベル"に年齢、"X-AXIS"に売上個数、"Y-AXIS"に年齢、"COLOR"に年齢

# 財務
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/fab00b60-8ecf-e953-3e00-3ea6300b0195.png)

## OHLC チャート (後日更新)
(後日更新)

## ロウソク足 (後日更新)
(後日更新)

# その他
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/ece4e309-9a68-440d-e91f-1c5230b525f1.png)

## ラジアル
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/6ec22bdf-d4c9-7021-2eda-c5da6b34edb9.png)

### 設定例
- "ラベル"に年齢、"値"に売上個数

## スパークライン

データの傾向、変化、およびパターンを明確でコンパクトな表現に注力したシンプルな視覚化パターン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/48623/03150605-476e-2857-002e-57c4d97c74a1.png)

### 設定例
- "ラベル"に売上日、"値"に売上金額、"カテゴリ"に商品名