[AJAX] Tracer graphique en temps réel

Version imprimable

17/02/2009, 09h47
Emcy

[AJAX] Tracer graphique en temps réel

Bonjour,

Je récupère via ajax des valeurs (une série de 6 valeurs que je rafraichi toutes les 3 secondes)

Est-il possible de tracer dynamiquement un graphique (j'ai 6 courbes a tracer => en abscisse, c'est l'heure de la mesure qui doit apparaitre) sans utiliser des bibliothèques toutes faites (car j'ai besoin que mon code java soit petit) ?
avez-vous des exemples ?

Je veux faire un graph qui mesure des débits comme le graph mise en réseau du gestionnaire des taches windows
17/02/2009, 09h55
DoubleU

Il te faut une compatibilité avec quels navigateurs?

Parce qu'a la base, javascript n'est pas capable de faire de dessin. Certaines librairies arrivent plus ou moins bien à palier à ce problème en générant les formes via des divs mais ca reste pas mal de la bidouille.

Sinon, tu peux utiliser des objets de type canvas, svg (gecko, webkit), vml (ie) pour tracer ces formes mais la, c'est la compatibilité entre navigateurs qui va être chiante.
17/02/2009, 09h58
Emcy

Citation:

Envoyé par DoubleU

Il te faut une compatibilité avec quels navigateurs?

=> ...tous ;)

alors il vaut mieux partir sur quelle solution (remarque : mon code javascript doit être très légé (une dizaine de Ko) , c'est pour mettre sur un système embarqué) ?
17/02/2009, 10h06
DoubleU

C'est pour mettre sur quoi comme système embarqué?

Ya quelques librairies ici mais j'ai bien peur qu'elles dépassent toutes les 10ko :(

C'est des courbes que tu dois faire ou juste des barres? Parce que dans ce cas, avec simplement du css ca passe mais si tu dois faire des courbes, t'es mal :aie:
17/02/2009, 11h31
Emcy

Citation:

Envoyé par DoubleU

C'est pour mettre sur quoi comme système embarqué?

=> c'est un mini serveur web avec très peu de mémoire pour stocker mes pages web

Le problème des librairies c'est qu'elles font plein de choses que je n'ai pas forcement besoin de faire (et donc prennent de la place)
Je pensais que c'était plus simple de générer un graph en javascript

Je dois dessiner une courbe : elle peut être pleine => donc en dessinant une multitude de barres de 1px ça pourrait peut-être le faire (mais c'est faire le barbare lol)
Je ne veux pas trop me prendre la tête : si c'est trop compliqué, je laisse tombé mon idée de graph...
17/02/2009, 11h36
Bovino

Non, ton approche est réalisable... cependant, ça ira pour une courbe, mais pour 6, tu ne pourras pas les superposer...
17/02/2009, 12h52
Emcy

c'est vrai que ça ne fonctionnerait pas si j'en avais plusieurs .. malheureusement il faudrait impérativement que je puisse en afficher plusieurs
17/02/2009, 13h07
Bovino

Tu crées tes éléments successifs de 1px (les 6 superposés) avec couleur de fond transparente et pour chancun, un background-image de 1x1px de couleur différente et positionnés center top et ça devrait le faire...

Citation:

Envoyé par Emcy

Je dois dessiner une courbe : elle peut être pleine => donc en dessinant une multitude de barres de 1px ça pourrait peut-être le faire (mais c'est faire le barbare lol)

Salut,

Je suis pas sur que cela soit si barbare que ça, dans ton cas tu as pas trop
le choix il me semble.

Voici un petit exemple très très basique, cela peut déjà te permettre
d'évaluer si le client est capable d'afficher le nombre de points dont tu
as besoins.
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <style type='text/css'> #graph { width: 200px; height: 150px; background-color: black; position: relative; } #graph div { position: absolute; width: 1px; height: 1px; } </style> <script type="text/javascript"> function plot(x, y, color) { var e = document.createElement('div'); e.style.left = Math.round(x) + "px"; e.style.top = Math.round(y) + "px"; e.style.backgroundColor = color; document.getElementById('graph').appendChild(e); } window.onload = function() { for(var x=0;x<200;x++) { var y = 75 + Math.sin(x/20) * 50; plot(x, y, 'red'); } for(var x=0;x<200;x++) { var y = 75 + Math.sin(x/40) * 30; plot(x, y, 'green'); } }; </script> </head> <body> <div id='graph'></div> </body> </html>

17/02/2009, 15h33
Emcy

merci marcha, ça se rapproche de ce que je recherchais

Par contre pour l'animation de ma courbe, comment faut-il faire (car je veux faire comme le graph mise en réseau du gestionnaire des taches windows (ctr + alt + suppr => gestionnaire des taches)) ?

Je pensais à une solution : je crée deux div superposées. Je masque la div sur laquelle je suis entrain de tracer les nouveaux points et une fois terminé, j'inverse le mode de visibilité des deux div (je sais pas trop si j'ai été clair)

est-ce la bonne méthode à adopter ? ne peut-on pas plutôt utiliser une méthode qui deplace ma courbe vers la gauche (en supprimant le premier point de la courbre et en rajoutant un nouveau point à la fin de la courbe) ?
17/02/2009, 15h52
marcha

Salut,

Pour rester performant en terme d'affichage je pense que tout
redessiner les points risque d'être un peu lent (à tester, on ne sait
jamais)

en css tu peux facilement glisser un div à l'intérieur d'un autre
il suffit de mettre un div de taille fixe en position relative et en
overflow hidden. Tu place le div #graph à l'intérieur. A chaque
nouveau point, tu déplace le div #graph avec style.left de plus
en plus négatif (de 1 en 1px), ainsi il glisse sur la gauche
(la partie gauche devenant invisible). le div #graph tu le met
en position absolute.

Etant donné que les points sont positionné par rapport à lui
il vont le suivre. je pense que tu n'a même pas besoin de
l'élargir, il va simplement partir sur la gauche.

Par contre il serait bon de tester tout ça :-)

Je réutiliserai les points qui sortent pour les mettre à droite
pour éviter de créer trop d'éléments DOM.

Voilà l'idée:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type='text/css'>
#box { position: relative; width: 200px; height: 150px; background-color: black;  }
#graph { width: 200px; height: 150px; position: absolute; }
#graph div { position: absolute; width: 1px; height: 1px; }
</style>
<script type="text/javascript">
 
var pos = 0;
var points = [];
 
function plot(x, y, color) {
	var e;
	if(pos<200) {
  		e = document.createElement('div');
		document.getElementById('graph').appendChild(e);
		points.push(e);
	}
    else {
		e = points[pos%200];
	}
	e.style.left = Math.round(x) + "px";
	e.style.top = Math.round(y) + "px";
	e.style.backgroundColor = color;
}
 
window.onload = function() {  
  setInterval( function() {
    document.getElementById('graph').style.left = '-' + pos + 'px';
	plot(199+pos, 75 + Math.sin(pos/20) * 70, 'red');	
	pos++;
  }, 20);
};
 
</script>
</head>
<body>
<div id='box'>
<div id='graph'></div>
</div>
</body>
</html>

17/02/2009, 17h15
Emcy

Merci, le principe à l'air de fonctionner ;)

par contre il n'y a pas de risque que le programme plante au bout d'un moment ? ... car la largeur du div graph va tendre vers l'infini (et en plus il y a des variables qui vont aussi tendre vers l'infini)

