ダッシュボード作成
目標
このチュートリアルでは下図のようなダッシュボードを作成します。 ダッシュボードはタイル状に UI を配置できます。
チュートリアル目標\ダッシュボード_
ダッシュボード
ダッシュボードを新規作成する
- 左上メニューをクリック
- 「ダッシュボード」をクリック
- 「新規作成」をクリック
- 「無題のダッシュボード」を選択
ダッシュボードへ移動
ダッシュボード新規作成
ダッシュボードの編集モードをオンにする
- 編集モード切替ボタン（歯車アイコン）をクリック
ダッシュボードの編集モードオン
ダッシュボードの名前を変更する
- 左サイドの「表示設定」をクリック
- 「名前」に適当な名前を入力
- 左上の「保存」をクリック
ダッシュボードの名前を変更
ダッシュボードの期間を変更する
- 左サイドの「期間」をクリック
- 「固定期間」を選択
- 「開始」と「終了」の時刻を設定
- 前のチュートリアルでサンプルのポイントに書き込んだ時刻を含むように設定してください。
- 左上の「保存」をクリック
ダッシュボードの期間を変更
マップ
マップを新規作成する
- 左サイドの「すべてのリソース」をクリック
- 「リソース新規作成」＞「マップ」を選択
- リソース一覧の「リソース 1 マップ」をクリック
マップ新規作成
マップの幅と高さを変更する
- マップツリーから「リソース 1 マップ」を選択
- 幅に
240、高さに120を設定 - 左上の「保存」をクリック
マップの幅と高さを変更
スポットを新規作成する
- マップツリーから「レイヤー 1」を選択
- ポイントをマウスでドラッグしたまま右の画面上に移動しマウスを離す
- 前のチュートリアルでデータを書き込んだポイントを選択してください。
- 青い点線の枠をマウスでドラッグして位置を調整
- 左上の「保存」をクリック
スポット新規作成
スポット位置調整
スポットのアイコンと色を変更する
- マーカーの塗色を変更（例：青色を選択）
- マーカーのアイコンを変更（例：「タグ」を選択）
- 表示値の枠線色を変更（例：青色を選択）
- 時刻の塗色を変更（例：灰色を選択）
- 左上の「保存」をクリック
スポットのアイコン・色の変更
マップからダッシュボードに戻る
- 左上の「ダッシュボードに戻る」をクリック
マップからダッシュボードに戻る
チャート
チャートを新規作成する
- 左サイドの「すべてのリソース」をクリック
- 「リソース新規作成」＞「チャート」を選択
- リソース一覧の「リソース 2 チャート」をクリック
チャート新規作成
時間軸の幅をデータの時刻に合わせる
- 「期間全体表示」チェックボックスをオフ
- 左上の「保存」をクリック
期間全体表示オフ
グラフを新規作成してポイントを割り当てる
- グラフの「新規作成」をクリック
- 「ポイントID」の入力テキストボックスをクリック
- 選択ダイアログでポイントを選択
- 前のチュートリアルでデータを書き込んだポイントを選択してください。
- 左上の「保存」をクリック
グラフ新規作成
グラフのポイント選択
グラフの見た目を変更する
- 「色」を変更（例：青色を選択）
- 「塗り潰し」チェックボックスをオン
- 左上の「保存」をクリック
グラフの色と塗り潰し
チャートからダッシュボードに戻る
- 左上の「ダッシュボードに戻る」をクリック
チャートからダッシュボードに戻る
ダッシュボードのタイル設定
リソースをタイルに配置する
- 「タイルツリー」＞「未設定」をクリック
- 「分割」ボタンをクリック
- 「タイルツリー」＞「横並び」＞「未設定」をクリック
- 「タイルに割り当てるリソース」に「リソース 1 マップ」を選択
- 「タイルツリー」＞「横並び」＞「未設定」をクリック
- 「タイルに割り当てるリソース」に「リソース 2 チャート」を選択
- 左上の「保存」をクリック
タイル分割
マップ割り当て
チャート割り当て
タイル設定保存
ダッシュボードの編集モードをオフにする
- 編集モード切替ボタン（歯車アイコン）をクリック
ダッシュボードの編集モードオフ
以上でダッシュボードの作成は完了です。
ダッシュボードの動作確認
タイムスライダを動かしてみる
タイムスライダの右側のハンドルを動かすことができます。ハンドルを動かすとスライダの範囲が変わります。
ハンドルが指し示す時点における最新の瞬時値データが表示されます。 また、スライダの範囲内の期間データをグラフ化しています。
タイムスライダの移動
タイムスライダを元の位置に戻す
タイムスライダを元の位置に戻したい場合は開始時刻 - 終了時刻のボタンをクリックしてください。
タイムスライダを元の位置に戻す