---
tags: 《研華 Advantech》
---
# WISE-PaaS 操作實驗手冊(02)

---
:::spoiler **Guide Links 點擊展開目錄**
[TOC]
:::

---
---

# :seedling:此次目標

用Dashboard把上傳的資料顯示出來。



---

---

# :seedling:在Dashboard完成視覺化的設置
1. 了解Dashboard：
WISE-PaaS的Dashboard僅作為顯示資料數據而使用，因此不會有數據後處理的部分；如需簡單的數據後處理，在DataHub建立Tag時即可設置

2. 進入[Dashboard](dashboard-ruiguang-ews.education.wise-paas.com)

3. 依照下方說明依序完成設置

## 新增/設定好Dashboard要用到的Data Source
<font color="#f00">(請先確認你的DataHub有上傳過上週範例給予的數據)</font>
+ 新增設置&確認Data Source


這邊要導入的數據是從DataHub來的，因此輸入的網址是DataHub的網址
URL是`https://portal-datahub-ruiguang-ews.education.wise-paas.com`
+ 創建Folder
<font color="#f00">命名規則為"`Student_學號`"</font>
+ 在Folder內創建Dashboard
\
<font color="#f00">**不要忘記儲存、命名、把Dashboard放在你自己的資料夾裡**</font>
**命名請打學號**

---

## 設定好Advanced Datatable: Data History

(即圖中的白色框框區塊)

### 先訂好Query
※不是用自己的資料源的話，就先選Teaching
新增好要顯示的欄位

### 然後訂好Visualization

找到<mark>Advanced Datatable</mark>，點兩下

- <mark>**基礎設定**</mark>
在Visualization這邊，最上方第一區塊基礎設定
(即包含 Data, Paging, Search, Math的這一區塊)

打開Search Control

- <mark>**Display設定**</mark>
在Visualization這邊，第二區塊
(包含Font, Color, Display, Setting, Separate, Merging)
* **Color** & **Display** :
選擇Color中Font Color和Title Background的顏色
打開Display中的Row Numbers
* **Setting** :
關上Setting中的Row Borders
打開Setting中的Cell Borders
打開Setting中的Compact Rows
* **Merging** :
1. 找到Display
2. 找到Merging
3. 點擊Add Name，會看到下圖
4. 在Start選擇Cold Water Consumption
5. 在End選擇Total Water Consumption
6. 在Name輸入WaterConsumption
7. 點擊Merging

- <mark>**Column Styles設定**</mark>
在Visualization這邊，第三區塊
(藉由新增欄位設定的方式一一修改該欄位的外觀 ex.Options/Styles/Type/Thresholds)
1. 到Column Style這個頁面
2. 點擊Add
3. 選擇要變更Style的欄位
4. 讓標題與數字置中(選Center)
5. 選擇顏色(冷→藍, 溫→橘, 熱→紅)

- <mark>**Status設定**</mark>
在Visualization這邊，最下方的那一個區塊
(藉由新增方式增加欄位，並設定此一新增欄位之外觀)
新增一欄 Status
選定好作為判斷對象的欄位
設定好條件
然後按ADD

之後就會長這樣, 記得把Status Name取為Status Alert，

接下來再回到Visualization的第三個區塊：Column Styles
新增Status此一欄位的設定

### 再來訂好General，取好該圖表的標題名稱
* 進入General，在第一個區塊修改此圖表的標題名稱
* 儲存你目前的進度

### 最後回到你的這一個Dashboard主頁，調整此圖表的位置與大小
回到其所屬的Dashboard主頁

調整圖表位置(將滑鼠移到該圖表的標題直接拖曳即可)

調整圖表大小(將滑鼠移到該圖表的右下角即可進行調整)

<font color="#f00">**※ 到這裡請務必記得儲存你目前的進度**</font>

### 如果想新增下一個圖表
回到其所屬的Dashboard主頁
按下Add panel就可新增下一個圖表

---

## 設定好Singlestat: Cold Temp/ Warm Temp/ Hot Temp
### 設定好Query (以Cold Temp為例)
由於Singlestat只會顯示一個欄位的值，因此這裡Query只需要設這一個就好

### 外觀等細節設定

- Value
1. 到Value
2. Show 選擇Current
3. Unit 選擇Celsius
4. Value打開
5. Thresholds設為 10,20
6. Spark lines 和 Gauge 的show開關打開(打開後下面選項才會跑出來)
7. Min和Max設為溫度（ex:冷水:0-30 溫水31-60）
8. Threshold markers的開關打開

### 去General取好該圖表的標題名稱

<font color="#f00">**※ 到這裡請務必記得儲存你目前的進度**</font>

---

## 設定好Graph: Temp History
### 設定好Query
把需要顯示的這三個溫度加進Query就好

### 外觀等細節設定

- 設定折線圖顏色
1.點擊說明文字左側顏色去更改線的顏色
- Axes
1. 找到Axes
2. 將Y-Min設為0 Y-Max設為100(因為溫度範圍為0-100度)
3. 打開Enable Custom Scale
4. Custom Scale 設為10 minute（用second的話時間會重疊）

### 去General取好該圖表的標題名稱

<font color="#f00">**※ 到這裡請務必記得儲存你目前的進度**</font>

---

## 設定好Grouped Bar Chart Panel: Water Usage History
### 設定好Query
把需要顯示的這三個數值加進Query就好

### 外觀等細節設定

- Axis
1. 將X Axis 的 Bar Width 改成40
2. Left Y的name設為ml
3. 將Left Y的Auto Interval打開
4. 將Left Y的Decimals設為3
- Style Setting
1. 找到Style setting
2. Data Name 選擇要改變style之資料
3. 冷溫熱水的Type選擇bar，總和的Type選擇Line
5. Color選擇顏色
6. 填完一個Style若要繼續增加其他資料的Style則點擊Add Style
7. 完成圖

### 去General取好該圖表的標題名稱

<font color="#f00">**※ 到這裡請務必記得儲存你目前的進度**</font>

---

## 設定好Pie Chart: Percentage of water

### 設定好Query
把需要顯示的這三個數值加進Query就好

### 外觀等細節設定
- 更改圓餅圖顏色
- General
1. Unit 選擇mL
2. Position 選擇On graph（選了這個才會跑出其他選項）
3. Values Decimals 填 3
4. 打開Show Percentage
5. Percentage Decimals 填 2

### 去General取好該圖表的標題名稱

<font color="#f00">**※ 到這裡請務必記得儲存你目前的進度**</font>

---

# :seedling: 驗收
請完成此次授課之步驟與內容。