Discussion :

[SylvainM]

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

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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"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 !!!

[headmax]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SylvainM]

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 :

Si je comprends bien, le problème se situe ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 )

[headmax]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

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

[SylvainM]

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)

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 sql :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[rawsrc]

Ok, rajoute ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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));

[Celira]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
 
?>

[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 )

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"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)

[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);

[SylvainM]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

[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

[rawsrc]

Tiens en PHP cela donnerait quelque chose dans ce genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

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

[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 !!!
(mais j'en ai également profité pour passer mon code en UTF-8 )
Bonne journée !

Sylvain