enebular INFOMOTIONを組み合わせてダッシュボードを作る

[enebular Advent Calendar 2016](http://qiita.com/advent-calendar/2016/enebular) 8日目の[enebular の INFOMOTION を他のサイトに貼り付ける](http://qiita.com/satton_maroyaka/items/3ef097b29aa2ea3521aa)の通り作成したINFOMOTIONは外部に埋め込むことが可能です。これを応用すれば作成した複数のINFOMOTONを配置してダッシュボードを作成することも可能です。

## 初歩デモ準備

[enebular Advent Calendar 2016](http://qiita.com/advent-calendar/2016/enebular)初日の@satton_maroyakaのエントリ、[enebularをつかいはじめる](http://deferloader.blog.uhuru.co.jp/?p=6433)にある[スライド](http://www.slideshare.net/SatoruIshikawa1/enebular-infomotion)を見て準備すると以下のようになります。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/445a645f-6c80-b36f-510d-3a7b8a095a0e.png)

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/a2aa2068-245e-9e05-cfc6-b457cc0f28aa.png)

今回は標準INFOMOTION Typeの多数のグラフで利用できるようにランダム発生データを少し変更します。Functionノードを開いて以下のように変更します。

```js
msg.payload = {
    id : "value" + Math.floor(Math.random() * 5),
    value : Math.floor(Math.random() * 100),
    value1 : Math.floor(Math.random() * 100)
};
return msg;
```

## 複数グラフを作る

BarChart、LineChart、PieChart、ValueRangePieChart、CombinationChart、MetricsGraphicsの6種類のグラフを作成します。

### BarChart

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | barchart |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| label | id |
| value | value |

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/86fe3408-b9b8-a92e-ce52-47d6a83f5484.png)

以下のようなグラフになればOKです。

![66797ca6-f004-52cf-44d7-0c8514040db7.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/531a7170-cff7-d2fa-5810-c45af4f70022.gif)

### LineChart

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | linechart |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| label | id |
| value | value |

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/5173dba7-deb5-1a21-30eb-530e9865a81c.png)

以下のようなグラフになればOKです。

![faebf96d-f389-0ea1-4c62-18c6249cf7e2.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/7f4487dd-1273-d29e-2180-8df9f0eb3544.gif)

### PieChart

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | piechart |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| label | id |
| value | value |

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/c1ee75f2-62af-473c-1dad-66cfbf92f2ca.png)

以下のようなグラフになればOKです。

![8b909b8c-a558-85a9-5816-8f2a6c062bdc.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/8f7ee34f-0cf8-f0c9-e074-26f813fc8338.gif)

### ValueRangePieChart

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | valuerangepiechart |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| value | value |
| minValue | 0 |
| maxValue | 100 |
| divides | 5 |

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/53325a24-7d32-3680-93c4-616b08a071ae.png)

以下のようなグラフになればOKです。

![bce6cad4-dd5d-c3aa-8bc4-ffcb46a8a231.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/3c06155a-7532-9504-ade9-2cee85d7976b.gif)

### CombinationChart

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | valuerangepiechart |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| label | id |
| valueBar | value |
| valueLine | value1 |

![a5f1c3ab-70a7-23de-9f78-975f2e02044a.png](https://qiita-image-store.s3.amazonaws.com/0/21109/57d7d9d4-6874-7641-520b-0d433b9587f1.png)

以下のようなグラフになればOKです。

![bf7c9a48-965a-d639-bde4-7dde21fb76da.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/d1abb393-384d-5744-1827-1a32f4a961eb.gif)

### MetricsGraphics

設定は以下です。

| 項目 | 設定する値 |
|:-:|:-:|
| TYPE | metricsgraphics |
| DATASOURCE | Milkcocoa（設定したデータソース名） |
| rows y_accessor | value |
| rows y_accessor | value1 |
| legend name | Value |
| legend name | Value1 |
| limit | 20 |

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/6227b695-8021-371d-6e17-b01f07d72a13.png)

