Jauge dynamique - Javascript/PHP

Bonjour!

Voil�, c'est mon tout premier post sur ce forum ;).
Comme je d�bute j'esp�re que vous pourrez m'aider un peu, sait-on jamais...

La situation: j'aimerais faire une jauge dynamique. Avec un httprequest dans ma partie je r�cup�re un nombre al�atoire g�n�r� par du php. Mais j'aimerais que ma jauge bouge. Autrement dit que ma partie javascript re�oive r�guli�rement des nombres al�atoires g�n�r�s par mon php.

Vous avez une id�e de la d�marche ?

Merci d'avance

Un petit exemple sans PHP ni AJAX, mais le principe est l� :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Jauge</title>
    </head>
 
    <body>
		<progress id="jauge" min="0" max="100" value="50"></progress>
 
		<script type = "text/javascript">
			var timer = setInterval(jaugeUpdate, 1000);
			function jaugeUpdate(){
				var level = Math.floor(Math.random() * 100);
				document.getElementById('jauge').value = level;
			}
		</script> 
    </body>
</html>

Merci beaucoup Bovino, le timer c'�tait vraiment une super id�e :ccool:
Je m'en suis inspir�e dans un premier temps et �a a super bien march�.
Maintenant, je veux faire 2 jauges toujours aliment�es par mon fichier PHP. Ces 2 jauges ont un temps de recharge diff�rent. Par contre, pas de timer pour cette fois, je pars dans l'id�e d'utiliser un evenement (c'est pas gagn� :lol:).

Pour l'instant �a me donne �a:

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
<html>
  <head>
 
        <script type='text/javascript' src='http://www.google.com/jsapi'></script>
        <script type='text/javascript'>
          google.load('visualization', '1', {packages:['gauge']});
        </script>
        <script type="text/javascript">
 
        google.setOnLoadCallback(initChart);
 
        var nbreJauges = 2;
        var tabJauges = [];
        var options;
        var xhr;
 
        var tabLabels = ['a', 'b'];
        var tabValues = [0, 0];
 
        var tempsDiff = {debut : 0, fin : 2};
 
 
        function foTempsDiff(start, end)
        {
            this.start = start;
            this.end = end;
        }
 
        tempsDiff = new Object();
 
        tempsDiff [0] = new foTempsDiff(0, 5);
       tempsDiff [1] = new foTempsDiff(5, 10);
 
 
 
        function httpRequest(n){
 
            if(window.XMLHttpRequest)
                xhr = new XMLHttpRequest();
            else if(window.ActiveXObject) // Internet Explorer
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            else { // XMLHttpRequest pas supporté par le navigateur
                alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
                return;
                }
 
            xhr.open( "GET", "random.php?",  true);
            xhr.onreadystatechange = function() {
                alert("State="+xhr.readyState);
                if(xhr.readyState == 4) {
                    tabJauges[n] = eval("("+xhr.responseText+")");
                    updateJauges(n);
                    xhr.abort();
                    xhr.open( "GET", "random.php?tabValues[i]=n",  true);
                    e.fire("xhr");
                } else if (xhr.readyState == 1) {
                    sendXHR();
                }
            }
        }
 
 
 
        function t(callback){
            var xhr = new httpRequest(n);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                    callback(xhr);
                }
            };
 
            xhr.open("GET", "connexion.php?tabValues[i]=n", true);
        }
 
 
        t.addEventListener("xhr", function(){httpRequest(n)}, true);
        var e = new CustomEvent();
        e.prototype.constructor = t();
 
 
        function sendXHR() {
            xhr.send(null);
        }
 
 
        function initJauge() {
            options = {width: 800, height: 240,
            redFrom: 90, redTo: 100,
            yellowFrom:75, yellowTo: 90,
            minorTicks: 5};   
            for(i = 0; i < nbreJauges; i++)
            {
                tabJauges[i] = new google.visualization.Gauge(document.getElementById("chart_"+tabLabels[i]+"_div"));
                updateJauges(i);
            }
        }
 
 
 
        function updateJauges(n) {
            data = [];
            data[0]=[];
            data[1]=[];
            data[0][0]='Label';
            data[0][1]='Value';
            data[1][0]= tabLabels[n];
            data[1][1]= tabValues[n];
 
            data = google.visualization.arrayToDataTable(data);
            tabJauges[n].draw(data, options);
        }
 
 
        google.setOnLoadCallback(initJauges);
 
        httpRequest(n);
        sendXHR();
 
 
        </script> 
    </head>
 
<body>
    <div id='ja_div'></div>
    <div id='jb_div'></div>
 
  </body>
</html>

Pas encore tr�s au point,vu qu'elles s'affichent toutes les deux mais qu'elles ne bougent pas. Pour les �v�nements j'ai une sacr�e peine � comprendre comment le faire.

Une/des suggestions ?

Bonjour,

C'est correcte cet URL

Citation:

xhr.open("GET", "connexion.php?tabValues[i]=n", true);

?

A+.