2. チュートリアル1A: サンプルデータを可視化してみよう

1つめのチュートリアルでは、サンプルのCSVファイルをアップロードして、Data Visualizerで可視化します。

../_images/upload-csv-retrieve-tutorial.ja.png

2.1. Data Visualizerにダッシュボードを作成する

まず始めに、Data Visualizer上に可視化用のダッシュボードを作成します。

2.1.1. Data Visualizerを開く

注釈

アクセス先のURLのスキーム（http またはhttps）やホスト名、ログインに使用するパスワードは、環境構築時の設定により異なります。 これらの情報が不明な場合は、環境構築の担当者に確認してください。

  1. Microsoft Edge ブラウザーを使用して、 https://<intdashサーバーのホスト名>/ にアクセスします。 ログイン画面が表示されますので、ユーザー名とパスワードを入力してログインしてください。

    ログインするとProject Consoleアプリケーションが表示されます。

  2. 画面左の「所属プロジェクト一覧」から所属しているプロジェクトの一覧を表示し、使用するプロジェクトを選択します。 ここでは「Global Project」を使用するため、「Global Project」の[詳細]をクリックします。 なお、任意のプロジェクトを使用する場合は、使用するユーザーアカウントと、エッジアカウントをプロジェクトに所属させる必要があります。

  3. 画面左の「アプリケーション」から利用可能なアプリケーションの一覧を表示し、一覧から、「Visual M2M Data Visualizer」を選択します。

    Data Visualizerのダッシュボードが表示されます。

2.1.2. データ設定ファイルを読み込む

次に、データのパース方法を設定します。 本チュートリアルでは、事前に用意されたデータ設定ファイル（.dat形式のファイルのため、以下ではDATファイルと呼びます）を読み込んで、データ設定を一括設定します。

  1. 以下のDATファイルをダウンロードします。

    1_1_csv_parse.dat

  2. 画面左の[Data Settings]（ menu-icon ）をクリックし、[Import]をクリックします。

    ../_images/parse-data-window.png

    図 1 データ設定ファイルのインポート

  3. ファイル選択ダイアログが表示されるので、手順1でダウンロードした 1_1_csv_parse.dat を選択して、インポートします。

2.1.3. ダッシュボードの設定ファイルを読み込む

最後に、可視化用のダッシュボードを設定します。 本チュートリアルでは、事前に用意されたダッシュボードの設定ファイル（Screenファイルと呼びます）を読み込むことにより設定します。

  1. 以下のScreenファイルをダウンロードします。

    1_1_csv_screen.scrn

  2. 画面下部の[Screen list]（ screen-list ）ボタンをクリックし、[Import]をクリックします。

    ../_images/screen-menu.png

    図 2 Screenボタン

    ../_images/import-button.png

    図 3 [Import]ボタン

  3. 手順1でダウンロードした 1_1_csv_screen.scrn を選択してインポートします。

  4. インポートした[CSV Screen]を選択して表示します。

  5. ダッシュボード上の各パネルに edge1 のデータを表示するように設定します。

    インポートされたダッシュボードは、 Unknown Edge のデータを表示する設定になっています。 replace-edge （Replace Edge）をクリックし、送信元エッジの設定 Unknown Edge を edge1 に置き換えます。

    ../_images/replace-edge-bound-to-the-panels.png

    図 4 Unknown Edgeをedge1に置き換え

    ../_images/dashboard-after-import.png

    図 5 ダッシュボード画面

以上で、Data Visualizerへのデータ設定とダッシュボードの設定が完了しました。

2.2. CSVファイルをアップロードする

前節までの手順によって、ダッシュボードの作成が完了しました。 次は、可視化したいCSVデータをintdashにアップロードします。

2.2.1. アップロードするCSVファイルの中身を確認する

まず始めに、可視化したいCSVデータを確認します。本章では、サンプルファイルとして、以下のCSVファイルを使用します。

sample.csv

サンプルファイルには、6軸センサーから取得したセンサー信号の値が格納されています。 第1列にはタイムスタンプが格納されており、第2列以降の各列には、各センサーの信号値が数値データとして格納されています。 第1行目は各列のデータの名称を格納したヘッダー行です。

注釈

CSVファイルのエンコーディングは、UTF-8を使用してください。 UTF-8以外のエンコーディングを使用すると、日本語などのマルチバイト文字が文字化けする可能性があります。

2.2.2. Meas Hubアプリケーションを開く

