Jauge dynamique - Javascript/PHP

**setupXHR** · 03/07/2012, 13h45

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

**Bovino** · 03/07/2012, 13h53

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

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

**setupXHR** · 03/07/2012, 18h48

Merci beaucoup Bovino, le timer c'était vraiment une super idée

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é

).

Pour l'instant ça me donne ça:

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

**andry.aime** · 04/07/2012, 07h24

Bonjour,

C'est correcte cet URL

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

?

A+.

Jauge dynamique - Javascript/PHP

JavaScript

Discussions similaires

Partager

Partager