En fait, je crois que cette solution ne va pas aller car je risque d'avoir des pente élevée sur mes courbes ce qui fait que la courbe sera dessinée ne pointillée avec cette solution (ce n'est pas très visible)

voici un exemple de courbe avec un pente élevée :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Untitled Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type='text/css'>
#conteneur {
	position: relative; 
	overflow: hidden;
	width: 500px; 
	height: 500px;
	padding: 0;
	background-color: white;	
	border: 1px solid #7f9db9;
}
 
#graph {
	position: absolute; 
	top: 0;
	left: 0;
	padding: 0;
}
 
#graph div{
	position: absolute; 
	width: 1px; 
	height: 1px; 
}
 
 
.VisibleOn{display: block;}
.VisibleOff{display: none;}
 
</style>
 
<script type="text/javascript">
 
var myAbsisse = 0;
var points = [];
 
var heightGraph = 500;
var widthGraph = 500;
 
var FirstPoints = 0;
 
function plot(x, y, color) {
 
	var e;
 
	if (x < widthGraph){
		e = document.createElement('div');
		points.push(e);
 
		document.getElementById('graph').appendChild(e);
	} else {
		e = points[FirstPoints%widthGraph];
		FirstPoints++;
 
		document.getElementById('graph').style.left = -FirstPoints + "px"; 
	}
 
	e.style.left = Math.round(x) + "px";
	e.style.top = ((heightGraph/2) - Math.round(y)) + "px";
	e.style.backgroundColor = color;
}
 
