# LAB: Data Visualization

#### ลิ้งเนื้อหา [Data Visualization ](/artificial-intelligence-ai/data-analytics/data-analytics.md)

### ติดตั้ง Library สำหรับ Data Visualization

* **pywebio**
* **pandas**
* **plotly**

```python
pip install pywebio
pip install pandas
pip install plotly
```

### **Get start with pywebio**

          เริ่มต้นด้วยการสร้างไฟล์โปรแกรมชื่อว่า “webBMI.py” และคัดลอกโค้ดด้านล่าง ซึ่งเป็นโปรแกรมการคำนวณค่า BMI โดยใส่ข้อมูลน้ำหนัก (weight) และ ส่วนสูง (height) ลงบนหา web โปรแกรม

```python
# A simple script to calculate BMI
import pywebio
import plotly.express as px
import pandas as pd
from pywebio.input import input, FLOAT
from pywebio.output import put_text, put_html, put_markdown, put_table
 
def page():
     height = input("Input your height(cm)：", type=FLOAT)
     weight = input("Input your weight(kg)：", type=FLOAT)
     BMI = weight / (height / 100) ** 2
     top_status = [(16, 'Severely underweight'), (18.5, 'Underweight'),
                   (25, 'Normal'), (30, 'Overweight'),
                   (35, 'Moderately obese'), (float('inf'), 'Severely obese')]
     for top, status in top_status:
        if BMI <= top:
             put_markdown('# **Results**')
             put_text('Your BMI: %.1f. Category: %s' % (BMI, status))
             put_html('<br><br>')
             put_markdown('Your BMI: `%.1f`. Category: `%s`' % (BMI, status))
             put_html('<hr>')
             put_table([
                 ['Your BMI', 'Category'],
                 [BMI, status],
             ])
             break
        html = fig.to_html(include_plotlyjs="require", full_html=False) #convert your figure to  html format
        put_html(html)    
if __name__ == '__main__':
    pywebio.start_server(page, port=80) #local default port is 80

```

ทดลองรันโปรแกรมโดยใส่ คำสั่ง ตามนี้

```
python webBMI.py
```

เมื่อรันแล้วไปที่ Browser ใดก็ได้ ใส่ในช่อง url ว่า localhost โดยจาก code ที่รันมาเบื้องต้นจะกำหนด port ที่ใช้งานคือ 80 (default)  เว็บ browser จะแสดงให้ใส่ค่า input โดยเริ่มที่ค่า ส่วนสูง กด Submit แล้วใส่ค่า น้ำหนัก กด Submit&#x20;

