[AJAX] Générer une image en ajax

Version imprimable

Bonjour,
J'utilise Jpgraph pour faire la construction de mes courbes...
Lorsqu'on arrive sur la page, un graphe se génère automatiquement.
Je veux également qu'un autre graphe se fasse lorsque l'utilisateur choisis les données à afficher à l'aide de checkbox...
Donc à chaque fois qu'il coche ou décoche une checkbox la courbe "devrait" changer.
Mais j'ai juste une image "cassé".
Voici mon code qui fait l'appel Ajax :

Code:

1
2
3
4
5
6
7
8
9
10
11
 
$.ajax({
		type: "POST",
		url: "req_graphe.php",
		data: "donnees="+req,
		success: function(){
		img = new Image();
		img.src = "req_graphe.php";
		$('#graphe2').html(img);
		}
	});

req est ma requête sql qui fonctionne ;)
voici le code de req_graphe :

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
 
$ma_requete = $_POST['donnees'];
$exe = mysql_query($ma_requete);
$array = mysql_fetch_array($exe);
 
 
$datay1 = array($array[0] ,$array[1], $array[0]);
$datay2 = array($array[0] ,$array[1], $array[0]);
$datay3 = array($array[0] ,$array[1], $array[0]);
 
// Setup the graph
$graph = new Graph(420,226);
$graph->SetScale("textlin");
 
$theme_class= new UniversalTheme;
$graph->SetTheme($theme_class);
 
 
 
$graph->xaxis->SetTickLabels(array('€ initial','€ current','€ final'));
$graph->ygrid->SetFill(false);
 
$p1 = new LinePlot($datay1);
$graph->Add($p1);
 
$p2 = new LinePlot($datay2);
$graph->Add($p2);
 
$p3 = new LinePlot($datay3);
$graph->Add($p3);
 
$p1->SetColor("#01badc");
$p1->SetLegend('Exploitation');
$p1->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p1->mark->SetColor('#01badc');
$p1->mark->SetFillColor('#01badc');
$p1->SetCenter();
$p1->value->Show();
$p1->value->SetFormat('%d');	
$p1->value->SetColor('#01badc');
 
$p2->SetColor("#f23d64");
$p2->SetLegend('Bâtiment');
$p2->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p2->mark->SetColor('#f23d64');
$p2->mark->SetFillColor('#f23d64');
$p2->SetCenter();
$p2->value->Show();
$p2->value->SetFormat('%d');	
$p2->value->SetColor('#f23d64');
 
$p3->SetColor("#ffa800");
$p3->SetLegend('Infrastructure');
$p3->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p3->mark->SetColor('#ffa800');
$p3->mark->SetFillColor('#ffa800');
$p3->SetCenter();
$p3->value->Show();
$p3->value->SetFormat('%d');	
$p3->value->SetColor('#ffa800');
 
$graph->legend->SetFrameWeight(1);
$graph->legend->SetColor('#4E4E4E','#00A78A');
$graph->legend->SetMarkAbsSize(8);
 
// Output line
echo $graph->Stroke();

Mais malheureusement il ne s'affiche pas :?
pourtant quand je met

Code:

1
2
 
echo $graph->Stroke('images/test_graph.png');

Je génère bien mon graphe, donc je pense que ca vient de l'ajax...
merci de votre aide

24/03/2011, 10h29
nadox

Bonjour,
Ce code

Code:

img.src = "req_graphe.php";

fait à nouveau un requête pour récupérer l'image sans les paramètres.

Pour récupérer l'image il n'y a donc pas besoin d'AJAX !
Il suffit de faire

Code:

img.src = "req_graphe.php?donnees="+req;

;)

Oui c'est vrai... pouquoi se compliquer la vie quand on peut faire simple lol
euh mais ca ne fonctionne pas
j'ai fait cela :
Code:

1 2 3 4 5 6 7 8 9 if(tabcheckbox[0] == "Encours" && tabcheckbox[1] == "Enattente" && tabcheckbox[2] == "") { var req = "SELECT blabla FROM matable WHERE tableau_statut BETWEEN 0 AND 99 AND tableau_type = 'blabla'"; img = new Image(); img.src = "req_graphe.php?donnees="+req; $('#graphe2').html(img); } }
Et j'ai toujours l'image cassée :?

24/03/2011, 12h10
nadox

Euh... du SQL directement en paramètre ?? :calim2:
Donc si je viens sur ton site je peux faire ce que je veux dans ta base de données ? :mrgreen:

Sinon essaye déjà de voir ton image en mettant l'url (avec les paramètres) dans la barre d'adresse de ton navigateur... si tu obtient une page blanche, c'est que tu as un soucis dans le php ! (ce qui ne m'étonnerait pas)
24/03/2011, 12h15
Meloooo

Undefined index donnees...
24/03/2011, 12h25
nadox

J'ai pas bien compris ton dernier post, mais je suppose que ça confirme que le problème vient du PHP. Tu devrais passer en paramètre seulement les données dont tu as vraiment besoin... parce que du SQL c'est vraiment pas conseillé !
24/03/2011, 12h43
Meloooo

Ok je vais donc essayé de construire ma requête dans le fichier req_graphe...
Et mon dernière post voulait bien dire que j'avais une erreur dans mon php car car quand je mettais mon url dans mon navigateur, j'avais l'erreur : undefined index donnees...
Je reviendrai vers vous, quand j'aurais construit ma requête "correctement" merci de votre aide.

Bon j'avance doucement, j'ai pris en compte votre conseil de ne pas mettre de requête SQL en paramètre pour la sécurité, donc j'ai pris seulement les données que j'avais besoins et ensuite j'envoi "mes données" et je construis ma requête...

Code:

1
2
3
4
5
 
var varCheckbox = tabcheckbox.join('|');
		img = new Image();
		img.src = "req_graphe.php?donnees="+varCheckbox;
		$('#graphe2').html(img);

tabcheckbox est un tableau ou je stocke mes checkbox cochées, et ensuite je découpe ce tableau pour faire une requête cohérente...
voici ma page de construction de graphe :

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
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<?php // content="text/plain; charset=utf-8"
require_once ('jpgraph-3.5.0b1/src/jpgraph.php');
require_once ('jpgraph-3.5.0b1/src/jpgraph_line.php');
include ('connexion_bd.php');
 
 
$tabCheckbox = explode('|' , $_POST['donnees']);
foreach ($tabCheckbox as $key => $value)
{
$tabCheckbox[$key] = explode(',' , $value);
}
 
$req_euro = "SELECT SUM(e_ini) , SUM(e_fin) FROM tableau_bord ";
$where = "WHERE ";
$y = 0;
// keya clé petit tableau 
// $tab valeur de mon tableau
foreach ($tabCheckbox as $keya => $tab)
{
// tableau priorite ok
 
	/*if($keya == 0)
	{ continue; }*/
 
	$x = 0;	
	// separe les petits tableaux
	if($y != 0)
	{ $where .=	" AND ";}
	$where .= "( ";
 
	foreach($tab as $value)
	{
		if($x == 0)
		{$x++; continue; }
 
		if ($x != 1)
		// separe chaque valeur de petit tableau
		$where .= "OR ";
 
		if (($value == "Encours") || ($value == "Enattente") || ($value == "Termine")) {
			switch ($value) {
			case "Enattente":
			$where .= $tab[0]."=0 ";
			break;
			case "Encours":
			$where .= "(".$tab[0]." > 0 AND ".$tab[0]." < 100) ";
			break;
			case "Termine":
			$where .= $tab[0]."=100 ";
			break;
			}
		}
		else {
		$where .= $tab[0]."='".$value."' ";
		}
		$x++;
	}
	$where .= " ) ";
	$y++;
}
$req_euro .= $where;
 
$query_euro = mysql_query($req_euro);
$array = mysql_fetch_array($query_euro);
 
 
 