function InitGraph(){
 	setInterval(function(){RefreshGraph()}, 5);
};
 
function RefreshGraph(){
 
	var y = Math.sin(myAbsisse/10) * 200;
	plot(myAbsisse, y, 'red');
	myAbsisse++;
}
 
</script>
 
</head>
<body onload="InitGraph()">
	<div id="conteneur">
		<div id="graph"></div>	
	</div>
</body>
 
</html>

=> est-il possible de dessiner les points intermédiaires (aussi le problème est qu'il n'y aura plus un nombre fixe de points) ?

Sinon, c'est quoi le meilleur format pour faire les graph ? SVG n'est-il pas compatible avec tous les navigateurs (je n'ai pas besoin que mon script soit compatible avec les version antérieur a IE 6) ?

En fait, il me semble que les points intermédiaires ne sont nécessaires
que pour une même verticale. donc on peut jouer sur la hauteur
du point et conserver un nombre d'élément DOM constants.

Voici l'idée, remplace plot et oublie pas var last_top :-)

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
 
var last_top = 0;
 
function plot(x, y, color) {
 
	var e;
 
	if (x < widthGraph){
		e = document.createElement('div');
		points.push(e);
 
		document.getElementById('graph').appendChild(e);
	} else {
		e = points[FirstPoints%widthGraph];
		FirstPoints++;
 
		document.getElementById('graph').style.left = -FirstPoints + "px"; 
	}
 
	e.style.left = Math.round(x) + "px";
	var top = ((heightGraph/2) - Math.round(y));
 
	if(points.length==1) last_top = top; // cas initial
	var h = last_top - top;
	if(h==0) h = 1;
	if(h>0) { 
		e.style.top = top + "px";
		e.style.height = h + "px";
	}
	else {
		h = -h;
		e.style.top = (top - h) + "px";
		e.style.height = h + "px";
	}
 
	e.style.backgroundColor = color;
	last_top = top;
}

18/02/2009, 09h38
marcha

Citation:

Envoyé par Emcy

Sinon, c'est quoi le meilleur format pour faire les graph ? SVG n'est-il pas compatible avec tous les navigateurs (je n'ai pas besoin que mon script soit compatible avec les version antérieur a IE 6) ?

Tu peux aussi envisager d'utiliser une version épurée par tes soins
de la librairie raphael.js

peux-être arrivera-tu a n'utiliser que le strict nécessaire (en gardant
la partie qui gère la compatibilité entre les navigateur et un tracé de droite
par exemple).

Joli exemple de graph ici

Presque parfait ... désolé ;)

Dans ce cas, ça fonctionne car on calcul les points tous les pixels : le problème est qu'au final mes points seront calculés tous les x pixels

j'ai modifié les fonctions pour calculer les points intermédiaire :

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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Untitled Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
<style type='text/css'>
#conteneur {
	position: relative; 
	overflow: hidden;
	width: 500px; 
	height: 500px;
	padding: 0;
	background-color: white;	
	border: 1px solid #7f9db9;
}
 
#graph {
	position: absolute; 
	top: 0;
	left: 0;
	padding: 0;
}
 
#graph div{
	position: absolute; 
	width: 1px; 
	height: 1px; 
}
 
 
.VisibleOn{display: block;}
.VisibleOff{display: none;}
 
</style>
 
<script type="text/javascript">
 
var myAbsisse = 0;
var points = [];
 
var heightGraph = 500;
var widthGraph = 500;
 
var FirstPoints = 0;
var last_top = 0;
 
var last_x = 0;
var last_y = 0;
 
/*	
function plot(x, y, color) {
 
	var e;
 
	if (x < widthGraph){
		e = document.createElement('div');
		points.push(e);
 
		document.getElementById('graph').appendChild(e);
	} else {
		e = points[FirstPoints%widthGraph];
		FirstPoints++;
 
		document.getElementById('graph').style.left = -FirstPoints + "px"; 
	}
 
	e.style.left = Math.round(x) + "px";
	e.style.top = ((heightGraph/2) - Math.round(y)) + "px";
	e.style.backgroundColor = color;
}
*/
 
 
function plotPoints(x, y, color){
 
	var a = (y - last_y) / (x - last_x); // calcul de la pente
	var i = 0;
	var myY;
 
	while (++last_x < x){
		myY = Math.round(last_y + (a * ++i));
 
		plot(last_x, myY, color);
	}
 
	plot(x, y, color);
 
	last_x = x;
	last_y = y;
}
 
