# <center><i class="fa fa-edit"></i> Dashboard </center> ###### tags: `Internship` :::info **Goal:** - [x] 新增/設定好Dashboard要用到的Data Source - [x] 設定好Advanced Datatable: Data History - [x] 設定好Singlestat: Cold Temp/ Warm Temp/ Hot Temp - [ ] 設定好Graph: Temp History - [ ] 設定好Grouped Bar Chart Panel: Water Usage History - [ ] 設定好Pie Chart: Percentage of water **Resources:** [Dashboard access mongoDB from NTUST](https://hackmd.io/@eric248550/BkZpSMjc9) [2021 物聯網平台實習 (ET2702301)](https://hackmd.io/1vqhIDkqQKqF907HpneANw?view) [Management Portal](https://portal-mp-ensaas.education.wise-paas.com/console) [Dashboard Home](https://dashboard-ruiguang-ews.education.wise-paas.com/?orgId=1) [在Dashboard完成視覺化的設置](https://hackmd.io/@RenJhang/HJ_ruIxVF) ::: ## 新增/設定好Dashboard要用到的Data Source ![](https://i.imgur.com/dtZQ72p.png) ## 設定好Advanced Datatable: Data History ![](https://i.imgur.com/zRpwZqc.png) ![](https://i.imgur.com/enblhQb.png) ![](https://i.imgur.com/bswjK7c.png) ### 然後訂好Visualization ![](https://i.imgur.com/xSnxo4Y.png) ### 訂好General，取好該圖表的標題名稱 ![](https://i.imgur.com/vLsleSO.png) ### 回到Dashboard主頁，調整此圖表的位置與大小 ![](https://i.imgur.com/lWWHkFL.png) ### 如果想新增下一個圖表 ![](https://i.imgur.com/jI82f9Y.png) ![](https://i.imgur.com/g2nVuW9.png) ## 設定好Singlestat: Cold Temp/ Warm Temp/ Hot Temp ### 設定好Query 由於Singlestat只會顯示一個欄位的值，因此這裡Query只需要設這一個就好 ![](https://i.imgur.com/IG6Eptl.png) ### 外觀等細節設定 ![](https://i.imgur.com/s7uOpps.png) ![](https://i.imgur.com/tUh3Lwb.png) ![](https://i.imgur.com/yafSLjh.png)