enter image description here
Hello I have an issue with my chart it only fills up halfway.
The code is bellow and when I only update the temperature the graph will be okay and when I add the humidity the chart is only filling up halfway
// Declare chart variables
let temperatureChart;
let humidityChart;
// Function to create the temperature and humidity charts
function createCharts() {
const ctxTemp = document.getElementById('temperatureChart').getContext('2d');
const ctxHum = document.getElementById('humidityChart').getContext('2d');
// Create the temperature chart
temperatureChart = new Chart(ctxTemp, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Temperature (°C)',
data: [],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
fill: false,
tension: 0.4 // Smooth the line
},{
label: 'Humidity (%),
data: [],
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 2,
fill: false,
tension: 0.4 // Smooth the line
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Time'
}
},
y: {
min: 0, // Minimum value for temperature
max: 60, // Maximum value for temperature
title: {
display: true,
text: 'Temperature (°C)'
}
}
},
animation: {
duration: 0 // Disable animation to make it feel more real-time
}
}
});
// Create the humidity chart
humidityChart = new Chart(ctxHum, {
type: 'line',
data: {
labels: [],
datasets: [{
label: 'Humidity (%)',
data: [],
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 2,
fill: false,
tension: 0.4 // Smooth the line
}]
},
options: {
scales: {
x: {
title: {
display: true,
text: 'Time'
}
},
y: {
min: 0, // Minimum value for humidity
max: 100, // Maximum value for humidity
title: {
display: true,
text: 'Humidity (%)'
}
}
},
animation: {
duration: 0 // Disable animation to make it feel more real-time
}
}
});
}
// Function to update the charts with new data
function updateCharts(data) {
const currentTime = new Date().toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', second: '2-digit'}); // Get current time as "hh:mm:ss AM/PM"
// Update the display box with the latest data
document.getElementById('temperature').textContent = `${data.temperature}°C`;
document.getElementById('humidity').textContent = `${data.humidity}%`;
// Add the new data points to the charts
temperatureChart.data.labels.push(currentTime);
temperatureChart.data.datasets[0].data.push(data.temperature);
humidityChart.data.labels.push(currentTime);
humidityChart.data.datasets[0].data.push(data.humidity);
// Update the charts
temperatureChart.update();
humidityChart.update();
}
window.onload = function() {
createCharts();
setInterval(fetchData, 1000);
}
I am having a hard time solving this issue. I am sorry for the troubles