Passage de variable json entre php et jquery

Version imprimable

Bonjour,

Je veux passer 2 variables json de php vers jquery pour alimenter un graphique highcharts.

Je passe mes paramètres avec une chaine GET au script php, qui exécute la requête.
J’ai fait le choix d’utiliser les possibilités offertes par postgresql de retourner directement un format json : en fait je n’ai qu’une ligne de retour avec en colonne 1 un tableau de date (futur axe des x )et en colonne 2 un tableau de nombre (futur axe des y)
Quand je passe mes paramètres directement dans la barre d’adresse, le script php fonctionne, mais avec jquery rien !! :(

Exemple en mettant la chaine GET dans la barre d'adresse : quo_graph.php?esp=1&ana_id=1&sta_id=1&date_deb=2016-07-01&date_fin=2016-09-01
J’obtiens un retour :

Code:

["2016-07-01","2016-07-05","2016-07-06","2016-07-07","2016-07-08","2016-07-09","2016-07-12","2016-07-13","2016-07-15","2016-07-16","2016-07-19","2016-07-20","2016-07-21","2016-07-22","2016-07-23","2016-07-25","2016-07-26","2016-07-27","2016-07-28","2016-07-29","2016-07-30","2016-08-10","2016-08-11","2016-08-12","2016-08-13","2016-08-16","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-22","2016-08-23","2016-08-24","2016-08-25","2016-08-26","2016-08-27","2016-08-30","2016-08-31","2016-09-01"][7.000,25.000,150.000,124.000,64.000,2.000,660.000,606.000,416.000,500.000,47.000,461.000,126.000,385.000,527.000,448.000,471.000,536.000,358.000,225.000,67.000,160.000,172.000,776.000,644.000,167.000,538.000,325.000,248.000,51.000,149.000,522.000,619.000,717.000,600.000,435.000,33.000,21.000,2.000]

Merci de votre aide précieuse !!

Je mets les codes html jquery et php ci-dessous
Html

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
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>liste analyse / stat</title>
</head>
 
<body>
	<h2>graphiques</h2>
 
 
	<form>
	<p>choisir une analyse, puis une statistique associée</p>
		<select id="analyses" name="analyses">
			<option value="">-- Analyses --</option>
		</select>
 
		<select id="stats" name="stats">
			<option value="">-- Statistiques--</option>
		</select></br></br>
 
		Date début<input  type="date" id="date_deb" name="date_deb" size="10" /></br></br>
		Date fin<input type="date" id="date_fin" name="date_fin" size="10"/></br></br>
		Espece<input id="esp" name="esp" size="5" value = "1"/></br></br>
		<input type="button" id="valider" name="valider" value="ok"/></br></br>
	</form>
 
<div id="graphique" style="width: 100%; height: 400px;"></div>
 
<script type='text/javascript' src='Highcharts-3.0.8/js/jquery.min.js'></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/highcharts.js" ></script>
<script type="text/javascript" src="Highcharts-3.0.8/js/modules/exporting.js" ></script>
<script type='text/javascript' src="listes.js"></script>
<script type='text/javascript' src="quo_graph.js"></script>
 
</body>
 
</html>

Jquery

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
$(document).ready(function(){
    // Le code jQuery ici !
 
var $valider = $('#valider');
 
 var $date_deb = $('#date_deb');
  var $date_fin = $('#date_fin');
 
//attribution de la date du jour (c'est bien compliqué !!') 
var now = new Date();
 
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
 
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
 
$('#date_fin').val(today);
 
now.setDate(now.getDate() -90);
 
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
 
var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
 
$('#date_deb').val(today);
 
 
$valider.click(function(){
//recup des libellés pour afficher sur le graph
var $analyse_libelle = $('#analyses option:selected').text();
var $stat_libelle = $('#stats option:selected').text() ;
 
// récup des infos pour envoyer au fichier php
var $ana_id =  $('#analyses option:selected').val();
var $sta_id =  $('#stats option:selected').val();
$date_deb = $('#date_deb').val();
$date_fin = $('#date_fin').val();
var $esp = $('#esp').val();
 
 
var $chaine_get = 'esp='+$esp+'&ana_id='+$ana_id+'&sta_id='+$sta_id+'&date_deb='+$date_deb+'&date_fin='+$date_fin;
alert($chaine_get);
 $.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			alert('Ce code fonctionne !');
			alert (json);
		},
		error: function(json) {
			alert('Ce code ne foctionne pas !'+json);
 
		}
	});
  $('#graphique').highcharts({
            chart: {
                zoomType: 'xy',
                spacingRight: 20
 
            },
            title: {
            //Titre du graphique
                text: $analyse_libelle
            },
 
            xAxis: {
            tickmarkPlacement: 'on',
                categories :json_ladate,
                labels: {
                 step: 2,
                rotation: 90
 
            }
                },
            yAxis: {
                title: {
                    text:''
					}            
					},
            tooltip: {
                shared: true,
                valueSuffix: ''
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: { hover: { lineWidth: 1  }},
                    threshold: null
                }
            },
 
            series: [{
                type: 'area',
                name: $stat_libelle,
                data: json_valeur
            }]
        }); 
 
});
});

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 
require('connexion.php');
 
$requete = "select to_json(array_agg(val_date)) as json_date, to_json(array_agg(val_valeur)) as json_valeur FROM 
		( select val_date, val_valeur from tbl_valeur_val natural join tbl_stat_sta where 
		val_esp=".$_GET['esp']." and 
		val_date between '".$_GET['date_deb']."' and '".$_GET['date_fin']."' and 
		sta_id = ".$_GET['sta_id']." and 
		ana_id = ".$_GET['ana_id']." 
		ORDER BY val_date) t";
 
echo $requete.'</br>';
 
 
$resultat = pg_query($dbconn,$requete); 
 
$json_ladate = array();
$json_valeur = array();
 
$json_ladate = pg_fetch_result($resultat, 0, 0);
$json_valeur = pg_fetch_result($resultat, 0, 1);
 
echo $json_ladate;
echo $json_valeur;
 
?>

07/09/2016, 09h29
mathieu

regardez la requête AJAX dans la console de développement pour voir ce qui est envoyé et reçu
07/09/2016, 10h33
Watilin

Ton JSON n’est pas bien formé. En gros tu as ça :

Code:

[… des dates …][… des nombres …]

C’est-à-dire deux tableaux à la suite, sans séparateur entre les deux. Il faudrait que tu les encapsules, soit dans un objet :

Code:

{ "dates": [ … ], "nombres": [ … ] }

soit dans un tableau :

Code:

[ [ … ], [ … ] ]

Ça va se gérer à la fin de ton script PHP, au niveau de tes deux echo.
07/09/2016, 11h13
SpaceFrog

Pour être sur de récupérer un bon format de JSon le plus simple est encore de faire confiance à json_encode coté serveur.

merci à tous pour vos remarques, elles m'ont permis d'avancer pour réussir à passer le json du php au js

1-la console sous firefox est vraiment bien fichue, on voit tout ce qui se passe
2-j'ai donc modifié mon code de la manière suivante :.

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 
require('connexion.php');
 
$requete = "select to_json(array_agg(val_date)) as json_date, to_json(array_agg(val_valeur)) as json_valeur FROM 
                ( select val_date, val_valeur from tbl_valeur_val natural join tbl_stat_sta where 
                val_esp=".$_GET['esp']." and 
                val_date between '".$_GET['date_deb']."' and '".$_GET['date_fin']."' and 
                sta_id = ".$_GET['sta_id']." and 
                ana_id = ".$_GET['ana_id']." 
                ORDER BY val_date) t";
                
//echo $requete.'</br>';
 
$resultat = pg_query($dbconn,$requete); 
 
$json_ladate = array();
$json_valeur = array();
$json_graph = array();
 
$json_ladate = pg_fetch_result($resultat, 0, 0);
$json_valeur = pg_fetch_result($resultat, 0, 1);
 
$json_graph='['.$json_ladate.','.$json_valeur.']';
 
echo $json_graph;
?>

j'ai bien un retourcorrect dans la console, et le script js me dit que ça fonctionne :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(json) {
			alert('Ce code fonctionne !');
 
		},
		error: function(json) {
			alert('Ce code ne foctionne pas !'+json);
 
		}
	});

mais maintenant je ne trouve pas comment passé les valeurs au graphique ! :-(

ça y est !!!!

je me réponds, j'ai trouvé la solution après un sandwich !:frenchy:

plusieurs choses n'allaient pas :
-le code du graph n'était pas dans le success de l'ajax
-la récup des données : tout simplement si on a function(data){.....}, le premier jeu de données (axes des x) est date[0] et le second (y) est data[1]

la partie ajax du js qui marche

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
27
28
29
30
31
32
33
34
35
36
37
 
 $.ajax({
		url: 'quo_graph.php',
		type: 'GET',
		data: $chaine_get,
		dataType: 'json', // on veut un retour JSON
		success: function(data) {
			//alert('Ce code fonctionne !');
			//alert(data);
			$('#graphique').highcharts({
 
				chart: {zoomType: 'xy',spacingRight: 20},
				title: {text: $analyse_libelle},
				xAxis: {tickmarkPlacement: 'on',categories :data[0],
					labels: {step: 2,rotation: 90}
						},
 
				yAxis: {title: {text:$stat_libelle}},
				tooltip: {shared: true,valueSuffix: ''},
				legend: {enabled: false},
				plotOptions: {area: {
								fillColor: {
									linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
									stops: [[0, Highcharts.getOptions().colors[0]],[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]]},
									lineWidth: 1,marker: {enabled: false},
									shadow: false,
									states: { hover: { lineWidth: 1  }},threshold: null}
							},
				series: [{type: 'area',name: $stat_libelle,data: data[1]}]
 
										}); 
									},
		error: function(data) {
			alert('Ce code ne fonctionne pas !');
 
		}
	});

encore merci de m'avoir fait avancer !