[AJAX] Importer un jpgraph via ajax

**nad_ii** · 20/03/2015, 22h22

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** · 21/03/2015, 17h15

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** · 22/03/2015, 14h25

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** · 22/03/2015, 18h15

Salut,

Le graphe ne s'affiche pas, y'a ce logo : Nom : images.png
Affichages : 235
Taille : 892 octets

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** · 22/03/2015, 21h13

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** · 22/03/2015, 21h34

Peut tu etre plus claire "je suis debutant"

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

**NoSmoking** · 22/03/2015, 22h06

Supposons que tu ais dans ton code HTML

Code html :

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

<img id="img_resultat" src="" alt="">

dans ta fonction d'appel il te suffit de faire un truc du style

Code :

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

1
2
3
4
function FonctionGrapheTension() {
    document.getElementById('img_resultat').src = 'medecin_graphe_tension_ajax.php?'  +new Date().getTime(); // pour éviter le cache
    setTimeout( FonctionGrapheTension, 2000);
}

**nad_ii** · 23/03/2015, 00h34

Je n'y arrive pas !!

Les valeur du graphe ne changent pas pour les faire changer il faut à chaque fois que je vide le cache du navigateur.

et les image continuent de se répeter.

Invité · 23/03/2015, 16h29

En Jquery, il existe 2 fonctions très utiles : $.empty() et $.destroy(), pour ré-initialiser une div contenant un graphe.

**nad_ii** · 23/03/2015, 17h31

Salut,

Je crois que je vais dans le mauvais sens, j'ai désactiver le cache du navigateur pour eviter le problemes de cache et j'ai mis ceci dans la fonction javascript pour éviter la répétition des images:

Code :

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

document.getElementById('AffichageGrapheTension').innerHTML='';

Code :

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

1
2
3
4
5
6
7
function FonctionGrapheTension() {
				document.getElementById('AffichageGrapheTension').innerHTML=''; // pour vider l'espace pour réinserer l'image
				var img = new Image();   // Crée un nouvel objet Image
				img.src = 'medecin_graphe_tension_ajax.php'; // Définit le chemin vers sa source
				document.getElementById('AffichageGrapheTension').appendChild(img);
				setTimeout(FonctionGrapheTension,500);
			}

ça a fonctionné mais c'est pas fluid, malgré que j'ai réduit la répétion de la fonction à 500ms "en dessous la page ne charge plus les images", y'a des coupures entre les images on sent largement que s'est des images qui défilent y'a pas une continuité fluide du graphe.

SVP! est ce que vous pouvez me proposer une solution, méthode pour génerer des graphes dynamique sachant que les valeurs sont prises d'une BDD, si j'y tient c'est que c'est vraiment nécessaire.

REMERCIEMENTS...

**NoSmoking** · 23/03/2015, 21h17

@MoumouteMasters :
pas obligé de sortir la grosse artillerie sur ce coup !

@nad_ii :
il sert à quoi de te fournir des réponses qui fonctionnent si c'est pour ne pas en tenir compte?

ça a fonctionné mais c'est pas fluid...

attention à ce que tu entends par fluidité, il y a le temps de transfert lié au réseau, le temps que va mettre le moteur de rendu pour restituer la nouvelle image et plus tu mettra un intervalle faible et plus tu vas saturer ta ligne et moins cela avancera plus vite.

La fluidité pour quoi faire est-elle vraiment nécessaire à ce point ?

Une autre question que je me pose est est ce que les données qui sont modifiées le sont en moins de 500ms ?

Si toutes les données sont disponibles au premier appel, c'est une supposition, alors autant créer le dynamisme coté client en javascript.

**nad_ii** · 24/03/2015, 06h29

Bonjour,

Une autre question que je me pose est est ce que les données qui sont modifiées le sont en moins de 500ms ?

Je le réduit à 500ms parce qu’en l’augmentant en voie clairement un graphe "image" qui disparaît puis pendant un court instant l'emplacement est vide puis le nouveau graphe arrive, je me suis dit réduire le temps pour rendre la transition rapide et masquer tout ça.

La fluidité pour quoi faire est-elle vraiment nécessaire à ce point ?

Oui c'est le cahiers des charges j'y suis pour rien, les données proviennent d'un capateur de température qui enregistre directement dans une BDD, le cahiers des charges veut qu'on voient l’évolution du graphe en temps réel.

**NoSmoking** · 24/03/2015, 19h58

(...)voie clairement un graphe "image" qui disparaît puis pendant un court instant l'emplacement est vide puis le nouveau graphe arrive(...)

il te faut dans ce cas avoir une autre approche qui consiste à attendre le chargement de la nouvelle image avant de l'afficher, les moteurs de rendu sont performant dans ce cas.

Comment faire ?
dans ton HTML il te faut mettre/initialiser une balise IMG, je reprends mon exemple

Code html :

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

<img id="img_resultat" src="medecin_graphe_tension_ajax.php" alt="">

le code javascript devinant

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
function FonctionGrapheTension() {
    var oImgOld,
        oImg = new Image();
    // action au chargement de l'image
    oImg.onload = function(){
      // récup. de l'image en place
      oImgOld = document.getElementById('img_resultat');
      // remplacement par la nouvelle image
      oImgOld.parentNode.replaceChild( oImg, oImgOld);
      // affecte l'ID pour la prochaine récupération
      oImg.id ='img_resultat';
    }
    // maintenant on affecte la src de l'image à venir
    oImg.src =  'medecin_graphe_tension_ajax.php?' +new Date().getTime(); // pour éviter le cache
    // on relance la fonction au bout d'1s    
    setTimeout( FonctionGrapheTension, 1000);
}

le setTimeout pourrait être placé dans la fonction onload de la nouvelle image.

Le délai de 1s me paraît correcte pour faire du "temps réel" compte tenu des impératifs annoncés par avant, latence réseau, écriture en base des nouvelles données...etc... sans compter que la valeur ne doit pas être toujours différente de la précédente.

Quoiqu'il arrive tu ne pourras jamais égaler "la vitesse du taux d’échantillonnage" des appareils de contrôle, à toi d'en convaincre tes clients.

Une autre solution serait, comme déjà abordé, de traiter cela coté client et de ne récupérer que la valeur modifiée.

**nad_ii** · 24/03/2015, 22h11

ça marche nickel MERCI énormément NoSmoking !!

[AJAX] Importer un jpgraph via ajax

AJAX

Discussions similaires

Partager

Partager