Difficulté a affiché mes valeurs dans Chart.js

Bonsoir.
Il y a plusieurs problèmes dans ton code PHP.
Le premier, est que tu définies les variables humidity et temps en tant que chaîne de caractères
Le second, est que lorsque tu boucles sur le résultat de la requête SQL, à chaque tour de cette boucle, tu écrases les valeurs des variables, par conséquence, les seules valeurs que tu as à la fin de cette boucle sont les valeurs de la dernière boucle
Le dernier, est que tu renvoies pas de données pour le retour de l'ajax.
Tu devrais modifier ton code comme ceci :

$results = [];
$sql = mysqli_query("SELECT * FROM plant");
while ($row = mysqli_fetch_array($sql)) {
    $results[] = [
        'humidity'  =>  $row['Humidity'],
        'temps'     =>  date('M,Y',strtotime($row['temps']));
    ];
}
echo json_encode($results);

Ensuite du côté JavaScript
Tes deux conditions sont fausses, car la syntaxe n'est pas if (data[i].humidity == "Humidity"); mais if (data[i].humidity == "Humidity") {.
En plus de ça elles ne font absolument rien.

merci pour la réponse.
Mais le problème et du côté JavaScript j'obtiens bien l'objet mais je ne sais pas comment l'afficher dans le tableaux

$(document).ready(function() {

  /**
   * call the data.php file to fetch the result from db table.
   */
  $.ajax({
    url : "http://192.168.1.107/data.php",
    type : "GET",
    success : function(data){
      console.log(data);

        //get canvas
      var ctx = $("#line-chartcanvas");

      var data = {
        labels : ...,
        datasets : [
          {
            label : "citronnier",
            data : ...,
            backgroundColor : "blue",
            borderColor : "lightblue",
            fill : false,
            lineTension : 0,
            pointRadius : 5,
          },

        ]
      };

      var options = {
        title : {
          display : true,
          position : "top",
          text : "Line Graph",
          fontSize : 18,
          fontColor : "#111"
        },
        legend : {
          display : true,
          position : "bottom"
        }
      };

      var chart = new Chart( ctx, {
        type : "line",
        data : data,
        options : options
      } );

    },
    error : function(data) {
      console.log(data);
    }
  });

});

Mais le problème et du côté JavaScript j'obtiens bien l'objet

Je vois mal comment tu peux avoir un retour de données dans ton appel ajax, alors que dans le code PHP que tu nous montre, tu ne lui retourne rien vu que tu ne fais que définir des variables, ou alors c'est que tu ne nous montre pas le code PHP dans son intégralité.
En ce qui concerne la propriété data de datasets elle s'attend à recevoir un tableau non multi-dimensionnel, il te faut donc soit via le PHP ne renvoyer un tableau qui ne contient que les valeurs de la clé Humidity ou le construire en JavaScript et le passer à la propriété.
Exemple ici.

Je suis complétement perdu. J’ai un arduino qui envoi des valeurs d'humidité dans une table SQL. Je voudrais récupérer ces valeurs pour faire un tableau dynamique. Je ne sais pas ce que je dois modifier dans mon JavaScript pou faire cela.

Est-ce que tu as au moins regardé mon commentaire précédent ?
Je t'y montre comment tu peux faire avec le retour que tu obtiens dans le screen que tu montres via le lien de ton précédent commentaire.

Oui j'ai bien vu. Mais j'ai des valeurs que l’arduino rajoute au fur et à mesure or ce que tu me montre c'est de valeur pré déterminer

or ce que tu me montre c'est de valeur pré déterminer

Ce que je montre dans le code, c'est avec le retour que tu montres dans le screen de ton lien, si le retour que tu as n'est pas en réalité celui que tu montres dans ton screen, je vois mal comment je vais pouvoir t'aider.

Mon screenshot est bon. C'est que sais une image pris sur un moment de la journée et les données viennent au fur et à mesure du temps.
C’est moi qui me suis mal exprimé.

Si le format de retour est le même, ça ne change rien, qu'il y ait 5 enregistrements ou plus ne change rien, par contre essaies quand même de limiter le nombre d'enregistrements que tu récupères, car si tu récupères trop d'enregistrements ton graphique va finir par être illisible.

Du coup je dois remplier les informations manuellement ?

Du coup je dois remplier les informations manuellement ?

Comment ça manuellement ?
Je t'ai montré comment tu pouvais faire au niveau JavaScript avec le type de retour que tu as.

Pour les données qui viennent au fur et à mesure dans ma table SQL. il faut que je les rajoute manuellement dans "records".

Tes données tu les récupères via ajax, soit la variable data du callback success, donc records » data, tu n'as pas besoin de définir une variable records étant donné qu'elle correspond à data dans ton code ajax.

