[Chart.js] Données issues de JSON créés sur PostGreSQL

Version imprimable

Bonjour à tous,

Je suis en train de me faire la main sur Chart.js, et j'aimerais maintenant faire quelques graphiques depuis des requêtes sur une base PostGreSQL (mais j'ai peur que ce soit au delà de mes piètres compétences :aie:).

Voici un JSFiddle pour mes essais actuels : https://jsfiddle.net/yawL2v99/

J'arrive plus ou moins à créer, en PHP, un fichier JSON depuis mes requêtes via ce script (adapté de différents modèles), mais je dois faire une erreur car mes clés sont dupliqués.
Voici le script PHP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <?php # Connect to PostgreSQL database $conn = new PDO('pgsql:host=localhost;dbname=mydb','myuser','mypwd'); # Build SQL SELECT statement and return the geometry as a GeoJSON element $sql = "SELECT myfields FROM mytables"; # Try query or error $rs = $conn->query($sql); if (!$rs) { echo 'An SQL error occured.\n'; exit; } #loop through the returned data $data = array(); foreach ($rs as $row) { $data[] = $row; } header('Content-type: application/json'); echo json_encode($data); $conn = NULL; $rs=NULL; ?>
Voici ce qui en sort :

Code:

[{"mois":"1","0":"1","v1":56066,"1":56066,"v2":267,"2":267,"v3":120,"3":120},{"mois":"2","0":"2","v1":4119,"1":4119,"v2":187,"2":187,"v3":617,"3":617},{"mois":"3","0":"3","v1":7941,"1":7941,"v2":346,"2":346,"v3":796,"3":796},{"mois":"4","0":"4","v1":21640,"1":21640,"v2":356,"2":356,"v3":993,"3":993},{"mois":"5","0":"5","v1":48836,"1":48836,"v2":669,"2":669,"v3":2407,"3":2407},{"mois":"6","0":"6","v1":44853,"1":44853,"v2":648,"2":648,"v3":4056,"3":4056},{"mois":"7","0":"7","v1":40625,"1":40625,"v2":779,"2":779,"v3":4169,"3":4169},{"mois":"8","0":"8","v1":25383,"1":25383,"v2":501,"2":501,"v3":2138,"3":2138},{"mois":"9","0":"9","v1":13772,"1":13772,"v2":183,"2":183,"v3":615,"3":615},{"mois":"10","0":"10","v1":6378,"1":6378,"v2":144,"2":144,"v3":613,"3":613},{"mois":"11","0":"11","v1":2197,"1":2197,"v2":119,"2":119,"v3":115,"3":115},{"mois":"12","0":"12","v1":1276,"1":1276,"v2":0,"2":0,"v3":4,"3":4}]

alors que cela devrait être :

Code:

[{"mois":1,"v1":56066,"v2":267,"v3":120},{"mois":2,"v1":4119,"v2":187,"v3":617},{"mois":3,"v1":7941,"v2":346,"v3":796},{"mois":4,"v1":21640,"v2":356,"v3":993},{"mois":5,"v1":48836,"v2":669,"v3":2407},{"mois":6,"v1":44853,"v2":648,"v3":4056},{"mois":7,"v1":40625,"v2":779,"v3":4169},{"mois":8,"v1":25383,"v2":501,"v3":2138},{"mois":9,"v1":13772,"v2":183,"v3":615},{"mois":10,"v1":6378,"v2":144,"v3":613},{"mois":11,"v1":2197,"v2":119,"v3":115},{"mois":12,"v1":1276,"v2":0,"v3":4}]

