Discussion :

[betaplus]

Bonjour à tous,

J'ai un petit souci et de très maigres connaissances en programmation HTML/JS/PHP, j'espère que vous saurez m'aider.

J'ai fait une page web qui m'affiche quelques informations dont l'heure du serveur, la température et un graph que je souhaite mettre à jour toutes les minutes.

Pour ce qui est de l'heure et de la température j'y parviens mais par pour le graph.


Depuis 3 jours que je cherche à me documenter et à essayer de comprendre mais il me manque quelque chose. Voici la partie du code qui coince :

Code html :

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
<div id="myDiv"></div>
      <script>
        $(document).ready(function() {
          var trace1 = {
            type: "scatter",
            mode: "lines",
            name: 'scale',
 
            // ça fonctionne puisqu'exécuté au moment du chargement de la page
            <?php include('./php/readScale.php') ?> 
 
            line: {color: '#17BECF'}
          }
 
          var data = [trace1];
 
          var layout = {
            title: 'watch scale',
            xaxis: { title: 'temps',
                     autorange: true,
                     rangeselector: {buttons: [
                        {
                          count: 1,
                          label: '1d',
                          step: 'day',
                          stepmode: 'backward'
                        },
                        {
                          count: 10,
                          label: '10d',
                          step: 'day',
                          stepmode: 'backward'
                        },
                        {step: 'all'}
                      ]},
                     type: 'date'
            },
            yaxis: { title: 'weight (g)' }
          };
          Plotly.newPlot('myDiv', data, layout); //<- jusqu'ici tout se passe bien au chargement de la page 
 
          var refreshId = setInterval(function() {
                
                //si je teste ça c'est ok puisque ça se passe côté client
                //data[0]['x'] = ["1","2","3","4","5"]; 
                //data[0]['y'] = ["10","120","32", 100*Math.random(), 130*Math.random()];
                //Plotly.redraw('myDiv');
 
                $.load('./php/updateGraph.php'); //<- ceci ne fonctionne pas comme je le pense
                Plotly.redraw('myDiv');
 
 
            },10000);
            $.ajaxSetup({ cache: false })
        });
 
 
      </script>

voici ce qui est dans le fichier updateGraph.php :

Code php :

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
<?PHP
  function readCSV($csvFile){
      $file_handle = fopen($csvFile, 'r');
      while (!feof($file_handle) ) {
          $line_of_text[] = fgetcsv($file_handle, 100);
      }
      fclose($file_handle);
      return $line_of_text;
  }
 
 
  // Set path to CSV file
  $csvFile = '../test.csv';
  $csv = readCSV($csvFile);
 
  for($idxLine=1; $idxLine < sizeof($csv); $idxLine++)
  {
    if ($csv[$idxLine] != NULL)
    {
      $time[] = $csv[$idxLine][0];
      $amount[] = $csv[$idxLine][1];
    }
  }
 
  $js_array_time = json_encode($time);
  $js_array_amount = json_encode($amount);
  echo "data[0]['x'] = ". $js_array_time . ";\n";
  echo "data[0]['y'] = ". $js_array_amount . ";\n";
?>

Pour info, j'ai un programme en C++ qui me met à jour mon test.csv, mais je ne veux pas le lire en JS puisque ça impliquerait d'avoir le chemin et le nom du fichier directement accessible dans le code source HTML, ce que je ne veux pas.

Merci à toutes les bonnes âmes

[bonjourajax]

Bonjour,

Je n'ai pas bien compris le graph.php est chargé ou?
.load() ca permet de charger le contenu dans un élément

Code :

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

1
2
 
$('div').load('./php/updateGraph.php');

et ajaxSetup() tu peux le mettre au début de ton script ce sont les parametres pour toutes les futures requêtes ajax

Code :

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

1
2
3
 
$(document).ready(function() {
$.ajaxSetup()

et ou sont tes appels ajax
Cordialement

[betaplus]

C'est tout bon j'ai réussi à faire ce que je voulais.
Il fallait que je fasse une requête comme ci-dessous.
J'ai modifié mon updateGraph.php pour tout renvoyer dans un objet JSON.

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
 
var refreshId = setInterval(function() {
 
                var oReq = new XMLHttpRequest(); //New request object
                oReq.onload = function() {
                  retval = this.responseText;
                  obj = JSON.parse(retval);
                };
                oReq.open("get", "./php/updateGraph.php", false);
                oReq.send();
 
                data[0]['x'] = obj.time;
                data[0]['y'] = obj.amount;
                Plotly.redraw('myDiv');
 
            },10000);

Merci quand même !

[bonjourajax]

D'acc tant mieux alors