Après quelle sur recherche sur internet, je n’ai pas tous compris. Je pense qui me manque des notions. Donc d’après ce que vous me dites je dois supprimer la variable records

var records = [
    {humidity: '252', temps: 'Mar ,2019'},
  {humidity: '1024', temps: 'Mar ,2019'},
    {humidity: '1024', temps: 'Mar ,2019'},
    {humidity: '124', temps: 'Mar ,2019'},
    {humidity: '252', temps: 'Mar ,2019'},
  {humidity: '252', temps: 'Mar ,2019'},
  {humidity: '252', temps: 'Mar ,2019'},

  ,
];

Puis ensuite je ne sais pas quoi faire.

Dans le callback de ta requête ajax, tu récupères les données, il te suffit d'y faire le traitement avec.

Bonjour,
voilà 4 semaine que je suis dessus pour faire le traitement de mais données à suivre différend tuto mais rien faire. Je n’y arrive pas. Si vous avez un tuto types je suis preneur.

Bonjour, voilà après plusieurs tuto et test, j’arrive à la même chose à chaque fois
Il me met « undefined » quand je fais

console.log(this.response.temps);

Voici le code complet ci-dessous

var demo = document.getElementById("demo");

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  console.log(this);
  if (this.readyState == 4 && this.status == 200){
    demo.innerHTML = JSON.stringify(this.response);
    var data = this.response;
    console.log(data);
    console.log(this.response.temps);

  } else if (this.readyState == 4 && this.status == 404) {
      alert('Erreur 404')
  }

};
xhr.open("GET","http://192.168.1.107/data.php", true);
xhr.responseType = "json";
xhr.send();

bonjour, bonsoir,
comme le disait lartak, le probleme vient principalement de la page php. car quand tu appelles cette page celle-ci ne renvoit pas les données a ton code JS. donc il ne se passe plus rien après.

ton console.log(data) ne doit rien renvoyer.
si ton code a évolué pourrais tu le remettre en reponse stp!
cordialement,

Bonjour,
Voici les informations misent au claire.
J’ai un arduino qui envoie des valeurs d’humidité, de date (etc…) à une base de donnée.
Ensuite je récupère ces informations dans un scripte qui se nomme data.php qui est ci-dessous :

<?php
//setting header to json
header('Content-Type: application/json');
//database
define('DB_HOST', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', 'mounmaya20');
define('DB_NAME', 'home');
//get connection
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);
if(!$mysqli){
  die("Connection failed: " . $mysqli->error);
}
//query to get data from the table
$results = [];
$sql = mysqli_query($mysqli,"SELECT * FROM plant");

while ($row = mysqli_fetch_array($sql)) {
    $results[] =  [
        'humidity'  =>  $row['Humidity'],
        'temps'     =>  date('D,M,Y',strtotime($row['temps']))
    ];
}
echo json_encode($results);

je place ces données dans un tableau avec l’api chart.js car je veux réaliser un tableau avec des données qui arrivent au fur et à mesure.

var demo = document.getElementById("demo");

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  console.log(this);
  if (this.readyState == 4 && this.status == 200){
    demo.innerHTML = JSON.stringify(this.response);
    var data = this.response;
    console.log(data);
    console.log(this.response.humidity);

  } else if (this.readyState == 4 && this.status == 404) {
      alert('Erreur 404')
  }

};
xhr.open("GET","http://192.168.1.107/data.php", true);
xhr.responseType = "json";
xhr.send();
var ctx = $("#line-chartcanvas");
new Chart(ctx, {
              type: 'line',
  data: {
              labels: 'temps',
    datasets: [{
              label: 'TeamA score',
      backgroundColor: 'blue',
      borderColor: 'lightblue',
      fill: false,
      lineTension: 0,
      pointRadius: 5,
      data: 5,
                            }]
              },
  options: {
              title: {
              display: true,
      position: "top",
      text: "Line Graph",
      fontSize: 18,
      fontColor: "#111"
                            },
    legend: {display: true, position: "bottom"}
              }
});

je récupère ce tableau pour le placer dans une page PHP

<html>
<head>
    <title>ChartJS - Line</title>

    <link href="css/app.css" rel="stylesheet">

</head>
<body>

  <div class="chart-container">
    <canvas id="line-chartcanvas"></canvas>
  </div>

  <!-- javascript -->
  <div id="demo"></div>
  <script src="lib/jquery.min.js"></script>
    <script src="Chart.js_master/Chart.min.js"></script>

    <script src="Chart.js_master/line_db-php.js"></script>
</body>
</html>

Merci par avance