ウェブブラウザーのProject Consoleのタブに戻り、計測管理用アプリケーションMeas Hubを開きます。

2.2.3. CSVファイルをアップロードする

  1. サイドメニューの[計測アップロード一覧]をクリックし、CSVのアップロード画面へ移動します。

  2. [CSVファイルから計測を作成]をクリックし、edge1を選択します。

    これにより、CSVファイルはedge1のデータとしてアップロードされます。

    ../_images/choose-edge.ja.png

    図 6 エッジを選択

  3. [ファイルの選択に進む]をクリックし、前節で確認したサンプルファイルを選択してアップロードします。

    CSVファイルの送信が正常に完了すると、ファイル一覧に新しいファイルが表示されます。

4. intdashにCSVファイルがアップロードされると、CSVファイルの読み出しとデータ登録処理がバックグラウンドで実行されます。 アップロードしたファイルのステータスが「計測作成完了」になるまでしばらくお待ちください。

注釈

同じ日に同じ名前のファイルを複数回アップロードすると、 2回目以降のファイル名の先頭にはランダムな文字列が追加されます（例: WXeiMUYkBU_sample.csv ）

  1. ステータスが「計測作成完了」になったら、「作成された計測」（計測のUUID）をコピーしておきます。

1つのCSVファイルは1つの計測（Measurement）に変換されてintdashに保存されます。 計測とは、計測開始から計測終了までのひとまとまりのデータを意味します。

2.3. アップロードしたデータをダッシュボードで可視化する

これまでの手順で、可視化用のダッシュボードの準備と、CSVファイルのアップロードが完了しました。 いよいよ、ダッシュボードを使ってアップロードしたデータを可視化してみます。

2.3.1. Stored Dataからアップロード済みのデータを選択する

  1. ウェブブラウザーで、Data Visualizerのタブに戻ります。

  2. 画面左側の stored-data (Stored Data)をクリックし、[Measurements]を選択します。計測の一覧が表示されます。

  3. アップロードしたデータ sample.csv のタイムスタンプは2020年7月になっているため、以下の図のように日付範囲を指定して、2020年7月のデータを表示します。

    ../_images/show-2020-07-measurements.png

    図 7 日付範囲をドラッグして2020年7月のデータを表示

  4. アップロード時にメモしたUUIDを持つ計測を選択します。 すぐにデータのローディングが始まり、しばらくするとダッシュボード上で再生されます。

    ../_images/playing.png

    図 8 再生時のダッシュボード画面

2.3.2. 基本的な操作（再生、一時停止、再生位置の移動）

データの再生や一時停止は、画面上部のコントロールパネルから操作することができます。 また、一時停止中は、コントロールパネルの[<<]および[>>]を使用することで、再生位置を移動することもできます。 再生速度は[Speed]ドロップダウンリストで指定することができます。

../_images/controls.png

図 9 コントロールパネル

2.3.3. 高度な使い方（ビジュアルパーツの設定の変更）

Data Visualizerでは、ダッシュボード上の可視化パーツ（以降、ビジュアルパーツと呼びます）の設定を変更できます。 ビジュアルパーツの設定は、[Panel Option]タブで行います。 （Value Current、Text Streamなどのシンプルなビジュアルパーツでは、[Panel Option]がない場合もあります）

../_images/visual-part-example.png

図 10 ビジュアルパーツの例

  1. 表示されているビジュアルパーツを右クリックして[Panel Settings]タブを開きます。

  2. [Panel Option]タブを開きます。お好みに合わせてビジュアルパーツの表示方法を変更してください。

    例えば、Line Graphの[Panel Option]タブでは、以下のような項目を設定可能です（これらは設定可能な項目の一部です）。

    • Data Range: 縦軸方向の表示範囲を指定します

    • Time (X) Interval (sec): 横軸の間隔を指定します

    • Show Points: 折れ線グラフにマーカーを表示します（画面に表示されるマーカーが多くなりすぎる場合は、自動で省略されます）

../_images/panel-option.png

図 11 例: Line Graphの[Panel Option]タブ

2.3.4. さらに高度な使い方

本チュートリアルでは、Data Visualizerが持つ豊富な機能のうちの一部の機能のみをご紹介しました。 より詳しい利用方法については、 Data Visualizer操作マニュアル をご覧ください。

また、以降の章でもその他の使い方を紹介していますので、適宜ご覧ください。