Difficulté a affiché mes valeurs dans Chart.js

Par thomasnastorg, il y a 7 ans

PHP

Bonjour,

Je n’arrive pas à inséré mes valeur dans un graphique crée avec Chart.js.
J’ai récupère bien mes valeur dans le script "data.php"

J’ai un premier code qui récupère mes info "data.php"

<?php header('Content-Type: application/json'); //database define('DB_HOST', 'localhost'); define('DB_USERNAME', 'root'); define('DB_PASSWORD', 'mon_MP'); define('DB_NAME', 'home'); //get connection $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME); if(!$mysqli){ die("Connection failed: " . $mysqli->error); } $humidity = ''; $temps = ''; $sql = mysqli_query("SELECT * FROM plant"); while ($row = mysqli_fetch_array($sql)) { $humidity =$row['Humidity']; $temps = date('M,Y',strtotime($row['temps'])); }

Mon seconde script est la génération de mon graphique "line_db-php.js"

$(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); var humidity; var temps ; var len = data.length; for (var i = 0; i < len; i++) { if (data[i].humidity == "Humidity") if (data[i].temps == "temps"); } //get canvas var ctx = $("#line-chartcanvas"); var data = { labels :[1 , 2], datasets : [ { label : "TeamA score", data : humidity, 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); } }); });

Mon troisième code affiche mon graphique

<!DOCTYPE html> <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 --> <script src="Chart.js_master/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>

20 réponses

thomasnastorg, il y a 7 ans

Du coup je dois remplier les informations manuellement ?

Lartak, il y a 7 ans

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.

Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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); } }); });
Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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.

Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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

Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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é.

Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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

Lartak, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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.

Lartak, il y a 7 ans

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

thomasnastorg, il y a 7 ans

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.

thomasnastorg, il y a 7 ans

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();
Romain MATHOUX, il y a 6 ans

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,

thomasnastorg, il y a 6 ans

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

Romain MATHOUX, il y a 6 ans

Bonjour,

Alors pour la partie temps réél des données je ne conseille pas car trop gourmant.
la partie PHP est bonne même si je te conseille d'ordonner les datas avec un ORBER BY temps
Pour la partie JS, il y a des soucis je te mets ci-dessous un code a retravailler:

$.getJSON( "http://192.168.1.107/data.php", function( datas ) { x = [] y = [] $.each(datas, function(i, data){ x[i] = data[0] y[i] = data[1] }) }) .done(function() { var ctx = $("#line-chartcanvas"); var options = { title : { display : true, position : "top", text : "Line Graph", fontSize : 18, fontColor : "#111" }, legend : { display : false, position : "bottom" } }; var myLineChart = new Chart(ctx, { type: 'line', data: { labels: y, datasets: [{ data: x, borderWidth: 1 }] }, options: options }); });

bonne continuation,