Preliminary I am quite new to JS and php (since Monday). I have a database where I store data at certain time intervals. With chart.js I want to visualize this data, static no problem:
<?php
$username = "root";
$password = "_!Stud3nt&";
$database = "datalog";
try {
$pdo = new PDO("mysql:host=localhost;database=$database", $username, $password);
//SET the PDO error mode to exception
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
die("ERROR: could not connect. " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style/style.css">
<title>ems</title>
<style type="text/css">
.chartBox {
width: 700px;
}
</style>
</head>
<body>
<canvas id="myChart"></canvas>
<?php
//Attempt select query execution
try{
$sql = "SELECT * FROM datalog.day_avg ORDER BY dateavg DESC LIMIT 7";
$result = $pdo->query($sql);
if($result->rowCount() > 0){
$druck = array();
$volumenstrom = array();
$spannung = array();
while($row=$result->fetch()){
$druck[] = $row ["avg_druck"];
$volumenstrom[] = $row ["avg_volumenstrom"];
$spannung[] = $row ["avg_spannung_quelle"];
}
unset($result);
}else{
echo "No records matching your query were found.";
}
}catch(PDOException $e){
die("ERROR: Not able to execute $sql.".$e->getMessage());
}
//Close connection
unset($pdo);
?>
<div class="chartBox">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
<script> </script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
//Setup Block
const druck = <?php echo json_encode ($druck); ?>;
const volumenstrom = <?php echo json_encode ($volumenstrom); ?>;
const spannung = <?php echo json_encode ($spannung); ?>;
const data = {
labels: ['t-8', 't-7', 't-6', 't-5', 't-4', 't-3', 't-2', 't-1'],
datasets: [{
label: 'Druck in bar',
data: druck,
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
},{
label: 'Volumenstrom in l/min',
data: volumenstrom,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
},{
label: 'Spannung in V',
data: spannung,
backgroundColor: 'rgba(255, 206, 86, 0.2)',
borderColor: 'rgba(255, 206, 86, 1)',
borderWidth: 1
}]
};
//Config Block
const config = {
type: 'line',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};
//Render Block
const myChart = new Chart(
document.getElementById('myChart'),
config
);
</script>
</body>
</html>
But how is it possible to make the display dynamic with a few simple steps, e.g. that the graph is updated every second?
Because of the animation, the meta-tag doesn't seem to me to be such a good solution.
<meta http-equiv="refresh" content="5">
Thank you in advance
