In some browser canvas are not visible. Appear for one seconds and then disappear. Im going mad. What´s wrong? If i disable the second one the first one is visible.
There is a solution about it? I have also a data.php where i have a script to send data with response json, it also strange that on MacOS with Chrome works and with Chrome on Windows in some device works and in other device doesnt work. Edge works.
document.addEventListener('DOMContentLoaded', function () {
const charts = [];
function createOrUpdateChart(ctx, chartData) {
if (charts[ctx.canvas.id]) {
charts[ctx.canvas.id].data = chartData;
charts[ctx.canvas.id].update();
} else {
charts[ctx.canvas.id] = new Chart(ctx, {
type: 'pie',
data: chartData,
options: {
scales: {
y: {
display: false // Hide Y axis
}
},
plugins: {
legend: {
display: true // Show legend
}
},
maintainAspectRatio: true,
animation: false,
responsive: true,
width: 200,
height: 200,
}
});
}
}
function createOrUpdateChart2(ctxVM, chartDataVM) {
if (charts[ctxVM.canvas.id]) {
charts[ctxVM.canvas.id].data = chartDataVM;
charts[ctxVM.canvas.id].update();
} else {
charts[ctxVM.canvas.id] = new Chart(ctxVM, {
type: 'pie',
data: chartDataVM,
options: {
scales: {
y: {
display: false // Hide Y axis
}
},
plugins: {
legend: {
display: true // Show legend
}
},
maintainAspectRatio: true,
animation: false,
responsive: true,
width: 200,
height: 200,
}
});
}
}
document.addEventListener('DOMContentLoaded', function () {
const canvases = document.querySelectorAll('canvas[id^="chart"]');
canvases.forEach((canvas, index) => {
if (index % 2 === 0) {
const canvasTitle = document.createElement('h2');
canvasTitle.textContent = 'Produktion';
canvasTitle.style.textAlign = 'center';
canvasTitle.style.width = '100%';
canvasTitle.style.position = 'absolute';
canvasTitle.style.top = '5%';
canvasTitle.style.right = '26%';
canvasTitle.style.zIndex = '1';
canvas.parentNode.style.position = 'relative';
canvas.parentNode.appendChild(canvasTitle);
} else {
const canvasTitle = document.createElement('h2');
canvasTitle.textContent = 'Vormontage';
canvasTitle.style.textAlign = 'center';
canvasTitle.style.width = '100%';
canvasTitle.style.position = 'absolute';
canvasTitle.style.top = '5%';
canvasTitle.style.left = '26%';
canvasTitle.style.zIndex = '1';
canvas.parentNode.style.position = 'relative';
canvas.parentNode.appendChild(canvasTitle);
}
});
});
function updateData() {
fetch('data.php')
.then(response => response.json())
.then(data => {
const { box_titles, box_titles_vm, gesamt, checklistItemsTotals, finishedDescriptionVM, updatedGesamtVM, boardStatus } = data;
box_titles.forEach((title, index) => {
document.getElementById(`title${index + 1}`).innerText = `${title}`;
});
checklistItemsTotals.forEach((total, index) => {
const ctx = document.getElementById(`chart${index + 1}`).getContext('2d');
Chart.defaults.font.size = 22;
const chartData = {
labels: [
`Fehlt ${gesamt[index]}`,
`Erledigt ${total}`
],
datasets: [{
label: 'Value',
data: [
gesamt[index],
total
],
backgroundColor: [
'rgba(255, 0, 0, 1)',
'rgba(60, 191, 20, 1)'
],
borderColor: [
'rgba(0, 0, 0, 1)',
'rgba(0, 0, 0, 1)'
]
}]
};
createOrUpdateChart(ctx, chartData);
});
finishedDescriptionVM.forEach((total, index) => {
const ctxVM = document.getElementById(`chart${index + 1}_copy`).getContext('2d');
Chart.defaults.font.size = 22;
const chartDataVM = {
labels: [
`Fehlt ${updatedGesamtVM[index]}`,
`Erledigt ${total}`
],
datasets: [{
label: 'Value',
data: [
updatedGesamtVM[index],
total
],
backgroundColor: [
'rgba(255, 0, 0, 1)',
'rgba(60, 191, 20, 1)'
],
borderColor: [
'rgba(0, 0, 0, 1)',
'rgba(0, 0, 0, 1)'
]
}]
};
createOrUpdateChart2(ctxVM, chartDataVM);
});
const boardStatusContainer = document.getElementById('boardStatus');
boardStatusContainer.innerHTML = '';
boardStatus.forEach((board, index) => {
const boardElement = document.createElement('div');
boardElement.className = 'board';
const boardNumberElement = document.createElement('div');
boardNumberElement.innerText = `BOARD #${index + 1}`;
boardNumberElement.className = 'board-number';
boardElement.appendChild(boardNumberElement);
let statusText = '';
if (board.status === 'besetzt') {
statusText = 'BESETZT';
} else if (board.status === 'frei') {
statusText = 'FREI';
} else if (board.status === 'bestellung_erledigt') {
statusText = 'ERLEDIGT';
}
const statusTextElement = document.createElement('div');
statusTextElement.className = 'status-text';
statusTextElement.innerText = statusText;
const statusDotElement = document.createElement('div');
statusDotElement.className = 'status-dot';
const containerElement = document.createElement('div');
containerElement.className = 'status-container';
containerElement.appendChild(statusTextElement);
let statusDotColorClass = '';
if (board.status === 'besetzt') {
statusDotColorClass = 'board-dot-red';
} else if (board.status === 'frei') {
statusDotColorClass = 'board-dot-green';
} else if (board.status === 'bestellung_erledigt') {
statusDotColorClass = 'board-dot-blue';
}
statusDotElement.classList.add(statusDotColorClass);
statusTextElement.appendChild(statusDotElement);
boardElement.appendChild(containerElement);
boardStatusContainer.appendChild(boardElement);
});
});
}
setInterval(updateData, 10000);
window.onload = updateData;
New contributor
Mirko Genovese is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.