2015-06-28 10 views
3

У меня есть следующий код, который получает значения из базы данных и делает простой линейный график (время отклика на предупреждение против времени UTC). Он отлично работает в то время как статический, но теперь я хочу получить данные в режиме реального времени (просто чтобы проверить его, например, получить каждый элемент каждые 2 секунды, то есть 2000 miliseconds). Вот код, который работает в статическом виде:Построение данных в реальном времени MySQL данных

<?php 
$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "test"; 

// Create connection 
$conn = new mysqli($servername, $username, $password, $dbname); 
// Check connection 
if ($conn->connect_error) { 
    die("Connection failed: " . $conn->connect_error); 
} 

$sql = "SELECT * FROM data"; 
$result = $conn->query($sql); 

if ($result->num_rows > 0) { 
    echo "<table><tr><th>User</th><th>Zulu</th><th>Server Time</th><th>Sample</th><th>Response Time</th></tr>"; 
    // output data of each row 
    $dataset1 = array(); 
    while($row = $result->fetch_assoc()) { 
     echo "<tr><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td><td>" . $row[""]. "</td></tr>"; 
     $dataset1[] = array(floatval($row[""]),intval($row[""])); 
    } 
    echo "</table>"; 
} else { 
    echo "0 results"; 
} 

$conn->close(); 
?> 

Как мы видим, данные хранятся в переменной $ DataSet1, а потом я просто есть простой скрипт, который графически его:

<script> 
     //put array into javascript variable 
     var dataset1 = <?php echo json_encode($dataset1); ?>; 
     var data = [ 
        { 
         data: dataset1, 
        }  
        ]; 
        var options = { 
        }; 
     $(function() { 
      $.plot($("#placeholder"), data,options); 
     }); 
</script> 

Мой вопрос: Как я могу «поиграть» с этим $ dataset1, чтобы УСТАНОВИТЬ его каждые 2000 мс?

И это то, что я получаю: Duplicated plot

+0

Пожалуйста, разместите свой HTML –

ответ

3

Если вы хотите его каждую 2 секунды вы должны использовать .setTimeout() как .setInterval() может быть неточными.

Возможно, вам понадобится tweek this, чтобы получить значения для каждого вызова функции getData. Лучшим способом было бы как-то сохранить их в элементе, переданном функции.

Мне нужно, чтобы разместить свой HTML код, если вы хотите, чтобы я проверить это и создать JS скрипку для него.

(function($){ 

    $(function(){ //document.ready 

    }); 

    (function getData(element){ 

      var xval = xval ? xval : 0; 
      var yVal1 = Math.floor(Math.random()*11); 
      var yVal2 = Math.floor(Math.random()*11); 
      var datum1 = [xVal, yVal1]; 
      var datum2 = [xVal, yVal2]; 
      var data = data ? data : [[],[]];    
      var plot = $.plot(element, data); 
      data[0].push(datum1); 
      data[1].push(datum2); 
      if(data[0].length>10){ 
       data[0] = data[0].splice(1); 
       data[1] = data[1].splice(1); 
      } 
      xVal++; 
      plot.setData(data); 
      plot.setupGrid(); 
      plot.draw(); 
     } 
      setTimeout(function(){ 
       getData(element); 
      }, 2000); 

    })($('#chart4')); 



})(jQuery); 
+0

Я обновлю свой вопрос на весь код html. Теперь кажется, что я получаю сюжет правильно, но «дублируется». Может быть, вы знаете, что происходит. Я также приложу изображение. –

+0

thx для публикации этого. Я проверю это. –

+0

Спасибо вам большое заблаговременно. Прямо сейчас я получаю результат сюжета, так как хочу, но у меня есть две проблемы: - площадь участка уменьшается на каждой итерации -I получить 2 графика, я не знаю почему (синий и желтый один) –

Смежные вопросы