Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

enebular Advent Calendar 2016 8日目のenebular の INFOMOTION を他のサイトに貼り付けるの通り作成したINFOMOTIONは外部に埋め込むことが可能です。これを応用すれば作成した複数のINFOMOTONを配置してダッシュボードを作成することも可能です。

初歩デモ準備

enebular Advent Calendar 2016初日の@satton_maroyakaのエントリ、enebularをつかいはじめるにあるスライドを見て準備すると以下のようになります。

image

image

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

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

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

66797ca6-f004-52cf-44d7-0c8514040db7.gif

LineChart

設定は以下です。

項目 設定する値
TYPE linechart
DATASOURCE Milkcocoa(設定したデータソース名)
label id
value value

image

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

faebf96d-f389-0ea1-4c62-18c6249cf7e2.gif

PieChart

設定は以下です。

項目 設定する値
TYPE piechart
DATASOURCE Milkcocoa(設定したデータソース名)
label id
value value

image

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

8b909b8c-a558-85a9-5816-8f2a6c062bdc.gif

ValueRangePieChart

設定は以下です。

項目 設定する値
TYPE valuerangepiechart
DATASOURCE Milkcocoa(設定したデータソース名)
value value
minValue 0
maxValue 100
divides 5

image

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

bce6cad4-dd5d-c3aa-8bc4-ffcb46a8a231.gif

CombinationChart

設定は以下です。

項目 設定する値
TYPE valuerangepiechart
DATASOURCE Milkcocoa(設定したデータソース名)
label id
valueBar value
valueLine value1

a5f1c3ab-70a7-23de-9f78-975f2e02044a.png

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

bf7c9a48-965a-d639-bde4-7dde21fb76da.gif

MetricsGraphics

設定は以下です。

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

image

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

infomotion.gif

まとめて外部に埋め込み

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

image

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

infomotion.gif

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

<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

まとめ

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

infomotion.gif

joeartsea
Chief Technical Officer at Uhuru Corporation. enebular, Milkcocoa, Node-RED
https://about.me/joeartsea
uhuru
株式会社ウフルはインターネットによる革新的なサービスがお客様企業の価値向上につながる事を目指し「テクノロジーと自由な発想で未来を創る」を企業理念に掲げています。エッジとクラウドを “つなぐ” IoTオーケストレーションサービス「enebular®」をベースにIoTやデジタルマーケティングの領域で顧客のビジネスに変革をもたらし続けております。
https://uhuru.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした