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 : Sélectionner tout - Visualiser dans une fenêtre à part
["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 html : 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
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 : 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
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 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 
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;
 
?>