-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
56 lines (53 loc) · 1.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Visualisation</title>
<link rel="stylesheet" href="style.css" />
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- <div id="bar-chart"></div>
<div id="pie-chart"></div>
<div class="tooltip" id="tooltip" style="display: none;"></div>
<div class="legend" id="bar-legend"></div>
<div class="legend" id="pie-legend"></div> -->
<div class="style-title">Line Chart for temperature and brightness against time</div>
<canvas id="line-chart"></canvas>
<script>
new Chart(document.getElementById("line-chart"), {
type : 'line',
data : {
labels : ["2023-10-31T12:34:05Z","2023-10-31T12:33:05Z","2023-10-31T12:32:04Z","2023-10-31T12:31:04Z","2023-10-31T12:30:05Z","2023-10-31T12:29:05Z","2023-10-31T12:28:05Z","2023-10-31T12:27:04Z","2023-10-31T12:26:04Z","2023-10-31T12:25:05Z"],
datasets : [
{
data : [21.9,23,22,21.4,21.5,21.7,22.5,23.2,22.4,23.7],
label : "temperature",
color: "",
borderColor : "#3cba9f",
fill : false
},
{
data :[229,237,240,239,235,233,232,234,234,239],
label : "brightness",
color:"",
borderColor : "#3469c2",
fill : false
}]
},
options : {
title : {
display : true,
text : 'Chart JS Line Chart Example'
}
}
});
</script>
<br/>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="main.js"></script>
</body>
</html>