Custom pages problem
Posted: Friday 27 December 2024 23:07
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Energy Prices Staafdiagram</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50; /* Groene achtergrondkleur */
color: white; /* Witte tekstkleur */
}
</style>
<!-- Verwijzing naar de Chart.js bibliotheek via een CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Energy Prices Staafdiagram</h1>
<canvas id="energyPricesChart" width="400" height="200"></canvas>
<script>
document.addEventListener('DOMContentLoaded', function() {
const labels = ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"];
const data = {
labels: labels,
datasets: [{
label: 'Eneco',
data: [0.278666, 0.270063, 0.269518, 0.263504, 0.264993, 0.270111, 0.27483, 0.29131, 0.299248, 0.298098, 0.292073, 0.283312, 0.285369, 0.280759, 0.287704, 0.301148, 0.310719, 0.321899, 0.322081, 0.319249, 0.311287, 0.301269, 0.304475, 0.296586],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
};
const config = {
type: 'bar',
data: data,
options: {
scales: {
x: {
title: {
display: true,
text: 'Tijd'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'Prijs'
}
}
}
}
};
const ctx = document.getElementById('energyPricesChart').getContext('2d');
new Chart(ctx, config);
});
</script>
</body>
</html>
However when placed in ~/domoticz/www/templates it shows the header and nothing else.
How come?
How to resolve it.
Is there something domoticz which stops the script?