[AJAX] Tracer graphique en temps réel

**Emcy** · 17/02/2009, 09h47

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

**DoubleU** · 17/02/2009, 09h55

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.

**Emcy** · 17/02/2009, 09h58

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é) ?

**DoubleU** · 17/02/2009, 10h06

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

**Emcy** · 17/02/2009, 11h31

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

**Bovino** · 17/02/2009, 11h36

Non, ton approche est réalisable... cependant, ça ira pour une courbe, mais pour 6, tu ne pourras pas les superposer...

**Emcy** · 17/02/2009, 12h52

c'est vrai que ça ne fonctionnerait pas si j'en avais plusieurs .. malheureusement il faudrait impérativement que je puisse en afficher plusieurs

**Bovino** · 17/02/2009, 13h07

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

**marcha** · 17/02/2009, 13h29

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 :

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

**Emcy** · 17/02/2009, 15h33

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

**marcha** · 17/02/2009, 15h52

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.

**marcha** · 17/02/2009, 16h16

Voilà l'idée:

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

**Emcy** · 17/02/2009, 17h15

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)

**Emcy** · 18/02/2009, 09h21

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 :

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
 
<!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) ?

**marcha** · 18/02/2009, 09h35

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 :

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
 
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;
}

**marcha** · 18/02/2009, 09h38

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

**Emcy** · 18/02/2009, 10h58

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 :

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

**marcha** · 18/02/2009, 13h26

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

**Emcy** · 18/02/2009, 14h29

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

**marcha** · 18/02/2009, 15h30

Salut,

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

Code :

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

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

Ainsi tu n'as plus de soucis avec la largeur de #graph

[AJAX] Tracer graphique en temps réel

JavaScript

Discussions similaires

Partager

Partager