![](https://lh5.googleusercontent.com/mopW8_ZIUjM4jGoj7ZdXt2l-Wcru-LLl5-E0mnbXvaxX4TOmZDMj7W2t2Sy-FbZlX_qPlZA63jjnA7ZuLgpgVnKK1xN5iLJs5ySQaLJ04-CeAoy7YrHXplKo0cgoyEZ_CpYvJFre)

![](https://lh4.googleusercontent.com/GFSEOqk0tIUEpxqMuB_mmCPaUb3dElOYJshg6g3HA3q-m85bbXDDDWK3SmLvk8zjWwPlkf933dFlS9T8atJOjEk8cqjEPF4w4mBXd5ws2o9RMZZJnK-Fx8KICwcC--mbNaW0m84W)

เมื่อใส่ค่าครบแล้วโปรแกรมจะแสดงผลการคำนวณค่า BMI

![](https://lh3.googleusercontent.com/mJbGEVv5b-o4UqcrJf11Mm93rKBnmfHYBsQ451cHULqrI2yKHIb48RW3-egH6sfm4sS7iRfwZDBrN7JekyAxAmZghfIeovahZlMKTL5dp3mvXlLNZYZHYLltT35aF86PubSovizr)

### **Plot bar graph**

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ

```python
animals=['giraffes', 'orangutans', 'monkeys']
 
fig = go.Figure(data=[
    go.Bar(name='SF Zoo', x=animals, y=[20, 14, 23]),
    go.Bar(name='LA Zoo', x=animals, y=[12, 18, 29])
])
 
fig.show()
```

จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังกราฟด้านล่าง

![](https://lh3.googleusercontent.com/NoDEJhK10S67_mso2fVk6CdBJrZ2ezOpcan8olMogO3whgeNm4nij_4XrRhZxgWsQCl08wL692EsJER23qRGV1SP0q-8rR1EXGt0Oubacj_Gr6zzhg3_ofmo-0aQ5Qlm_3ZiQ5Ha)

### Show your CSV in the table

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการแสดงผลค่าที่อยู่ใน csv ไฟล์ในรูปแบบของตาราง

สำหรับ library ที่ใช้ในการ plot ตารางมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นตาราง

```python
df = pd.read_csv('C:/Documents/PywebIO/dataset/move/move_2.csv')
fig = go.Figure(data=[go.Table(
    header=dict(values=list(df.columns),
                fill_color='paleturquoise', #set header color
                align='left'),
    cells=dict(values=[df.timestamp,df.acc_x, df.acc_y, df.acc_z], #add table element here
               fill_color='lavender', #set table color
               align='left'))
])
fig.show()
```

จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังเป็นตารางด้านล่าง

![](https://lh3.googleusercontent.com/rQW3EiHCzVTQibl60Nk_rGziC02B0zkYChYlqSx5p8hzE26vBZ_flXVJ_kqVEOuxRjG51iW8Z2wlbb-UN-zudo7KKdIrOyIN1UsTVJl3NVLk2_1t7paCewn321gxFxLppAcCyke0)

จากตารางด้านบนจะเห็นว่ามีค่าด้านหลังที่ยังไม่มีการใส่ค่าลงไป ให้แก้ไข code และเก็บภาพผลการรันใหม่อีกครั้งเพื่อให้ตารางเต็มครบถ้วน

กรอก code ที่แก้ไข

```
 
```

จากโค้ดด้านบนเมื่อทำการรันโปรแกรม python จะได้ผลดังเป็น ……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………

### **Plot graph with a CSV file**

สร้างไฟล์ python ใหม่ขึ้นมา1 ไฟล์เพื่อนำมาใส่ code สำหรับการ plot graph&#x20;

สำหรับ library ที่ใช้ในการ plot กราฟมีดังนี้

```python
import plotly.graph_objects as go
import pandas as pd
import numpy as np
```

ใส่ code ด้านล่างลงไปใน python ไฟล์โดย บรรทัดแรกนั้นจะเป็น path ของไฟล์ .csv ที่เราต้องการจะนำค่าด้านในออกมาพล๊อตเป็นกราฟ

```python
df = pd.read_csv('C:/Documents/PywebIO/dataset/move/move_1.csv')
fig = go.Figure()
 
# Add traces
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_x'],
                    mode='lines',
                    name='acc_x'))
fig.show()
```

จากโค้ดเมื่อทำการรันโปรแกรม python จะได้ผลดังกราฟด้านล่าง

![](https://lh6.googleusercontent.com/CkZvPB95WPf6YO12voCTkvQS_IDPIr2y0eeevzpDgOciQz5NdZV1HWS8LOVvYF-Ay3Hf0O8fQK3lifzFQwSf0TyWOc5ezageCTOfga8y6OWrYUw_92wdPg9tN3YjQfzOftF9hx1O)

เราสามารถเพิ่มกราฟ หลายเส้นเข้าไปได้ ตามตัวอย่างด้านล่าง

```python
# Add traces
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_x'],
                    mode='lines',
                    name='acc_x'))
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_y'],
                    mode='lines',
                    name='acc_y'))
fig.add_trace(go.Scatter(x=df['timestamp'], y=df['acc_z'],
                    mode='lines',
                    name='acc_z'))
fig.show()
```

ใส่ผลการพล๊อตจำนวนหลายเส้น

……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………………….……………………………………

Update: May 2023

Author: Thanaluk Pranekunakol (AIC-Researcher)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.aic-eec.com/embedded-systems/resources/iot-connectivity/lab-data-visualization.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.