# <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

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

db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);

### Visualization

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


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

### General Settings

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

### Final Product

## Basic Bar Chart of Water Volume for One Specified User
### Query

db.raw_data.aggregate([
  {"$match": {"Dispenser": "xinxing08", "Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);

### Visualization

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


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

### General Settings

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

### Final Product

## Basic Table of Water Volume for One Specified Dispenser
### Query

db.raw_data.aggregate([
  {"$match": {"Timming_ISO":{ "$gte" : "$from", "$lt": "$to" } }},
  {"$project": {"ts": "$Timming_ISO", "value": "$WaterVolume"}}
]);

### Visualization

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
1. Change name of graph
2. **Make sure to hit save**

### Final Product