-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathchartjs.html
145 lines (127 loc) · 4.77 KB
/
chartjs.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!doctype html>
<html lang="en">
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script>
const ctx = document.getElementById('myChart');
function get_start_date() {
// Create a new Date object for today
const today = new Date();
// Subtract seven days from today
const oneWeekEarlier = new Date(today);
oneWeekEarlier.setDate(today.getDate() - 14);
// Get the year, month, and day of the oneWeekEarlier date
const year = oneWeekEarlier.getFullYear();
// JavaScript months are zero-based, so we add 1 to get the correct month
const month = (oneWeekEarlier.getMonth() + 1).toString().padStart(2, '0');
const day = oneWeekEarlier.getDate().toString().padStart(2, '0');
// Format the date as desired (e.g., YYYY-MM-DD)
const formattedDate = `${year}-${month}-${day}`;
return formattedDate;
}
function get_elements(observation) {
const variables = {};
console.log(observation)
// Iterate over the keys in the data object
Object.keys(observation).forEach(key => {
// Exclude "station" and "datetime" keys
if (key !== "station" && key !== "datetime") {
// Extract variable name by removing units and sensor information
const variableName = key.split(" @ ")[0].split(" [")[0];
// Store the variable name as a key in the variables object to ensure uniqueness
variables[variableName] = true;
}
});
// Return an array containing the unique variable names
return Object.keys(variables);
}
async function get_station_data(date_start, station) {
try {
const response = await fetch(
"https://mesonet.climate.umt.edu/api/observations/hourly?" + new URLSearchParams({
start_time: date_start,
stations: station,
elements: "air_temp,ppt,soil_vwc,soil_temp",
units: "us",
type: "json",
premade: true,
rm_na: true
})
)
const data = await response.json();
console.log(data);
return data;
} catch (error) {
console.error(`Error fetching ${station}'s data starting on ${date_start}.`);
}
}
const date_start = get_start_date();
const station = new URLSearchParams(window.location.search).get('station');
// Plot chart function
function plotChart(data) {
const labels = data.map(item => item.datetime);
const temperatures = data.map(item => item["Air Temperature @ 8 ft [°F]"]);
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Temperature',
data: temperatures,
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'xy' // enable panning in both x and y directions
},
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true,
}
}
},
title: {
display: true,
text: `${date_start} to Present Air Temperature at ${station}`
}
}
}
});
}
// Main function to fetch data and plot chart
async function fetchDataAndPlotChart() {
try {
const data = await get_station_data(date_start, station);
console.log(get_elements(data[0]))
plotChart(data);
} catch (error) {
console.error('Error:', error);
}
}
// Call the main function to fetch data and plot chart
fetchDataAndPlotChart();
</script>
</html>