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

**Meloooo** · 24/03/2011, 11h14

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 :

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

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 :

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

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

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

**nadox** · 24/03/2011, 11h29

Bonjour,
Ce code

Code javascript :

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

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

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

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

**Meloooo** · 24/03/2011, 11h37

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 :

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

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

**nadox** · 24/03/2011, 13h10

Euh... du SQL directement en paramètre ??

Donc si je viens sur ton site je peux faire ce que je veux dans ta base de données ?

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)

**Meloooo** · 24/03/2011, 13h15

Undefined index donnees...

**nadox** · 24/03/2011, 13h25

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é !

**Meloooo** · 24/03/2011, 13h43

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.

**Meloooo** · 24/03/2011, 15h03

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 :

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

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 :

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

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

1
2
3
4
5
 
�PNG

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

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

Code :

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

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

mais maintenant firebug me dit ca :

Code :

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

1
2
 
Image corrupt or truncated

**nadox** · 26/03/2011, 14h40

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 :

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

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

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

$graph->Stroke();

**Meloooo** · 05/04/2011, 14h45

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.

**nadox** · 05/04/2011, 17h07

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

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

AJAX

Discussions similaires

Partager

Partager