Добавить динамические данные в линейную диаграмму из базы данных mysql с помощью высокоскоростных диаграмм

Question

Я хочу добавить данные в свою линейную диаграмму с помощью ajax или json, теперь я должен перезагрузить всю веб-страницу, чтобы показать свои новые данные на диаграмме. Но я хочу, чтобы показать данные в реальном времени путем добавления точки, как эти ссылки:

jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/dynamic-update/

www.highcharts.com/studies/live-server.htm

Я пытаюсь получить мои данные из MySQL, чтобы добавить на диаграмме, но ничего JSON произошло. Это мой код в лайв-сервера data.php:

<?php 

header("Content-type: text/json"); 


include_once 'include/connection.php'; 
$db = new DB_Class(); 


    $query = "select distinct idchip from datatable "; 
    $result = mysql_query($query); 
    $rows = array(); 
    $count = 0; 

    while($row = mysql_fetch_array($result)) { 
     $SQL1 =  "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." datetime DESC limit 0,1 "; 

     $result1 = mysql_query($SQL1); 

     while ($rows = mysql_fetch_array($result1)) { 
      $data[] = $rows['1']; 
      $datatime[] = 'moment('.$rows['0'].').valueOf()'; 
     } 

     // The x value is the current JavaScript time, which is the Unix time multiplied 
     // by 1000. 
     $x = $datatime; 
     // The y value is a random number 
     $y = $data; 
    } 


// Create a PHP array and echo it as JSON 
$ret = array($x, $y); 
echo json_encode($ret); 
?> 

и это то, что я использовал, чтобы получить данные и показать на графике в моей странице index.php.

var chart; // global 
    /** 
    * Request data from the server, add it to the graph and set a timeout to request again 
    */ 
    function requestData() { 
     $.ajax({ 
      url: 'live-server-data.php', 
      success: function(point) { 
       var series = chart.series[0], 
        shift = series.data.length > 20; // shift if the series is longer than 20 

       // add the point 
       chart.series[0].addPoint(eval(point), true, shift); 

       // call it again after one second 
       setTimeout(requestData, 1000); 
      }, 
      cache: false 
     }); 
    } 

    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       defaultSeriesType: 'spline', 
       events: { 
        load: requestData 
       } 
      }, 
      title: { 
       text: 'Live random data' 
      }, 
      xAxis: { 
       type: 'datetime', 
       tickPixelInterval: 150, 
       maxZoom: 20 * 1000 
      }, 
      yAxis: { 
       minPadding: 0.2, 
       maxPadding: 0.2, 
       title: { 
        text: 'Value', 
        margin: 80 
       } 
      }, 
      series: [{ 
       name: 'Random data', 
       data: [] 
      }] 
     });  
    }); 

Это мой график, который я перегрузить страницу, чтобы получить новые данные прямо сейчас, но я хочу, чтобы добавить новую точку, чтобы наметить для «реального времени»

Answer 1

Я предполагаю, что у вас есть несколько рядов в графе, где бэкэнд предоставляет одну точку за серию за раз.

Для простоты я предлагаю вам вернуть время в миллисекундах. Я не слишком силен в PHP, но я думаю, суть ясна

<?php 

header("Content-type: text/json"); 


include_once 'include/connection.php'; 
$db = new DB_Class(); 


    $query = "select distinct idchip from datatable "; 
    $result = mysql_query($query); 
    $rows = array(); 
    $count = 0; 

    while($row = mysql_fetch_array($result)) { 
     $SQL1 =  "SELECT datetime,temperature FROM `datatable` WHERE idchip=".$row['0']." ORDER BY datetime DESC limit 0,1 "; 

     $serie = new StdClass; 
     $serie->name = $row['0']; 
     $result1 = mysql_query($SQL1); 

     $points = array(); 
     while ($rows = mysql_fetch_array($result1)) { 
      $points[] = array(strtotime($rows['0']) * 1000, $rows['1']); 
     } 

     $serie->data = $points; 
     $series[] = $serie; 
    } 


// Create a PHP array and echo it as JSON 
$ret = $series; 
echo json_encode($ret); 
?> 

стороне клиента код будет:

var chart; 
var chartSeries = {}; 
var latestTimeReported = {}; 

function requestData() { 

    $.ajax({ 
    url: 'live-server-data.php', 
    success: function(seriesUpdate) { 

     //in case initializer of highcharts is too quick - skip the update 
     if (!chart) { 
     setTimeout(requestData, 1000); 
     return; 
     } 

     $.each(seriesUpdate, function (serieIndex, serieUpdate) { 
     var existingSerie = chartSeries[serieUpdate.name]; 
     var newPoint = serieUpdate.data[0]; 
     var lastInsertedTime = latestTimeReported[serieUpdate.name];   

     if (lastInsertedTime && lastInsertedTime < newPoint[0]) { 
      console.log('Attempt inserting old data!!!!'); 
      return; 
     } 

     latestTimeReported[serieUpdate.name] = newPoint[0]; 

     if (existingSerie) { 
      var shift = existingSerie.data.length > 20; 
      existingSerie.addPoint(newPoint , true, shift); 
     } else { 
      var newSerie = chart.addSeries({       
      name: serieUpdate.name, 
      data: serieUpdate.data 
      }, true); 
      chartSeries[serieUpdate.name] = newSerie; 
     } 

     }); 

     // call it again after one second 
     setTimeout(requestData, 1000); 
    }, 
    cache: false 
    }); 
} 

$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      defaultSeriesType: 'spline', 
      events: { 
       load: requestData 
      } 
     }, 
     title: { 
      text: 'Live random data' 
     }, 
     xAxis: { 
      type: 'datetime', 
      tickPixelInterval: 150, 
      maxZoom: 20 * 1000 
     }, 
     yAxis: { 
      minPadding: 0.2, 
      maxPadding: 0.2, 
      title: { 
       text: 'Value', 
       margin: 80 
      } 
     }, 
     series: [] 
    }); 

Вы можете увидеть новый обновленный пример здесь http://plnkr.co/edit/OqMofEGDadF9J3Uit8qD

Answer 2

шоу Msgstr "Попытка вставить старые данные !!!!". и нет Показать данные в реальном времени.

Дисплей

JSON