107 lines
3.4 KiB
JavaScript
107 lines
3.4 KiB
JavaScript
document.addEventListener("DOMContentLoaded", async function () {
|
|
console.log("DOM Loaded");
|
|
|
|
// Extract data from sensorData
|
|
const sensorData = JSON.parse('<%- JSON.stringify(sensorData) %>');
|
|
console.log("Sensor Data:", sensorData);
|
|
|
|
// Fetch location names from the server
|
|
const locationNames = await fetch('/api/locations') // Adjust the API endpoint
|
|
.then(response => response.json())
|
|
.then(data => data.map(location => ({ id: location.id, name: location.name })))
|
|
.catch(error => console.error('Error fetching location names:', error));
|
|
|
|
|
|
|
|
// Group sensorData by locationid
|
|
const groupedData = groupBy(sensorData, 'locationid');
|
|
|
|
// Get the content div
|
|
const contentDiv = document.getElementById('content');
|
|
|
|
// Create a chart for each location
|
|
Object.keys(groupedData).forEach(locationId => {
|
|
const locationData = groupedData[locationId];
|
|
|
|
// Find the corresponding location name
|
|
const locationName = locationNames.find(location => location.id === parseInt(locationId, 10))?.name || `Unknown Location ${locationId}`;
|
|
|
|
// Create a container for the chart
|
|
const container = document.createElement('div');
|
|
container.className = 'chart-container';
|
|
|
|
// Create a title for the container with location name
|
|
const title = document.createElement('h4');
|
|
title.textContent = `Location: ${locationName}`;
|
|
container.appendChild(title);
|
|
|
|
// Get labels (Location IDs)
|
|
const labels = locationData.map(data => new Date(data.createdAt).toLocaleString('en-US', { timeZone: 'Asia/Singapore' }));
|
|
|
|
// Create datasets for each measurement
|
|
const datasets = [
|
|
{
|
|
label: 'CO',
|
|
data: locationData.map(data => data.measurement.co),
|
|
backgroundColor: 'rgba(255, 99, 132, 0.5)', // Red color
|
|
},
|
|
{
|
|
label: 'O3',
|
|
data: locationData.map(data => data.measurement.o3),
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)', // Blue color
|
|
},
|
|
{
|
|
label: 'NO2',
|
|
data: locationData.map(data => data.measurement.no2),
|
|
backgroundColor: 'rgba(255, 206, 86, 0.5)', // Yellow color
|
|
},
|
|
{
|
|
label: 'SO2',
|
|
data: locationData.map(data => data.measurement.so2),
|
|
backgroundColor: 'rgba(75, 192, 192, 0.5)', // Green color
|
|
},
|
|
];
|
|
|
|
// Create a canvas element for each location
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 400;
|
|
canvas.height = 200;
|
|
|
|
// Append canvas to the container
|
|
container.appendChild(canvas);
|
|
|
|
// Append container to the content div
|
|
contentDiv.appendChild(container);
|
|
|
|
// Create a bar chart for each location
|
|
const ctx = canvas.getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: datasets,
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true,
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
});
|
|
|
|
// Helper function to group data by a specified key
|
|
function groupBy(arr, key) {
|
|
return arr.reduce((acc, obj) => {
|
|
const groupKey = obj[key];
|
|
acc[groupKey] = acc[groupKey] || [];
|
|
acc[groupKey].push(obj);
|
|
return acc;
|
|
}, {});
|
|
}
|
|
});
|
|
|