jilo-web/app/helpers/graph.php

127 lines
4.0 KiB
PHP
Raw Normal View History

2024-10-09 12:56:51 +00:00
<div style="position: relative; width: 800px; height: 400px;">
2024-10-10 08:31:05 +00:00
<div id="current-period-<?= $data['graph_name'] ?>" style="text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 10; font-size: 14px; background-color: rgba(255, 255, 255, 0.7);"></div>
<canvas id="graph_<?= $data['graph_name'] ?>" style="margin-top: 20px; margin-bottom: 50px;"></canvas>
2024-10-09 12:56:51 +00:00
</div>
<script>
2024-10-10 08:31:05 +00:00
var ctx = document.getElementById('graph_<?= $data['graph_name'] ?>').getContext('2d');
var chartData0 = <?php echo json_encode($data['data0']); ?>;
var chartData1 = <?php echo json_encode($data['data1']); ?>;
var timeRangeName = '';
2024-10-09 12:56:51 +00:00
var labels = chartData0.map(function(item) {
return item.date;
});
var values0 = chartData0.map(function(item) {
return item.value;
});
var values1 = chartData1.map(function(item) {
return item.value;
});
2024-10-10 08:31:05 +00:00
var graph_<?= $data['graph_name'] ?> = new Chart(ctx, {
2024-10-09 12:56:51 +00:00
type: 'line',
data: {
labels: labels,
datasets: [
{
2024-10-10 08:31:05 +00:00
label: '<?= $data['graph_data0_label'] ?? '' ?>',
2024-10-09 12:56:51 +00:00
data: values0,
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
fill: false
},
{
2024-10-10 08:31:05 +00:00
label: '<?= $data['graph_data1_label'] ?? '' ?>',
2024-10-09 12:56:51 +00:00
data: values1,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}
]
},
options: {
layout: {
padding: {
top: 30
}
},
scales: {
x: {
type: 'time',
time: {
unit: 'day'
}
},
y: {
beginAtZero: true
}
},
plugins: {
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
2024-10-10 08:31:05 +00:00
// enabled: true,
mode: 'x',
drag: {
enabled: true, // Enable drag to select range
borderColor: 'rgba(255, 99, 132, 0.3)',
borderWidth: 1
},
onZoom: function({ chart }) {
propagateZoom(chart); // Propagate the zoom to all graphs
}
2024-10-09 12:56:51 +00:00
}
},
legend: {
position: 'bottom',
labels: {
boxWidth: 20,
2024-10-10 08:31:05 +00:00
padding: 10
}
},
title: {
display: true,
text: '<?= $data['graph_title'] ?>',
font: {
size: 16,
weight: 'bold'
},
padding: {
bottom: 10
2024-10-09 12:56:51 +00:00
}
}
}
}
});
2024-10-10 08:31:05 +00:00
// Store the graphs in an array
graphs.push({
graph: graph_<?= $data['graph_name'] ?>,
label: document.getElementById('current-period-<?= $data['graph_name'] ?>')
});
2024-10-09 12:56:51 +00:00
2024-10-10 08:31:05 +00:00
// Update the time range label
function updatePeriodLabel(chart, labelElement) {
2024-10-09 12:56:51 +00:00
var startDate = chart.scales.x.min;
var endDate = chart.scales.x.max;
2024-10-10 08:31:05 +00:00
if (timeRangeName == 'today') {
labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ')';
} else {
labelElement.innerHTML = 'Currently displaying: ' + timeRangeName + ' (' + new Date(startDate).toLocaleDateString() + ' - ' + new Date(endDate).toLocaleDateString() + ')';
}
2024-10-09 12:56:51 +00:00
}
2024-10-10 08:31:05 +00:00
// Attach the update function to the 'zoom' event
graph_<?= $data['graph_name'] ?>.options.plugins.zoom.onZoom = function({ chart }) {
updatePeriodLabel(chart, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
2024-10-09 12:56:51 +00:00
};
// Update the label initially when the chart is rendered
2024-10-10 08:31:05 +00:00
updatePeriodLabel(graph_<?= $data['graph_name'] ?>, document.getElementById('current-period-<?= $data['graph_name'] ?>'));
2024-10-09 12:56:51 +00:00
</script>