-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathClarity_Graph_1.html
80 lines (70 loc) · 2.25 KB
/
Clarity_Graph_1.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NO2 Concentration Chart</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<script>
getSensorData("DUQNX2363"); // sensor index = 811 Smith Rd
function getSensorData(data_source_ids) {
let my_api_read_key = 'u7JGpnsQK9pM6XO52v5gxiP63j7EYUTw0nZzMsk5';
let my_org = 'acterra';
let my_url = 'https://clarity-data-api.clarity.io/v2/recent-datasource-measurements-query';
fetch(my_url, {
method: "POST",
body: JSON.stringify({
"org": my_org,
"datasourceIds": [data_source_ids],
"outputFrequency": "hour"
}),
headers: {
"x-api-key": my_api_read_key,
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(results => {
const no2Measurements = results.data
.filter(data => data.metric === 'no2Conc1HourMean')
.map(data => [new Date(data.time).getTime(), data.value]);
renderChart(no2Measurements);
})
.catch(error => {
console.error('Error fetching sensor data:', error);
});
}
function renderChart(data) {
Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: 'NO2 Concentration Over Time'
},
xAxis: {
type: 'datetime',
title: {
text: 'Time'
}
},
yAxis: {
title: {
text: 'NO2 Concentration (µg/m³)'
}
},
series: [{
name: 'NO2 Concentration',
data: data
}]
});
}
// Call the function with your data source ID
getSensorData('DUQNX2363');
</script>
</body>
</html>