$datay1 = array($array[0] ,$array[1], $array[0]);
$datay2 = array($array[0] ,$array[1], $array[0]);
$datay3 = array($array[0] ,$array[1], $array[0]);
 
// Setup the graph
$graph = new Graph(420,226);
$graph->SetScale("textlin");
 
$theme_class= new UniversalTheme;
$graph->SetTheme($theme_class);
 
 
 
$graph->xaxis->SetTickLabels(array('€ initial','€ current','€ final'));
$graph->ygrid->SetFill(false);
 
$p1 = new LinePlot($datay1);
$graph->Add($p1);
 
$p2 = new LinePlot($datay2);
$graph->Add($p2);
 
$p3 = new LinePlot($datay3);
$graph->Add($p3);
 
$p1->SetColor("#01badc");
$p1->SetLegend('Exploitation');
$p1->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p1->mark->SetColor('#01badc');
$p1->mark->SetFillColor('#01badc');
$p1->SetCenter();
$p1->value->Show();
$p1->value->SetFormat('%d');	
$p1->value->SetColor('#01badc');
 
$p2->SetColor("#f23d64");
$p2->SetLegend('Bâtiment');
$p2->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p2->mark->SetColor('#f23d64');
$p2->mark->SetFillColor('#f23d64');
$p2->SetCenter();
$p2->value->Show();
$p2->value->SetFormat('%d');	
$p2->value->SetColor('#f23d64');
 
$p3->SetColor("#ffa800");
$p3->SetLegend('Infrastructure');
$p3->mark->SetType(MARK_FILLEDCIRCLE,'',1.0);
$p3->mark->SetColor('#ffa800');
$p3->mark->SetFillColor('#ffa800');
$p3->SetCenter();
$p3->value->Show();
$p3->value->SetFormat('%d');	
$p3->value->SetColor('#ffa800');
 
$graph->legend->SetFrameWeight(1);
$graph->legend->SetColor('#4E4E4E','#00A78A');
$graph->legend->SetMarkAbsSize(8);
 
 
// Output line
$graph->Stroke('images/test.png');

Ma requête est bonne... l'image test.png est bien créer, mais par contre mon graphe ne s'affiche pas... toujours une image cassée
Dans firebug j'ai plein de caractères spéciaux comme ceci :

Code:

1
2
3
4
5
 
�PNG

���
IHDR������d���'�� ��

J'ai donc rajouter tout en haut de ma page :

Code:

1
2
 
header("Content-type: image/png");

mais maintenant firebug me dit ca :

Code:

1
2
 
Image corrupt or truncated

26/03/2011, 13h40
nadox

Bonjour,
Le problème n'est plus lié à l'Ajax. Tu trouveras surement des réponses dans le forum PHP. Cela dit je crois qu'il peut y avoir plusieurs problèmes :
- Une page qui génère une image ne devrait pas avoir d'espace ni de retour à la ligne en dehors des balises

Code:

<?php ?>

- J'ai l'impression que dans ton php, tu affiche le graphique généré et non l'image ?

EDIT : Peut-être un élément de réponse :
http://www.developpez.net/forums/d70...ph/#post469560

Code:

$graph->Stroke();
05/04/2011, 13h45
Meloooo

Bon j'ai trouvé une solution, certes pas très propre mais qui à l'air de fonctionner... à chaque changement d'état d'une checkbox il me génère une image, et me supprime l'ancien graphe... donc à chaque changement d'état de checkbox il y a le nouveau graphe qui est généré et l'ancien qui est supprimé... j'essayerai quand même de voir plus en détails ton lien ;)
Je reviens vers toi si cela me pose un problème.
Merci de ton aide.
05/04/2011, 16h07
nadox

A priori, le code que j'avais mis au dessus permet d'ecrire l'image sur en sortie du php sans passer par un fichier. Par contre, oui, le graphe est forcement régénèré à chaque fois, puisque il est généré sur le serveur... On peut peut-etre garder un objet en session pour éviter de le réinstancier, mais a part ça je vois pas ce qu'on peut faire de mieux...