Discussion :

[nad_ii]

Salut,

Bon voila je voudrai savoir comment faire pour aller chercher un jpGraph via ajax. Voici le code pour générer mon graphe, la page reçoit par url un code correspondant à la table à la quelle elle doit tirer les valeur pour les tracer:

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
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
<?php
include_once ("jpgraph.php");
include_once ("jpgraph_line.php");
 
define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '3135');
define('MYSQL_DATABASE', 'site');
 
$Id = array();
 
// *********************
// Production de données
// *********************
 
$RFID=$_GET['RFID'];
 
$sql_tension = <<<EOF
(SELECT 
	tension AS TENSIONS, 
	N AS MESURE  
	FROM $RFID )ORDER BY N DESC LIMIT 10
EOF;
 
$mysqlCnx = @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) or die('Pb de connxion mysql');
 
@mysql_select_db(MYSQL_DATABASE) or die('Pb de sélection de la base');
 
$mysqlQuery = @mysql_query($sql_tension, $mysqlCnx) or die('Pb de requête');
 
while ($row_tension = mysql_fetch_array($mysqlQuery,  MYSQL_ASSOC)) {
	$tableauTension[] = $row_tension['TENSIONS']; 
}
 
$inv=array_reverse($tableauTension);
 
// ***********************
// Création du graphique
// ***********************
 
// Création du conteneur
$graph = new Graph(500,300);
 
// Fixer les marges
$graph->img->SetMargin(40,30,50,40);    
 
// Mettre une image en fond
//$graph->SetBackgroundImage("images/mael_white.png",BGIMG_FILLFRAME);
 
// Lissage sur fond blanc (évite la pixellisation)
$graph->img->SetAntiAliasing("white");
 
// A détailler
$graph->SetScale("textlin");
 
// Ajouter le titre du graphique
$graph->title->Set("Evolution de la tension");
 
// Afficher la grille de l'axe des ordonnées
$graph->ygrid->Show();
 
// Fixer la couleur de l'axe (bleu avec transparence : @0.7)
$graph->ygrid->SetColor('blue@0.7');
 
// Des tirets pour les lignes
$graph->ygrid->SetLineStyle('dashed');
 
// Afficher la grille de l'axe des abscisses
$graph->xgrid->Show();
 
// Fixer la couleur de l'axe (rouge avec transparence : @0.7)
$graph->xgrid->SetColor('red@0.7');
 
// Des tirets pour les lignes
$graph->xgrid->SetLineStyle('dashed');
 
// Apparence de la police
$graph->title->SetFont(FF_ARIAL,FS_BOLD,11);
 
// Créer une courbes
$courbe = new LinePlot($inv);
 
// Afficher les valeurs pour chaque point
$courbe->value->Show();
 
// Valeurs: Apparence de la police
$courbe->value->SetFont(FF_ARIAL,FS_NORMAL,9);
$courbe->value->SetFormat('%0.1f');
$courbe->value->SetColor("blue");
 
// Chaque point de la courbe ****
// Type de point
$courbe->mark->SetType(MARK_FILLEDCIRCLE);
// Couleur de remplissage
$courbe->mark->SetFillColor("pink");
// Taille
$courbe->mark->SetWidth(4);
 
// Couleur de la courbe
$courbe->SetColor("blue");
$courbe->SetCenter();
 
// Paramétrage des axes
$graph->xaxis->title->Set("Mesure");
$graph->yaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->title->SetFont(FF_FONT1,FS_BOLD);
$graph->xaxis->SetTickLabels($Id);
 
// Ajouter la courbe au conteneur
$graph->Add($courbe);
 
$graph->Stroke();
?>

et voici un code ajax dont j'ai l'habitude de traivailler avec " je débute dans ajax ":

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
<script language="javascript" type="text/javascript">
 
			//Browser Support Code
 
			function FonctionGrapheTension(){
 
				var ajaxRequest;  // The variable that makes Ajax possible!
 
				try{
					// Opera 8.0+, Firefox, Safari
					ajaxRequest = new XMLHttpRequest();
				} 
				catch (e){
					// Internet Explorer Browsers
					try{
						ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
					} 
					catch (e) {
						try{
							ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
						} 
						catch (e){
							// Something went wrong
							alert("Your browser broke!");
							return false;
						}
					}
				}
 
				// Create a function that will receive data sent from the server
				ajaxRequest.onreadystatechange = function(){
					if(ajaxRequest.readyState == 4){
						//document.myForm.time.value = ajaxRequest.responseText;
						var ajaxDisplay = document.getElementById('AffichageGrapheTension');//ici in emplacement ou j'affiche mon graphe
						ajaxDisplay.innerHTML = ajaxRequest.responseText;
					}
				}
 
                                var rfid=1234;
				var queryString = "?RFID=" + rfid;
				ajaxRequest.open("GET", "medecin_graphe_tension_ajax.php" + queryString, true);
				ajaxRequest.send(null); 
				setTimeout(FonctionGrapheTension,100);
			}	
 
		</script>

comment pourrais-je le modifier pour pouvoir afficher mon graphe.

Sinon est ce que quel qu'un pourrait me donner une solution pour rendre le graphe dynamique dans ma page.

REMERCIEMENTS...

[nad_ii]

j'ai essayé de faire ceci dans le javascript mais ça ne marche pas:

Code :

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

1
2
3
4
5
6
function FonctionGrapheTension() {
	var img = new Image();  
	img.src = 'medecin_graphe_tension_ajax.php'; // là c'est un lien vers la page ou j'ai ecrit le code pour tracer le graphe
	document.getElementById('AffichageGrapheTension').appendChild(img);
	setTimeout(FonctionGrapheTension,2000);
}

[NoSmoking]

Bonjour,

(...)dans le javascript mais ça ne marche pas:

qu'est ce qui ne marche pas :
- le fait que ton image ne change pas
- le fait que tu n'arrive pas à l'afficher
- ...?

Qu'obtiens tu en retour de requête ?

[nad_ii]

Salut,

Le graphe ne s'affiche pas, y'a ce logo : qui se répète selon le temps du setTimeOut.

Même en supposant que l'image du graphe s'affiche correctement, le fait que l'image se répète c'est pas ça que je souhaite je veut créer un graphe qui évolue selon les valeur de ma table, un sorte de temps réel.

REMERCIEMENTS...

[NoSmoking]

Même en supposant que l'image du graphe s'affiche correctement, le fait que l'image se répète c'est pas ça que je souhaite ...

il te faut donc vider le conteneur avant de lui réinjecter la nouvelle image ou encore simplement changer la src de l'image présente dans le conteneur.

[nad_ii]

Peut tu etre plus claire "je suis debutant"

Est ce que cette ça va creer l effet temps reel?