PROBLEM UPDATING A REALTIME FLOT GRAPH WITH JQUERY

PROBLEM UPDATING A REALTIME FLOT GRAPH WITH JQUERY

Hi my friends:
I am trying to create a real-time graph with flot plotting library.
I am doing it this way:
1) The initial data i am retrieving it with  this PHP script: "param_pozos_linea2.php". This scripts brings me the data in a string like this:
                     [[1357296902000,271.9],[
1357296603000,267.26],[1357296303000,268.3],
                      [1357296002000,261.6],[1357295703000,184.91],[1357295403000,27.09],
                      [1357295103000,103.2]]

2) The new data i am fetching it with $.get method in jquery ( see actualiza_data() function ), whichs connects to param_pozos_linea3.php" script and brings a new graph point like this: "[1357296902000,271.9]" and inserts it into the "res" array.

3) Then the graph is updated with update() function.

The problem is that the graph is not updating automatically, i am not sure if i am doing it well.
I send you the code i am using.
Can you please help me??
Thanks in advance.




  1. <?php
  2. include "param_pozos_linea2.php";
  3. ?>
  4. <script type="text/javascript">
  5. $(function () {
  6.  
  7.     var data_inicial=<?php echo $pres_cab_l; ?>;
  8.     data_inicial=data_inicial.reverse();
  9.     function actualiza_data()
  10.     {
  11.     var res=[];
  12.      if (data_inicial.length > 0)
  13.     {
  14.         res = data_inicial.slice(1);
  15.     }
  16.         while (res.length < 144)
  17.     {
  18.         $.get("param_pozos_linea3.php", function (datos){
  19.         res.push(datos);
  20.         });
  21.     }
  22.      return res;
  23.     }
  24.     // control de velocidad
  25.     var updateInterval = 3000;
  26.     $("#updateInterval").val(updateInterval).change(function () {
  27.         var v = $(this).val();
  28.         if (v && !isNaN(+v)) {
  29.             updateInterval = +v;
  30.             if (updateInterval < 1)
  31.                 updateInterval = 1;
  32.             $(this).val("" + updateInterval);
  33.         }
  34.     });
  35.     // setup plot
  36.     var options = {
  37.         series: { shadowSize: 0 }, // drawing is faster without shadows
  38.         yaxis: { min: 0, max: 6500 },
  39.         xaxis: { mode:"time",tickLength: 5, timeformat: "%d/%m - %h:%M %p"}
  40.     };
  41.     var plot = $.plot($("#placeholder"), [ <?php echo $pres_cab_l; ?> ], options);
  42.     function update() {
  43.         plot.setData([ actualiza_data() ]);
  44.         plot.draw();
  45.         setTimeout(update, updateInterval);
  46.     }
  47. update();
  48. });
  49. </script>