function plot(x, y, color) {
 
	var e;
 
	if (x < widthGraph){
		e = document.createElement('div');
		points.push(e);
 
		document.getElementById('graph').appendChild(e);
	} else {
		e = points[FirstPoints%widthGraph];
		FirstPoints++;
 
		document.getElementById('graph').style.left = -FirstPoints + "px"; 
	}
 
	e.style.left = Math.round(x) + "px";
	var top = ((heightGraph/2) - Math.round(y));
 
	if(points.length==1) last_top = top; // cas initial
	var h = last_top - top;
	if(h==0) h = 1;
	if(h>0) { 
		e.style.top = top + "px";
		e.style.height = h + "px";
	}
	else {
		h = -h;
		e.style.top = (top - h) + "px";
		e.style.height = h + "px";
	}
 
	e.style.backgroundColor = color;
	last_top = top;
}
 
 
 
function InitGraph(){
 	setInterval(function(){RefreshGraph()}, 5);
};
 
function RefreshGraph(){
	var y = Math.sin(myAbsisse/10) * 200;
	plotPoints(myAbsisse, y, 'red');
	myAbsisse += 5;
}
 
</script>
 
</head>
<body onload="InitGraph()">
	<div id="conteneur">
		<div id="graph"></div>	
	</div>
</body>
 
</html>

Mais ce n'est pas top : certains points ne sont pas terribles => y a t-il moyen de lisser tout ça ?

18/02/2009, 13h26
marcha

Hihi, ben ça va se compliquer salement. Si tu n'as plus un calcul par position x
il va falloir interpoler pour lisser tout ça, et à ma connaissance (maigre) il faut
passer par des spline
18/02/2009, 14h29
Emcy

1 pièce(s) jointe(s)

finalement, je laisse tombé le système de lissage : ça ne fait pas si moche que ça en fait.

Je viens de faire une version avec grille : ça rend pas mal :)
=> le problème vient de ma background-image qui impose de définir la largeur (max) de mon graph dès le dépard dans mon css (car si je modifie la largeur via javascript, l'image n'est pas redessinée)

1- comment résoudre ce problème ?
2- il y a toujours cette histoire de largeur max de la div qui va tendre vers l'infini : si on laisse trop longtemps le navigateur ouvert, il y a fort a parier que ça va bugger
18/02/2009, 15h30
marcha

Salut,

pour le background j'ai une autre idée.
applique à #conteneur et modifie le style background-position

Code:

document.getElementById('conteneur').style.backgroundPosition = "0 -" + offsetX + "px";

Ainsi tu n'as plus de soucis avec la largeur de #graph
19/02/2009, 10h05
Emcy

Merci

Effectivement cette méthode dois fonctionner

Je viens de faire des tests avec une autres méthode :
Je défini mon bloque DIV graph avec une largeur fixe 3 à 4 fois plus grande que la zone d'affichage du graphique. Lorsque je trace mes points, je déplace le DIV et lorsque j'arrive en bout de course, je remets l'offset du DIV à 0 et je déplace tous les points de mon graphique de façon à ce qu'ils soient positionnés dans la zone visible du graphique.
J'ai testé sous IE6, IE7, opera 9, FF 3 et safari 3
=> curieusement, on ne voit pas la courbe se redessiner lorsqu'on fait l'offset (sauf sous opera) : cette méthode à l'inconvénient d'avoir un freeze du graphique pendant 1/4 secondes (le temps de déplacer tous les points) mais elle permet de pouvoir régler mon problème de largeur de DIV qui risque de tendre vers l'infini.

ça vous semble normale qu'on ne voit pas les points se redessiner sauf sous opera ? c'est un bug d'opera ou de tous les autres navigateurs ?
19/02/2009, 10h16
marcha

A mon avis, il n'y a pas besoin de déplacer les points, car si tu gère le
background sur le conteneur, alors ton div #graph n'a pas besoin d'avoir
de largeur, il sert que de référence pour le positionnement.

pour tester la viabilité de la solution, calcul le temps maximum d'utilisation
de ta page (disons 1ans me parait être une limite plus que respectable).
détermine quelle serait la position du div #graph après un an et fixe là comme
état initial, puis test si ça fonctionne :-)
19/02/2009, 10h33
Emcy

ok je vais tester ça (pas tout de suite, je suis sur un autre truc). merci