## 撰寫HTML/CSS/JAVASCRIPT
### HTML
這裏我們會簡單的給大家一個模板可以使用
```html=
<!DOCTYPE HTML>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="topnav">
<h1>ESP WEB SERVER GAUGES</h1>
</div>
<div class="content">
<div class="card-grid">
<div class="card">
<div id="TemperatureChart"></div>
</div>
<div class="card">
<div id="HumidityChart"></div>
</div>
</div>
</div>
<div id = "TemperatureChart"></div>
<div class="footer">
<p>ESP IOT DASHBOARD</p>
<script src="script.js"></script>
</body>
</html>
```
### CSS
```css=
html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
p {
font-size: 1.4rem;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
/*background-image : url("https://static.gltjp.com/glt/prd/data/article/21000/20453/20231015_020307_a16455a9_w1920.jpg");
background-size : cover;*/
margin: 0;
}
.content {
padding: 5%;
}
.card-grid {
max-width: 80%;
min-width: 400px;
min-height: 300px;
max-height: 500px;
height: auto;
margin: auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.card {
position : relative;
background-color: rgb(255, 255, 255);
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
border-radius: 7.5px;
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: #034078
}
```
## javascript
## 什麼是 CanvasJS
- CanvasJS 是一個流行的 JavaScript 圖表庫，可以在網頁上創建各種類型的互動性圖表和資料視覺化，它具有強大的功能和穩定的性能。
---
## 開始使用CanvasJS
首先要像引入CSS 一樣引入這個library
```
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
```
接著，要先在html裡宣告一個可以顯示圖表的地方(記得放在body裡面!!)
```
<body>
<div id="MyChart"></div>
<body>
```
接著就可以開始製作圖表啦
---
這裡我們先宣告一個新的表格叫做myChart，然後對他做初始設置
(是用json型式資料)
```
//用id去取得div
var myChart = new CanvasJS.Chart("MyChart", {
//圖表的標題
title: {
text: "學業成績"
},
//圖表的每個數據的內容
data: [{
type: "bar",
dataPoints: [
{ label: '微積分', y: 65 },
{ label: '工程數學', y: 70 },
{ label: '計算機概論', y: 72 }
]
}]
});
//更新圖表
myChart.render();
```
---
其實呢除了柱狀圖(Bar chart)以外CanvaJS還可以做許多不同的圖表
像是折線圖(Line Chart) , 圓餅圖(Pie Chart)...
有了CanvasJS後，要做出精美的統計圖表就不再是一件難事了!
---
接下來就可以開始寫我們final project會用到的線段圖了!
---
首先我們先創一個長度為60的陣列，每個陣列有x與y值
x 是時間 y 是濕度 但目前沒有數據
```
var humidity = 0;
var Humidity_dataPoints = Array.from({length: 60}, (_, i) => {
var date = new Date();
date.setSeconds(date.getSeconds() - (60 - i));
return { x: date, y: humidity };
});
```
接著就可以創建圖表了!
在上面我們創建 bar chart 的時候原本是在dataPoints 一個一個放，但在這裡我們預先創建了一個陣列，所以可以直接把每個位置的數值放入。
```
var date = new Date();
date.setSeconds(date.getSeconds() - (60 - i));
return { x: date, y: humidity };
});
var Humidity_chart = new CanvasJS.Chart("HumidityChart",
{
title: {
text: "Humidity"
},
// 線段圖的x軸
axisX: {
interval: 1,
intervalType: "minute",
valueFormatString: "hh:mm"
},
data: [
{
//是線段的圖表種類
type: "line",
//x軸的種類是dateTime
xValueType: "dateTime",
dataPoints: Humidity_dataPoints//這裡直接將陣列丟進去！！！
}
]
});
Humidity_chart.render();
```
---
再用setInterval 每一秒鐘更新一次數據
```
setInterval(function () {//用setInterval 重複執行
// 得到現在的時間
var currentDate = new Date();
// 增加新的數據點
Humidity_dataPoints.push({ x: currentDate, y: humidity });
// 超過長度則刪除最舊的數據點
if (Humidity_dataPoints.length > 62) {
Humidity_dataPoints.shift();
}
// 更新圖表
Humidity_chart.render();
}, 1000);// 每一秒鐘更新一次
```
---
#### 溫度的圖表也是一樣的操作，但要記得將名字區分
```
var temperature = 0;
var Temperature_dataPoints = Array.from({ length: 60 }, (_, i) => {
var date = new Date();
date.setSeconds(date.getSeconds() - (60 - i));
return { x: date, y: temperature };
});
var Temperature_chart = new CanvasJS.Chart("TemperatureChart",
{
title: {
text: "Temperature"
},
axisX: {
interval: 1,
intervalType: "minute",
valueFormatString: "hh:mm"
},
data: [
{
type: "line",
xValueType: "dateTime",
dataPoints: Temperature_dataPoints
}
]
});
Temperature_chart.render();
setInterval(function () {
var currentDate = new Date();
temperature = Math.floor(Math.random() * 100);
Temperature_dataPoints.push({ x: currentDate, y: temperature });
if (Temperature_dataPoints.length > 62) {
Temperature_dataPoints.shift();
}
Temperature_chart.render();
}, 1000);
```
Sign in with Wallet
Connect another wallet