php et chart.js

Par Defy, il y a 10 ans

PHP

Bonjour tous le monde, je viens vous voir pour m'aider a resoudre un problème. Je suis pas du tous un as en Javascript enfin surtout en ajax. Du coup je galère un peut a trouver comment envoyer les donnée de mon code PHP vers mon graphique JS.

Une petite aide serais la bienvenue!

7 réponses

shinix, il y a 10 ans

Salut,

Euh, il n'y a rien de très compliquer.

Si on prend le graphique suivant : http://www.chartjs.org/docs/#line-chart-data-structure

Dans la config du script tu as juste à mettre :
labels: <?php $tes_labels ?>
data: <?php $tes_donnees ?>

C'est aussi simple que ça.
Tu as juste a traiter ton code PHP pour qu'il ressorte pareil que les valeurs par défaut du script JS.

Defy, il y a 10 ans

Non mais merci ca j'avait compris, seulement le soucie c'sest que j'utilise smarty , je n'ai donc aucune donnée php dans ma page, le code JS est dans un dossier JS consacré au Chart.
Le soucie c'est comment j'envoie les donnée de php vers mon script JS? c'est pas magique ca marche pas tout seul ( je pense )

betaWeb, il y a 10 ans

Il te faut faire un appel en AJAX (via jQuery c'est plus simple) afin de récupérer les données générées par son script PHP. Typiquement ça donne quelque chose comme ça:

function getChart(datas) { // Ton process de génération du graph ici } $.ajax({ method: 'GET', url: 'mon_script.php', dataType: 'json', success: function(response) { if (!response.length) { console.log('une erreur est survenue'); return false; } getChart(response); }, error: function() { console.log('une erreur est survenue'); return false; } }); // OU VERSION COURTE $.get('mon_script.php', function(response) { if (!response.length) { console.log('une erreur est survenue'); return false; } getChart(response); }, 'json');

Et surtout, n'oublies pas d'encoder ton array contenant les datas en JSON côté PHP, et aussi de faire un echo, sans quoi le résultat ne pourra pas être récupéré côté JS:

echo json_encode($datas);

S'il y a des points qui ne sont pas clairs, n'hésites pas ;)

Defy, il y a 10 ans

Bon deja ca marche bien ^^ je recupère mon Json mais je n'arrive pas a afficher correctement mes donnée, je recupère un Json comme ceci:

{ "janvier":0, "fevrier":0, "mars":0, "avril":0, "mai":1, "juin ":16, "juillet":2, "aout":0, "septembre":0, "octobre":0, "novembre":0, "decembre":0 }

Comment parcouri le tableau pour fair coincidé l'absice janvier de mon graph avec le janvier du json etc etc

betaWeb, il y a 10 ans

Alors soit tu traites ton array côté PHP, soit côté JS, sachant qu'à l'arrivée il te faut un array qui aura ce formatage (http://www.chartjs.org/docs/#line-chart-data-structure/) :

var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] } ] };

Ce que tu peux faire c'est construire deux arrays distincts JS à partir du JSON récupéré:

var monthes = []; var values = []; $.each(response, function(month, value){ monthes.push(month); values.push(value); }); var data = { labels: monthes, datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: values } ] };

Le tour est joué ;)

Defy, il y a 10 ans

Merci :-) nickel chrome!!!! c'est plus facile que ca en a l'air ^^

betaWeb, il y a 10 ans

@Defy: Je t'en prie ;)
Oui, généralement on cherche compliqué alors qu'en définitive la solution est souvent simple, et ça m'arrive encore fréquemment sur mes projets :)