---
# System prepended metadata

title: <center><i class="fa fa-edit"></i> Dashboard with Dispenser Database </center>
tags: [Internship]

---

# <center><i class="fa fa-edit"></i> Dashboard with Dispenser Database </center>
###### tags: `Internship`
:::info
**Goal:**
- [x] Basic Bar Chart of Water Volume for All Users
- [x] Basic Bar Chart of Water Volume for One Specified Dispenser
- [x] Basic Table of Water Volume for One Specified Dispenser

**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)
:::

### Example Code
![](https://i.imgur.com/l4gCWjL.png)

```javascript=
db.raw_data.aggregate([
  {"$match": {"Dispenser": "xinxing08", "Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "Water": "$Choose", "Dispenser": "$Dispenser","WaterTemp": "$WaterTemp", "CardID": "$CardID", "value": "$WaterVolume"}}
]);
```
## Basic Bar Chart of Water Volume for All Users
### Query
![](https://i.imgur.com/MGl1drP.png)

```javascript=
db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);
```
### Visualization
![](https://i.imgur.com/xYn0CGY.png)

1. 將X Axis 的 Bar Width 改成40
1. Left Y的name設為mL
1. 將Left Y的Auto Interval打開
1. 將Left Y的Decimals設為1

![](https://i.imgur.com/VdgwBFw.png)

1. 找到Style setting
1. Data Name 選擇要改變style之資料
1. Color選擇顏色

### General Settings
![](https://i.imgur.com/Vu3LEav.png)

1. Change name of graph 
2. **Make sure to hit save**

### Final Product
![](https://i.imgur.com/WeludF8.png)

## Basic Bar Chart of Water Volume for One Specified User
### Query
![](https://i.imgur.com/mX1okpH.png)
```javascript=
db.raw_data.aggregate([
  {"$match": {"Dispenser": "xinxing08", "Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);
```
### Visualization
![](https://i.imgur.com/xYn0CGY.png)

1. 將X Axis 的 Bar Width 改成40
1. Left Y的name設為mL
1. 將Left Y的Auto Interval打開
1. 將Left Y的Decimals設為1

![](https://i.imgur.com/VdgwBFw.png)

1. 找到Style setting
1. Data Name 選擇要改變style之資料
1. Color選擇顏色

### General Settings
![](https://i.imgur.com/PvgKHJx.png)

1. Change name of graph 
2. **Make sure to hit save**

### Final Product
![](https://i.imgur.com/Okkuvjb.png)

## Basic Table of Water Volume for One Specified Dispenser
### Query
![](https://i.imgur.com/MGl1drP.png)

```javascript=
db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);
```
### Visualization
![](https://i.imgur.com/wBjWpTN.png)


1. Add new rule
2. Apply to columns named Value
3. Change column header name to Water Volume
4. Add a threshold of 100,200
    - This tells us which water volumes are above, in, or below this range by color
5. Change color mode to Cell
### General Settings
![](https://i.imgur.com/475eJzk.png)
1. Change name of graph 
2. **Make sure to hit save**

### Final Product
![](https://i.imgur.com/KsiSatn.png)
