Forum : Chart.JS, labels et requête MySQL, page web

Bonjour, je suis en train d'essayer (avec beaucoup de difficultés) de créer une page web qui afficherait des données (issues de mesure sur une ruche stockées dans une base de données MySQL sur Raspberry).

J'ai actuellement sur un Raspberry une base de donnée qui stocke le poids de ma ruche toutes les 3 mn, j'ai réussi à créer un graphe avec ChartJS qui affiche le poids dans le temps.

mais pour y parvenir j'ai du rentrer en dur les labels et les data à l'aide de ce code :

"
<?php /* signale à la page html que l'on passe en php

$NB_donnees=10; // nombre de données que je veux exploiter

$ruche="ruche5"; /numéro de la ruche
try { //bloc try
$dbh = new PDO($dsn, $user, $password,[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]); //connexion à la base
}
catch (PDOException $e) { // si erreur on rentre ici
echo 'Connexion échouée : ' . $e->getMessage(); // affiche le message Connexion échouée
}

$reponse = $dbh->query("SELECT * FROM ".$ruche." ORDER By stamp DESC LIMIT ".$NB_donnees); // lance une requete sur le nom de table contenu dans la variable ruche pour obtenir les X dernieres données (X = variable NB_donnees)

echo '<table>';
echo '<tr><th>Heure</th><th>Hygrométrie</th><th>Température exterieur</th><th>Température interieur</th><th>Masse</th><th>Luminosité</th><th>Pluie (0 si oui)</th></tr>';
// affiche les titres des données

$tab_mas = array();
$tab_stamp = array();
while ($donnees = $reponse->fetch())
{
echo '<tr><th>'.$donnees['stamp'].'</th><th>'.$donnees['hyg'].'%</th><th>'.$donnees['tex'].'°C</th><th>'.$donnees['tin'].'°C</th><th>'.$donnees['mas'].'Kg</th><th>'.$donnees['lum'].'%</th><th>'.$donnees['eau'].'</th></tr>';
// affiche la page avec les X lignes

$tab_mas[] = $donnees['mas'];
$tab_stamp[] = $donnees['stamp'];

}
echo '</table>';

$reponse->closeCursor();
// fin du code php
?>

labels = [ '<?= $tab_stamp[9]?>', '<?= $tab_stamp[8]?>', '<?= $tab_stamp[7]?>', '<?= $tab_stamp[6]?>', '<?= $tab_stamp[5]?>', '<?= $tab_stamp[4]?>', '<?= $tab_stamp[3]?>', '<?= $tab_stamp[2]?>', '<?= $tab_stamp[1]?>', '<?= $tab_stamp[0]?>', ];

data = {
labels: labels,
datasets: [{
label: '<?= $ruche?>',
backgroundColor: "green",
borderColor: "blue",
data: [<?= $tab_mas[9]?>, <?= $tab_mas[8]?>, <?= $tab_mas[7]?>, <?= $tab_mas[6]?>, <?= $tab_mas[5]?>, <?= $tab_mas[4]?>,<?= $tab_mas[3]?>,<?= $tab_mas[2]?>,<?= $tab_mas[1]?>,<?= $tab_mas[0]?>,],
}]
};

const config = {
type: 'line', // type de graphisme ligne
data: data,

options: {
plugins: {
title: { // titre graphisme
display: true,
text: 'Poids'
}, //fin du titre
subtitle: { // sous titre graphisme
display: true,
text: '<?= $ruche?>'
}, // fin du sous titre
}, // fin des plugins

responsive: true,
scales: { // les axes
x: { // Axe X
display: true, // autorise l'affichage d'un texte pour l'axe X
title: {
display: true,
text: 'Temps', // titre de l'axe X
color: '#911', // couleur de l'axe X
font: { // police de caractére de l'axe X
family: 'Comic Sans MS',
size: 20, // taille des caractères de l'axe X
weight: 'bold', // écriture en gras
lineHeight: 1.2,
}, // fin de la police de caractère des X
padding: {top: 20, left: 0, right: 0, bottom: 0} // position de l'axe X
} // fin du titre X
}, // fin de l'axe X
y: {
display: true,
title: {
display: true,
text: 'Kg', // titre de l'axe Y
color: '#191', // couleur de l'axe Y
font: { // police de caractère de l'axe Y
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
}, // fin de la police de caractére des Y
padding: {top: 30, left: 0, right: 0, bottom: 0} // position de l'axe Y
} // fin du titre Y

        }   //fin de l'axe Y

                } //fin des échelles
            }   // fin des options

        };  //fin de config

</script>

      /*Le contexte du canevas HTML */
    context = document.getElementById('myChart').getContext("2d");
    /* Création du graphique */
    chart = new Chart(context, config);

</script>
"
Mon problème actuel est que je souhaiterais pouvoir rempli les labels et les data sans être obligé de taper toutes les variables (ici les 10 dernières acquise car il faut changer le code à chaque fois si on veut plus ou moins afficher de valeurs...)

Je ne sais pas si je suis très clair : j'aimerais pouvoir automatiser le remplissage des label et de data en fonction de la variable $NB_donnees et pas taper [0],[1],...[9] ou +

J'ai essayé ceci sur les labels : (je n'ai pas essayé sur les data, mais je suppose que cela sera le même problème)

J'ai mis x de 0 à 10 pour voir si cela fonctionnait (ce qui n'est pas le cas) mais j'aurais aimé faire de 0 à $NB_donnees
"
<script>

for (let x = 0; x <10; x++){labels = ['<?= $tab_stamp[x]?>',];}

const config = {
type: 'line', // type de graphisme ligne
data: data,

responsive: true,
scales: { // les axes
x: { // Axe X
display: true, // autorise l'affichage d'un texte pour l'axe X
title: {
display: true,
text: 'Temps', // titre de l'axe X
color: '#911', // couleur de l'axe X
font: { // police de caractére de l'axe X
family: 'Comic Sans MS',
size: 20, // taille des caractères de l'axe X
weight: 'bold', // écriture en gras
lineHeight: 1.2,
}, // fin de la police de caractère des X
padding: {top: 20, left: 0, right: 0, bottom: 0} // position de l'axe X
} // fin du titre X
}, // fin de l'axe X
y: {
display: true,
title: {
display: true,
text: 'Kg', // titre de l'axe Y
color: '#191', // couleur de l'axe Y
font: { // police de caractére de l'axe Y
family: 'Times',
size: 20,
style: 'normal',
lineHeight: 1.2
}, // fin de la police de caractére des Y
padding: {top: 30, left: 0, right: 0, bottom: 0} // position de l'axe Y
} // fin du titre Y

        }   //fin de l'axe Y

                } //fin des échelles
            }   // fin des options

        };  //fin de config

</script>

      /*Le contexte du canevas HTML */
    context = document.getElementById('myChart').getContext("2d");
    /* Création du graphique */
    chart = new Chart(context, config);

</script>
"
mais cela ne fonctionne pas je n'ai plus de labels qui s'affiche dans ChatJS...

j'ai aussi essayé des trucs de ce genre :

labels = for (let x = 0; x <10; x++){ ['<?= $tab_stamp[x]?>',}];

Quelqu'un a-t-il une idée ou une solution à mon problème?

Merci
PS: au vu de mon code est-il utile de préciser que je débute, je ne maitrise que la programmation sur Arduino (ce qui m'a permis de créer un programme de ruche connecté...)
Merci
REPS: je n'arrive pas à mettre correctement en page mon code avec les "..." sachant que le code en contient aussi.. désolé

Chart.JS, labels et requête MySQL, page web

Aucune réponse