148 lines
4.3 KiB
PHP
148 lines
4.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
<title>Line Chart with Time Filter</title>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container mt-4">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<select id="timeInterval" class="form-control">
|
|
<option value="5">5 Minutes</option>
|
|
<option value="60">1 Hour</option>
|
|
<option value="1440">1 Day</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<canvas id="lineChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<select id="timeInterval2" class="form-control">
|
|
<option value="5">5 Minutes</option>
|
|
<option value="60">1 Hour</option>
|
|
<option value="1440">1 Day</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<canvas id="lineChart2"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
|
|
|
|
<!-- Custom script -->
|
|
<script>
|
|
$(document).ready(function() {
|
|
function generateXLabels(interval) {
|
|
var now = new Date();
|
|
var labels = [];
|
|
for (var i = -6; i <= 0; i++) {
|
|
var date = new Date(now);
|
|
date.setMinutes(now.getMinutes() + i * interval);
|
|
var timeString = ('0' + date.getHours()).slice(-2) + ':' + ('0' + date.getMinutes()).slice(-2);
|
|
var dateString = ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2);
|
|
var label = timeString + '\n' + dateString;
|
|
labels.push(label);
|
|
}
|
|
return labels;
|
|
}
|
|
|
|
var initialData = {
|
|
labels: generateXLabels(5),
|
|
datasets: [{
|
|
label: '',
|
|
data: [0, 10, 20, 30, 20, 10, 0],
|
|
backgroundColor: 'transparent',
|
|
borderColor: 'rgba(75, 192, 192, 1)',
|
|
borderWidth: 1,
|
|
fill: false
|
|
}]
|
|
};
|
|
|
|
var chartOptions = {
|
|
type: 'line',
|
|
data: initialData,
|
|
options: {
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
display: true,
|
|
grid: {
|
|
display: false
|
|
}
|
|
},
|
|
y: {
|
|
display: true,
|
|
beginAtZero: false,
|
|
ticks: {
|
|
min: -30,
|
|
max: 30,
|
|
stepSize: 10
|
|
}
|
|
}
|
|
},
|
|
elements: {
|
|
point: {
|
|
radius: 0
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
var ctx1 = document.getElementById('lineChart').getContext('2d');
|
|
var lineChart1 = new Chart(ctx1, chartOptions);
|
|
|
|
var ctx2 = document.getElementById('lineChart2').getContext('2d');
|
|
var lineChart2 = new Chart(ctx2, chartOptions);
|
|
|
|
// Event for the first chart
|
|
$('#timeInterval').change(function() {
|
|
var interval = $(this).val();
|
|
var newLabels = generateXLabels(interval);
|
|
var newData = new Array(7).fill(null).map(() => Math.random() * 60 - 30);
|
|
|
|
lineChart1.data.labels = newLabels;
|
|
lineChart1.data.datasets[0].data = newData;
|
|
lineChart1.update();
|
|
});
|
|
|
|
// Event for the second chart
|
|
$('#timeInterval2').change(function() {
|
|
var interval = $(this).val();
|
|
var newLabels = generateXLabels(interval);
|
|
var newData = new Array(7).fill(null).map(() => Math.random() * 60 - 30);
|
|
|
|
lineChart2.data.labels = newLabels;
|
|
lineChart2.data.datasets[0].data = newData;
|
|
lineChart2.update();
|
|
});
|
|
|
|
// Trigger initial update for both charts
|
|
$('#timeInterval').change();
|
|
$('#timeInterval2').change();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|