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

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

[AJAX] Tracer graphique en temps réel

JavaScript

Vue hybride

Discussions similaires

Partager

Partager