(ça, je l'ai créé directement depuis PostGreSQL avec les fonction array_to_json(array_agg(row_to_json(ma_requete)))

Une fois le JSON créé en PHP, je pense qu'il est possible de le charger avec JQquery/AJAX (reprenez moi si je dis une bêtise), avec quelque chose de ce genre $.getJSON("chemin/monscript.php", ...), et de stocker le contenu dans une variable, que pourra utiliser Chart.js

Mais même si j'y parvenais, je ne sais pas trop comment, ensuite, utiliser les données de ce JSON pour mes datasets et labels de graphiques.

Si certains d'entre-vous peuvent m'aider à y voir plus clair, que ce soit pour
- l'utilisation par chart de la variable en JSON,
- le chargement JQuery/AJAX du fichier JSON depuis le PHP
- corriger le script PHP (même si, même avec les doublons, il serait quand même fonctionnel)

Merci à vous !!! :P

Salut pour ton tableau php il faut que tu supprimer le surplus en utilisant :
Code:

1 2 unset($data[1]); // supprimera ,"0":"1"
Après ça tu obtiendra le tableau qu'il te faut en comparant comme tu le fait.
Ensuite tu n'est pas obligé de passer par AJAX si la requête et dans la même page sinon oui il faudra appeler cette page tout simplement en faisant :

jquery avec ou sans paramètre post get a envoyé au script PHP
Code:

1 2 3 4 5 6 7 8 9 10 $.getJSON( "test.php", { name: "sibesoin", time: "2h" } ) .done(function( json ) { alert( "JSON Data: " + json ); // }) .fail(function( jqxhr, textStatus, error ) { var err = textStatus + ", " + error; console.log( "Request Failed: " + err ); });
Sinon cas ou la requête même page :
Code:

1 2 3 4 <script> var data_json = <?php echo json_encode($data); ?>; </script>

20/11/2017, 09h54
SylvainM

1 pièce(s) jointe(s)
Merci headmax de te pencher sur mon problème :)
Je tente de corriger le PHP avec ton conseil (unset($data[1]);), mais au lieu de me supprimer les clés en doublons (1, 2, 3), cela me supprime la donnée correspondant à un mois.
Sâchant qu'il y a 12 mois, et que ça commence à 0, unset($data[1]); supprime le mois de février... (janvier étant $data[0])
A moins que je ne le place pas au bon endroit ?
Pour mieux voir le problème de doublons de clés, voici une copie d'écran du JSON dans Firefox :
Pièce jointe 328680
Si je comprends bien, le problème se situe ici :
Code:

1 2 3 4 $data = array(); foreach ($rs as $row) { $data[] = $row; };
et je crois comprendre qu'il faudrait supprimer la première $row plutôt la première $data ?

(désolé si ce que j'écris n'est pas très compréhensible, je n'ai pas encore compris la logique du code :aie:)

Pour le tableau oui il faut que tu cible les bon index, d'après ton apport supplémentaire dont j'ai fait +1 car mettre cette image json nous permet de savoir ou et comment supprimer les doublons pour PHP :

d'après ce que tu as mit tu peux faire soit deux boucle une de 0 à 1 pour les parent ensuite de 0 à 3 pour supprimer les enfants doublons.
Mais tu peux aussi le faire simplement en regardant le rendu du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 unset($data[0][0]); unset($data[0][1]); unset($data[0][2]); unset($data[0][3]); unset($data[1][0]); unset($data[1][1]); unset($data[1][2]); unset($data[1][3]); //ou for($i = 0; i <=1; $i++){ foreach ($data[$i] as $key => $value) { if (is_int($key)) { unset($arr[$key]); } } }
J'ai pas vraiment testé mais ça devrait faire l'affaire, bien à toi.

20/11/2017, 12h57
rawsrc

Salut,

le traitement des doublons devrait être fait à priori dans le code SQL et pas une fois le jeu de données récupéré.
T'avoueras que le code que tu nous as posté : $sql = "SELECT myfields FROM mytables"; est super détaillé pour pouvoir t'aider...

Merci encore à vous pour vos conseils.

Dans la première partie du code que tu proposes, headmax (unset($data[0][0]); ...), ça marche effectivement pour les premiers objets (mois) de mon JSON, mais la capture d'écran était partielle : en réalité il y a 12 objets (12 mois), et je devrais donc faire 48 unset (12x4)... Pas très propre, je pense ! ;)

Pour la 2e option (boucle for), qui me semble plus propre, je n'arrive pas la faire fonctionner... (pas de réponse du serveur)

Citation:

Envoyé par rawsrc

le traitement des doublons devrait être fait à priori dans le code SQL et pas une fois le jeu de données récupéré.

En fait, le code SQL ne donne aucun doublon. C'est le script PHP que j'ai "bidouillé" (par incompétence en PHP) qui créé les doublons.
Je peux bien entendu mettre la requête SQL, mais l'idée est que ce soit générique et pourrait s'adapter à n'importe quelle requête SQL (lignes = objets, nom des champs = clés).
La voici quand même :
Code:

1 2 3 4 5 6 7 SELECT extract(month from dateobs) as mois, count(id_synthese) v1, SUM (CASE WHEN extract(year from dateobs) = 2017 THEN 1 ELSE 0 END) as v2, SUM (CASE WHEN extract(year from dateobs) = 2016 THEN 1 ELSE 0 END) as v3 FROM schema.observations GROUP BY mois ORDER BY mois ASC
Je devrais donc avoir, pour chaque ligne de la table de sortie (=1 mois), 4 paires de "clés" / "valeurs" :

Code:

[{"mois":1,"v1":56066,"v2":267,"v3":120},{"mois":2,"v1":4119,"v2":187,"v3":617}...]

Ok, rajoute ceci :

Code:

1
2
3
$rs   = $conn->query($sql);
$data = $rs->fechAll(PDO::FETCH_ASSOC);
echo json_encode($data);

Après il t'est possible de supprimer les doublons assez proprement :

Code:

1
2
$json = '[{"mois":"1","0":"1","v1":56066,"1":56066,"v2":267,"2":267,"v3":120,"3":120},{"mois":"2","0":"2","v1":4119,"1":4119,"v2":187,"2":187,"v3":617,"3":617},{"mois":"3","0":"3","v1":7941,"1":7941,"v2":346,"2":346,"v3":796,"3":796},{"mois":"4","0":"4","v1":21640,"1":21640,"v2":356,"2":356,"v3":993,"3":993},{"mois":"5","0":"5","v1":48836,"1":48836,"v2":669,"2":669,"v3":2407,"3":2407},{"mois":"6","0":"6","v1":44853,"1":44853,"v2":648,"2":648,"v3":4056,"3":4056},{"mois":"7","0":"7","v1":40625,"1":40625,"v2":779,"2":779,"v3":4169,"3":4169},{"mois":"8","0":"8","v1":25383,"1":25383,"v2":501,"2":501,"v3":2138,"3":2138},{"mois":"9","0":"9","v1":13772,"1":13772,"v2":183,"2":183,"v3":615,"3":615},{"mois":"10","0":"10","v1":6378,"1":6378,"v2":144,"2":144,"v3":613,"3":613},{"mois":"11","0":"11","v1":2197,"1":2197,"v2":119,"2":119,"v3":115,"3":115},{"mois":"12","0":"12","v1":1276,"1":1276,"v2":0,"2":0,"v3":4,"3":4}]';
$data = array_map(function($p) { return array_filter($p, 'is_string', ARRAY_FILTER_USE_KEY); }, json_decode($json, true));

Petite explication sur le pourquoi des doublons : tout vient du fait que tu récupères les données en bouclant sur le résultat de la requête

Ton code de départ :
Code:

1 2 3 4 5 6 7 # Try query or error $rs = $conn->query($sql); // [...] $data = array(); foreach ($rs as $row) { $data[] = $row; }
Ce code fait implicitement appel à fetch. Ce qui correspond à :
Code:

1 2 3 4 5 6 7 # Try query or error $rs = $conn->query($sql); // [...] $data = array(); while ($row = $rs->fetch()) { $data[] = $row; }
Du coup, tu utilises fetch avec le mode par défaut qui PDO::FETCH_BOTH :

Citation:

PDO::FETCH_BOTH (défaut): retourne un tableau indexé par les noms de colonnes et aussi par les numéros de colonnes, commençant à l'index 0, comme retournés dans le jeu de résultats

Si tu veux uniquement les données indexées par nom de colonne, il faut préciser le mode en FETCH_ASSOC (comme l'a indiqué rawsrc ;))

Donc en reprenant ton code de départ :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <?php # Connect to PostgreSQL database $conn = new PDO('pgsql:host=localhost;dbname=mydb','myuser','mypwd'); # Build SQL SELECT statement and return the geometry as a GeoJSON element $sql = "SELECT myfields FROM mytables"; # Try query or error $rs = $conn->query($sql); if (!$rs) { echo 'An SQL error occured.\n'; exit; } #loop through the returned data $data = array(); while ($row = $rs->fetch(PDO::FETCH_ASSOC)) { $data[] = $row; } header('Content-type: application/json'); echo json_encode($data); $conn = NULL; $rs=NULL; ?>

20/11/2017, 14h53
SylvainM

Super !!!
Merci à tous :
1] ça marche ! :)
2] j'ai tous les éléments pour comprendre !!! :) (mais pas mal de lectures à faire pour y parvenir :aie:)

Je récupère donc bien un JSON opérationnel pour Chart.js

Le point qu'il me reste à comprendre maintenant, c'est comment, en Javascript, récupérer mes séries pour les utiliser avec Chart.js
(mais comme c'est plus des probmème Javascript, dois-je ouvrir un nouveau sujet ?? Je poursuis ici, mais n'hésitez pas à me dire d'ouvrir un autre sujet)

J'ai donc un JSON de cet forme :

Code:

[{"mois":"1","v1":56066,"v2":267,"v3":120},{"mois":"2","v1":4119,"v2":187,"v3":617},{"mois":"3","v1":7941,"v2":346,"v3":796},{"mois":"4","v1":21640,"v2":356,"v3":993},{"mois":"5","v1":48836,"v2":669,"v3":2407},{"mois":"6","v1":44853,"v2":648,"v3":4056},{"mois":"7","v1":40625,"v2":779,"v3":4169},{"mois":"8","v1":25383,"v2":501,"v3":2138},{"mois":"9","v1":13772,"v2":183,"v3":615},{"mois":"10","v1":6378,"v2":144,"v3":613},{"mois":"11","v1":2211,"v2":133,"v3":115},{"mois":"12","v1":1276,"v2":0,"v3":4}]

Comment faire pour en extraire les labels de X (labels: [1,2,3,4,5,6,7,8,9,10,11,12]) issus de la clés "mois", et les datas des séries v1, v2 et v3 (ex. pour v2 : data: [267,187,346,356,669,648,779,501,183,144,119,0])
En plus court, comment faire un array de toutes les valeurs d'une clé ?
(voici le lien du modèle, où les "data" sont saisis manuellement)
20/11/2017, 15h02
rawsrc

Fais tous tes arrangements de valeurs en PHP et renvoie le résultat tout fait en json.
pars à partir du tableau : $data = $rs->fechAll(PDO::FETCH_ASSOC);

Je me doute que cela aurait été possible en PHP, mais je m'en suis sorti en JS de cette manière :
Code:

1 2 3 4 5 6 7 8 9 10 var mois = [] for (var i = 0; i < datajson.length; i++) { mois.push(datajson[i].mois); } var v2 = [] for (var i = 0; i < datajson.length; i++) { v2.push(datajson[i].v2); }
:P

20/11/2017, 16h39
SylvainM

Si vous voulez voir ce que ça donne, voici : https://jsfiddle.net/p2tqc9sk/
(là, je n'ai pas mis le chargement PHP du JSON, car le PHP est sur mon serveur, mais je vais pouvoir le faire grace à tous vos conseils !
Merci encore !!

Sylvain

Tiens en PHP cela donnerait quelque chose dans ce genre :

Code:

1
2
3
4
5
6
7
8
9
10
11
$json  = '[{"mois":"1","0":"1","v1":56066,"1":56066,"v2":267,"2":267,"v3":120,"3":120},{"mois":"2","0":"2","v1":4119,"1":4119,"v2":187,"2":187,"v3":617,"3":617},{"mois":"3","0":"3","v1":7941,"1":7941,"v2":346,"2":346,"v3":796,"3":796},{"mois":"4","0":"4","v1":21640,"1":21640,"v2":356,"2":356,"v3":993,"3":993},{"mois":"5","0":"5","v1":48836,"1":48836,"v2":669,"2":669,"v3":2407,"3":2407},{"mois":"6","0":"6","v1":44853,"1":44853,"v2":648,"2":648,"v3":4056,"3":4056},{"mois":"7","0":"7","v1":40625,"1":40625,"v2":779,"2":779,"v3":4169,"3":4169},{"mois":"8","0":"8","v1":25383,"1":25383,"v2":501,"2":501,"v3":2138,"3":2138},{"mois":"9","0":"9","v1":13772,"1":13772,"v2":183,"2":183,"v3":615,"3":615},{"mois":"10","0":"10","v1":6378,"1":6378,"v2":144,"2":144,"v3":613,"3":613},{"mois":"11","0":"11","v1":2197,"1":2197,"v2":119,"2":119,"v3":115,"3":115},{"mois":"12","0":"12","v1":1276,"1":1276,"v2":0,"2":0,"v3":4,"3":4}]';
$clean = array_map(function($p) { return array_filter($p, 'is_string', ARRAY_FILTER_USE_KEY); }, json_decode($json, true));
 
$data = ['mois' => [], 'v1' => [], 'v2' => [], 'v3' => []];
array_map(function($p) use (&$data) {
    $data['mois'][] = $p['mois'];
    $data['v1'][]   = $p['v1'];
    $data['v2'][]   = $p['v2'];
    $data['v3'][]   = $p['v3'];
}, $clean);
echo json_encode($data);

21/11/2017, 10h26
SylvainM

Je me permets de rouvrir ma discussion, car finalement je bloque encore sur un dernier point.

J'essaie d'inclure le fichier PHP créant le JSON depuis ma page, avec ce code :

Code:

var datajson = <?php include("json_stats_mois.php"); ?>;

Et le navigateur ne parvient pas à afficher la page. J'ai ce message d'erreur :

Code:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Pourtant, si je regarde le code source de ma page, créée en PHP, j'ai bien ça :

Code:

var datajson = [{"mois":1,"mois_fr":"Janv.","nbobs":56066,"nbobs2017":267,"nbobs2016":120},{"mois":2,"mois_fr":"F\u00e9vr.","nbobs":4119,"nbobs2017":187,"nbobs2016":617},{"mois":3,"mois_fr":"Mars","nbobs":7941,"nbobs2017":346,"nbobs2016":796},{"mois":4,"mois_fr":"Avril","nbobs":21640,"nbobs2017":356,"nbobs2016":993},{"mois":5,"mois_fr":"Mai","nbobs":48836,"nbobs2017":669,"nbobs2016":2407},{"mois":6,"mois_fr":"Juin","nbobs":44853,"nbobs2017":648,"nbobs2016":4056},{"mois":7,"mois_fr":"Juil.","nbobs":40625,"nbobs2017":779,"nbobs2016":4169},{"mois":8,"mois_fr":"Ao\u00fbt","nbobs":25383,"nbobs2017":501,"nbobs2016":2138},{"mois":9,"mois_fr":"Sept.","nbobs":13772,"nbobs2017":183,"nbobs2016":615},{"mois":10,"mois_fr":"Oct.","nbobs":6378,"nbobs2017":144,"nbobs2016":613},{"mois":11,"mois_fr":"Nov.","nbobs":2213,"nbobs2017":135,"nbobs2016":115},{"mois":12,"mois_fr":"D\u00e9c.","nbobs":1276,"nbobs2017":null,"nbobs2016":4}];

Et étrangement, si j'écris manuellement la variable sans PHP, le graphique s'affiche bien. Je ne vois pas la différence avec ce code, écrit manuellement :

Code:

var datajson = [{"mois":1,"mois_fr":"Janv.","nbobs":56066,"nbobs2017":267,"nbobs2016":120},{"mois":2,"mois_fr":"F\u00e9vr.","nbobs":4119,"nbobs2017":187,"nbobs2016":617},{"mois":3,"mois_fr":"Mars","nbobs":7941,"nbobs2017":346,"nbobs2016":796},{"mois":4,"mois_fr":"Avril","nbobs":21640,"nbobs2017":356,"nbobs2016":993},{"mois":5,"mois_fr":"Mai","nbobs":48836,"nbobs2017":669,"nbobs2016":2407},{"mois":6,"mois_fr":"Juin","nbobs":44853,"nbobs2017":648,"nbobs2016":4056},{"mois":7,"mois_fr":"Juil.","nbobs":40625,"nbobs2017":779,"nbobs2016":4169},{"mois":8,"mois_fr":"Ao\u00fbt","nbobs":25383,"nbobs2017":501,"nbobs2016":2138},{"mois":9,"mois_fr":"Sept.","nbobs":13772,"nbobs2017":183,"nbobs2016":615},{"mois":10,"mois_fr":"Oct.","nbobs":6378,"nbobs2017":144,"nbobs2016":613},{"mois":11,"mois_fr":"Nov.","nbobs":2211,"nbobs2017":133,"nbobs2016":115},{"mois":12,"mois_fr":"D\u00e9c.","nbobs":1276,"nbobs2017":null,"nbobs2016":4}];

Auriez-vous une explication ?
21/11/2017, 11h00
Celira

Tu as probablement un caractère caché : vérifie que ton script PHP est bien encodé en UTF-8 sans BOM et qu'il n'y a aucun caractère avant la 1ere balise <?php.
21/11/2017, 11h16
SylvainM

Merci du conseil, mais en fait, je viens de trouver ce qui posait souci : dans le fichier PHP que j'avais initialement récupéré, il y avant ce code header('Content-type: application/json');, juste avant le echo json_encode($data);.
En le commentant, mon graphe s'affiche bien depuis le PHP !!! :D
(mais j'en ai également profité pour passer mon code en UTF-8 ;) )
Bonne journée !

Sylvain