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