以下のようなグラフになればOKです。

![infomotion.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/95cd6ad4-8bfa-009a-5dc1-3c79b0d9a15a.gif)

## まとめて外部に埋め込み

BarChartのshareリンクをクリックして表示されるHTMLタグをローカルファイルとして保存します。

![image](https://qiita-image-store.s3.amazonaws.com/0/21109/53b1d3d8-5f2e-30bb-43d6-9e91cd7cc99e.png)

これでローカルのHTMLファイルをブラウザで開くと棒グラフだけ表示されます。

![infomotion.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/4d69250c-2918-b2b6-e338-7532e370a8ab.gif)

複数グラフを1画面で表示するためには以下のようにPromiseで組み合わせます。

```html
<link rel="stylesheet" href="https://enebular.com/public/emi/css/style.css" />

<!-- タイル調に並べるスタイル指定 -->
<style>
.enebular-graph {
	float: left;
	height: 400px;
	width: 500px;
}
</style>

<div id="enebular-daterangepicker"></div>
<div id="enebular-timeline"></div>

<!-- グラフの数だけ以下を増やす -->
<div id="enebular-graph1" class="enebular-graph"></div>
<div id="enebular-graph2" class="enebular-graph"></div>
<div id="enebular-graph3" class="enebular-graph"></div>
<div id="enebular-graph4" class="enebular-graph"></div>
<div id="enebular-graph5" class="enebular-graph"></div>
<div id="enebular-graph6" class="enebular-graph"></div>

<script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
<script src="https://enebular.com/public/emi/main.js"></script>
<script>
var settings = {...}

// グラフの数だけ以下を増やす
var graphData1 = [...]; // BarChartのgraphData
var graphData2 = [...]; // LineChartのgraphData
var graphData3 = [...]; // PieChartのgraphData
var graphData4 = [...]; // ValueRangePieChartのgraphData
var graphData5 = [...]; // CombinationChartのgraphData
var graphData6 = [...]; // MetricsGraphicsのgraphData

var dateRangePicker = EnebularIntelligence.createDateRangePicker("enebular-daterangepicker");
var timeline = EnebularIntelligence.createTimeline("enebular-timeline");

// グラフの数だけ以下を増やす
EnebularIntelligence.createGraph("enebular-graph1", settings, graphData1, {
	dateRangePicker: dateRangePicker,
	timeline: timeline
}).then(function() {
	return EnebularIntelligence.createGraph("enebular-graph2", settings, graphData2, {
		dateRangePicker: dateRangePicker,
		timeline: timeline
	});
}).then(function() {
	return EnebularIntelligence.createGraph("enebular-graph3", settings, graphData3, {
		dateRangePicker: dateRangePicker,
		timeline: timeline
	});
}).then(function() {
	return EnebularIntelligence.createGraph("enebular-graph4", settings, graphData4, {
		dateRangePicker: dateRangePicker,
		timeline: timeline
	});
}).then(function() {
	return EnebularIntelligence.createGraph("enebular-graph5", settings, graphData5, {
		dateRangePicker: dateRangePicker,
		timeline: timeline
	});
}).then(function() {
	return EnebularIntelligence.createGraph("enebular-graph6", settings, graphData6, {
		dateRangePicker: dateRangePicker,
		timeline: timeline
	});
}).then(function() {
	var now = new Date();
	var start = now.getTime() - 7 * 24 * 60 * 60 * 1000;
	dateRangePicker.setRange(new Date(start), now);
	console.log("loaded");
}).catch(function(err) {
	console.error(err);
});
</script>
```

これで以下のように複数グラフを並べて表示できます。

![infomotion.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/f7761279-26ef-29bf-07d2-b84233f048bc.gif)

## まとめ

あとはスタイルなど体裁を整えることで以下のようなINFOMOTIONを作ることも可能です。

![infomotion.gif](https://qiita-image-store.s3.amazonaws.com/0/21109/30396382-35b8-2803-9ba0-2c663bad5efe.gif)