Highcharts et Ajax [Résolu]

[Logarithmix]

Bonjour,

je suis en train de développer une application web de Benchmarking.

L'utilisateur arrive sur un formulaire de recherche multicritères, et génère un graphique par rapport aux options qu'il a choisi en appuyant sur un bouton.

Je fais donc un appel ajax qui envoi les paramètres choisis à un fichier php qui génère une requête et qui ensuite retourne un résultat sous forme de JSON.

Je bloque au moment de construire le graphique malheureusement !

Voici mon appel AJAX : (Pour le moment j'affiche juste le JSON dans une DIV sur ma page afin de vérifier qu'il soit bon)

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
$.ajax({  
						type: "POST",  
						url: "db.php",
						data: "datedebut="+ datedebut +"& datefin="+ datefin +"& jours="+ 
						jours +"& ferie="+ ferie +"& horairedebut="+ horairedebut +"& horairefin="+ horairefin +"& labo="+ labo +"& corres="+ corres,  
						beforeSend : function() { // traitements JS à faire AVANT l'envoi
						$('#results').after('<img src="img/ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
						},
							success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
							$('#ajax-loader').remove(); // on enleve le loader
							$('#results').html(data); // affichage des résultats dans le bloc 
							}  
					});

Un exemple de JSON que j'obtiens :

Code :

[{"DelaiMoyenTechnique":"05:07:36","DelaiMoyenBio":"05:39:16","DelaiTotal":"10:46:52"}]

Mon graphique sera TOUJOURS (pour l'instant) composé de ces 3 valeurs, donc c'est basique-ment un graphique à 3 colonnes.

Un exemple de rendu de graphique sous Highcharts : http://jsfiddle.net/PPAUx/758/

(Donc pas loin de se que je cherche à faire)

Merci d'avance pour votre aide, ça fait 2 jours que je cherche en vain.

[NoSmoking]

Bonsoir,
en jQuery il existe jQuery.getJSON() qui devrait t'aider à y voir plus clair pour la récupération et le formatage des données.

[Logarithmix]

Bonjour,

mon $.ajax est sensiblement la même fonction que le get.json, avec plus d'options. (Get.json ne prend pas la méthode POST).

Je n'arrive toujours pas à rapatrier mon json et je ne comprend vraiment pas ce qui cloche !

La fin de mon fichier db.php qui normalement me renvoi le json.

Code :

1
2
header("Content-type: application/json");
	echo json_encode($rows);

Ma fonction $.ajax censée récupérer le json :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({  
						type: "POST",
						url: "db.php",
						cache: false,
						dataType: "json",
						data: donnees,  
						beforeSend : function() { // traitements JS à faire AVANT l'envoi
						$('#results').after('<img src="img/ajax-loader.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
						},
 
 
							success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
							$('#ajax-loader').remove(); // on enleve le loader
							//$('#results').html(data); // affichage des résultats dans le bloc 
							alert(data);
							//GRAPH ICI
 
							}  
					});

Mon alert(data) affiche : [object Object]

Donc on dirait que mon json n'est pas reconnu comme tel, cependant quand je le retourne sans le header("Content-type: application/json"); (sur db.php) et sans le dataType: "json" (dans ma fonction ajax), il apparaît bien comme ceci :

Code :

[{"DelaiMoyenTechnique":"04:57:04","DelaiMoyenBio":"07:26:47","DelaiTotal":"12:23:51"}]

(Je l'ai même validé sur un site qui vérifie la bonne syntaxe au cas où...)

[Bovino]

Mon alert(data) affiche : [object Object]

Donc on dirait que mon json n'est pas reconnu comme tel

Euh... dans JSON, le "O", il veut dire quoi selon toi ?

Bref, si, ton JSON est bien reconnu et ses propriétés disponibles.

[Logarithmix]

Hum ok.
Mais alors pourquoi si je fais un simple alert(data.DelaiTotal); je reçois un "undefined" ?
Car si on suit ma structure je devrais avoir : 12:23:51 ?

[Bovino]

Ben tu n'as probablement pas remarqué que les accolades sont entourées de crochets, qui correspond à la notation d'un tableau...

Code :

alert(data[0].DelaiTotal);

[Logarithmix]

Génial !
Merci à toi Bovino, je vais pouvoir passer à l'étape d'intégration du graph grâce à cet objet.
Je sens que je vais passer plus souvent ici, ça me permet d'en apprendre toujours plus. (Puis bon, quand on est seul au boulot, c'est pas toujours facile quand on bloque...)

Encore merci ! (Je ne passe pas en résolu tout de suite, au cas où je n'arriverais pas à construire le graph, ce que j'espère pas !)

[Logarithmix]

Problème totalement résolu dans la partie : PHP/MySQL !