Add routes to get location and sensor by name
Added viewdata using chart.js
This commit is contained in:
newtbot
@ -1,7 +1,6 @@
|
||||
//getting button from DOM id
|
||||
const buttons = document.querySelectorAll(".button-container button");
|
||||
const queryButton = document.getElementById("querybutton-container");
|
||||
const ctx = document.getElementById("dataChart").getContext("2d");
|
||||
|
||||
$(document).ready(async function () {
|
||||
//https://stackoverflow.com/questions/9045868/javascript-date-getweek
|
||||
@ -12,143 +11,109 @@ $(document).ready(async function () {
|
||||
return Math.ceil(dayOfYear / 7);
|
||||
};
|
||||
let date = new Date();
|
||||
var week = date.getWeek();
|
||||
var week = date.getWeek() - 1; // Subtracting 1 to get the actual week number
|
||||
var today = date.getDate();
|
||||
var month = date.getMonth() + 1; // Adding 1 to get the actual month number
|
||||
var year = date.getFullYear();
|
||||
//year data
|
||||
app.api.get("sensor-data/data?year=" + year, function (error, data) {
|
||||
//console.log(data);
|
||||
});
|
||||
//monthly data
|
||||
app.api.get("sensor-data/data?month=" + month, function (error, data) {
|
||||
//console.log(data);
|
||||
});
|
||||
//weekly data
|
||||
app.api.get(
|
||||
"sensor-data/data?month=" + month + "&week=" + week,
|
||||
function (error, data) {
|
||||
//console.log(data);
|
||||
}
|
||||
);
|
||||
//daily data
|
||||
app.api.get(
|
||||
"sensor-data/data?month=" + month + "&week=" + week + "&day=" + today,
|
||||
function (error, data) {
|
||||
for (let rows of data) {
|
||||
console.log(rows);
|
||||
getDate(rows.CreatedAt);
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
// Initialize initialData for chart
|
||||
const initialData = {
|
||||
labels: [], // Array to store timestamps
|
||||
datasets: [
|
||||
{
|
||||
label: "Average MeasurementData",
|
||||
data: [], // Array to store measurements objects
|
||||
backgroundColor: "green",
|
||||
borderColor: "green",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function getDate(date){
|
||||
console.log(date);
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
(async function() {
|
||||
const data = [
|
||||
{ year: 2010, count: 10 },
|
||||
{ year: 2011, count: 20 },
|
||||
{ year: 2012, count: 15 },
|
||||
{ year: 2013, count: 25 },
|
||||
{ year: 2014, count: 22 },
|
||||
{ year: 2015, count: 30 },
|
||||
{ year: 2016, count: 28 },
|
||||
];
|
||||
|
||||
new Chart(
|
||||
document.getElementById('acquisitions'),
|
||||
{
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: data.map(row => row.year),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Acquisitions by year',
|
||||
data: data.map(row => row.count)
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
);
|
||||
})();
|
||||
*/
|
||||
// Initial dataset (AQI)
|
||||
const initialData = {
|
||||
//date and time
|
||||
labels: [ date.map(row => row.CreatedAt)],
|
||||
datasets:[
|
||||
{
|
||||
//data like psi
|
||||
label: "Average PSI Data",
|
||||
data: [],
|
||||
backgroundColor: "green",
|
||||
borderColor: "green",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
//setting chart
|
||||
const chart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: initialData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "HISTORICAL",
|
||||
},
|
||||
subtitle: {
|
||||
display: true,
|
||||
text: "Historic air quality graph for Singapore",
|
||||
},
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
callbacks: {
|
||||
label: function (tooltipItem, data) {
|
||||
const label = data.labels[tooltipItem.index];
|
||||
return label + ": " + data.datasets[0].data[tooltipItem.index];
|
||||
},
|
||||
// Create Chart.js chart
|
||||
const ctx = document.getElementById("DailyDataChart").getContext("2d");
|
||||
const chart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: initialData,
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: "Average measurement metric data by Hour",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.7,
|
||||
ticks: {
|
||||
autoSkip: true,
|
||||
},
|
||||
maxRotation: 0,
|
||||
minRotation: 0,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
title: {
|
||||
display: true,
|
||||
text: "Value",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// Function to update chart data based on button clicked
|
||||
function updateChart(metric) {
|
||||
const queryParams = `sensor-data/data?month=${month}&week=${week}&day=${today}`;
|
||||
app.api.get(queryParams, function (error, data) {
|
||||
// Clear previous data
|
||||
initialData.labels = []; //timestamp
|
||||
initialData.datasets[0].data = []; //measurement data dependinbg on metric
|
||||
|
||||
// Group data by hour and calculate average value
|
||||
const hourlyData = {};
|
||||
for (let row of data) {
|
||||
//each row contains a timestamp and measurement data of each sensor and location
|
||||
const createdAt = new Date(row.createdAt); //set to local time
|
||||
const hourString = new Date(
|
||||
createdAt.getFullYear(),
|
||||
createdAt.getMonth(),
|
||||
createdAt.getDate(),
|
||||
createdAt.getHours()
|
||||
).toISOString();
|
||||
if (!hourlyData[hourString]) {
|
||||
hourlyData[hourString] = [];
|
||||
}
|
||||
hourlyData[hourString].push(row.measurement[metric]); //pushing measurement data into hourlyData
|
||||
}
|
||||
|
||||
// Calculate average value for each hour
|
||||
//console.log(hourlyData); //24 values for each hour of the day
|
||||
for (let hourString in hourlyData) {
|
||||
const averageValue =
|
||||
hourlyData[hourString].reduce((acc, val) => acc + val, 0) /
|
||||
hourlyData[hourString].length;
|
||||
initialData.labels.push(
|
||||
new Date(hourString).toLocaleString("en-US", {
|
||||
timeZone: "UTC",
|
||||
hour12: false,
|
||||
})
|
||||
);
|
||||
initialData.datasets[0].data.push(averageValue);
|
||||
}
|
||||
|
||||
// Update chart
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
|
||||
// Event listeners for buttons
|
||||
document.getElementById("psiButton").addEventListener("click", function () {
|
||||
updateChart("psi");
|
||||
});
|
||||
|
||||
document.getElementById("tempButton").addEventListener("click", function () {
|
||||
updateChart("temperature");
|
||||
});
|
||||
|
||||
document.getElementById("humButton").addEventListener("click", function () {
|
||||
updateChart("humidity");
|
||||
});
|
||||
|
||||
document.getElementById("o3Button").addEventListener("click", function () {
|
||||
updateChart("o3");
|
||||
});
|
||||
|
||||
document.getElementById("no2Button").addEventListener("click", function () {
|
||||
updateChart("no2");
|
||||
});
|
||||
|
||||
document.getElementById("so2Button").addEventListener("click", function () {
|
||||
updateChart("so2");
|
||||
});
|
||||
|
||||
document.getElementById("coButton").addEventListener("click", function () {
|
||||
updateChart("co");
|
||||
});
|
||||
});
|
||||
|
||||
queryButton.addEventListener("click", (event) => {
|
||||
const clickedButton = event.target;
|
||||
//console.log(clickedButton.id);
|
||||
|
||||
//make it switch bar chart based on query button
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user