동적으로 Google 차트를 이동하고 업데이트하는 방법

나는이 Google 차트를 움직이는 방법을 모르고 정직하게 다시 도움을 요청할 것입니다. 정말 나쁘게 필요합니다 .. 내 Google을 만들고 싶습니다. 내 데이터베이스가 자동으로 데이터를 수집하기 때문에 데이터베이스에서 차트가 이동했습니다. 차트를 새로 고치지 않고 자동 업데이트로 옮기고 싶습니다.동적으로 Google 차트를 이동하고 업데이트하는 방법

<!DOCTYPE html> 
<html> 
    <head> 
    <!-- EXTERNAL LIBS--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script src="https://www.gstatic.com/charts/loader.js"></script> 
    <script src="jquery.min.js"></script> 
    <!-- EXAMPLE SCRIPT --> 
    <script> 

    google.charts.load('current', { 
    callback: drawChart, 
    packages: ['corechart'] 
    }); 

     // onload callback 
     function drawChart() { 



     // JSONP request 
     var jsonData = $.ajax({ 
      url: 'livedata.php', 
      dataType: 'json', 
     }).done(function (results) { 

      var data = new google.visualization.DataTable(jsonData); 

      data.addColumn('date', 'time_stamp'); 
      data.addColumn('number', 'ph'); 
      data.addColumn('number', 'moist'); 


      $.each(results, function (i, row) { 

      data.addRow([ 
     new Date(row.time_stamp), 
      parseFloat(row.ph), 
      parseFloat(row.moist) 
      ]); 
      }); 

      var chart = new google.visualization.AreaChart($('#chart').get(0)); 

      chart.draw(data, { 
      title: 'Soil Analysis', 
      curveType: 'function', 
      displayAnnotations: true 
      //legend: { position: 'bottom' } 
      //pointSize: 10 
      }); 

     }); 

     } 
     drawChart(); 
    setInterval(drawChart, 10000); 

     // load chart lib 


     // call drawChart once google charts is loaded 
    // google.setOnLoadCallback(drawChart); 

    </script> 



    </head> 
    <body> 
    <div id="chart" style="width: 80%;height:380px"></div> 
    </body> 
</html>

나는이 또한 이동하고 내 차트에 영향을 미칠 것인지 잘 모릅니다 다음 코드의 출력뿐만 아니라 다음 다음 내 자바 스크립트 코드

$query = "SELECT readingID, moist, ph , time_stamp FROM soilReading"; 
$result = mysqli_query($connection, $query); 

$data_points = array(); 
while($row = mysqli_fetch_array($result)){ 
$wholedate = date('c',strtotime($row['time_stamp'])); 
$monthNum = date('m',strtotime($row['time_stamp'])); 
$DayNum = date('d', strtotime($row['time_stamp'])); 
$yearnum = date('Y', strtotime($row['time_stamp'])); 
$dateObj = DateTime::createFromFormat('!m', $monthNum); 
$monthName = $dateObj->format('F'); 
if(($monthNum == "9")&&($yearnum == "2017")){ 
     if (array_key_exists($DayNum, $data_points)) { 
     $data_points[$DayNum]->ph += $row['ph']/$data_points[$DayNum]->ph = count($row['ph']); 
     $data_points[$DayNum]->moist += $row['moist']; 
      }else{ 
     //$data_points[$DayNum]->ts = $yearnum."".$monthName ."".$DayNum; 
    // $data_points[$DayNum]->ts = $yearnum."".$monthNum."".$DayNum; 
     $data_points[$DayNum]->time_stamp =$wholedate; 
     //$data_points[$DayNum]->ts = $wholedate;  
     $data_points[$DayNum]->ph = $row['ph']/$data_points[$DayNum]->ph = count($row['ph']); 
     $data_points[$DayNum]->moist = $row['moist']; 

    } 
} 
    } 
$jsonResult = json_encode(array_values($data_points)); 
echo $jsonResult;

: 내 PHP는 JSON 코드는

출처

2017-09-11 njhelloworld

무엇이 사용의 요점입니까 jsonData 변수가 있습니까? 그것은 전혀 필요하지 않은 것처럼 보입니다. 시도해보십시오.

$.ajax({ 
    url: 'livedata.php', 
    dataType: 'json', 
}).done(function (results) {  
var data = new google.visualization.DataTable();

도 시도한대로 google.setOnLoadCallback(drawChart);을 사용하십시오. drawChart은 Google Api가 완전히로드 된 후에 실행됩니다.

출처

2017-09-12 00:08:17 Thowk

으로 이동하면 animation을 말하고 있습니까?

그렇다면, 당신은 내가 '다음

에 하나의 데이터 세트에서 애니메이션을
차트를 수 있도록 새 데이터로 같은 차트 그리기 차트

에 대한 참조를 저장할 수 있습니다 또한 다음과 유사한 animation

시도 설정을위한 차트 옵션 ...

google.charts.load('current', { 
    callback: function() { 
    var chart = new google.visualization.AreaChart($('#chart').get(0)); 

    function drawChart() { 
     $.ajax({ 
     url: 'livedata.php', 
     dataType: 'json', 
     }).done(function (results) { 
     var data = new google.visualization.DataTable(); 
     data.addColumn('date', 'time_stamp'); 
     data.addColumn('number', 'ph'); 
     data.addColumn('number', 'moist'); 

     $.each(results, function (i, row) { 
      data.addRow([ 
      new Date(row.time_stamp), 
      parseFloat(row.ph), 
      parseFloat(row.moist) 
      ]); 
     }); 

     chart.draw(data, { 
      animation: { 
      startup: true, 
      duration: 1000 
      }, 
      title: 'Soil Analysis', 
      curveType: 'function', 
      displayAnnotations: true 
     }); 
     }); 
    } 
    drawChart(); 
    setInterval(drawChart, 10000); 
    }, 
    packages: ['corechart'] 
});

출처

2017-09-12 12:27:15 WhiteHat

다시 한번 감사 BU를 추가했습니다 t 나는 움직이는 차트를 언급하지 않고 있습니다. 차트를 움직이는 실시간 차트를 말하고 있습니다 : https://canvasjs.com/editor/?id=https://canvasjs.com/example/gallery/dynamic/realtime_line /하지만 움직일 데이터는 내 데이터베이스에서 나온 것입니다. 내 json 파일 – njhelloworld

위의 애니메이션 없이는 효과가 있습니다.하지만 데이터 테이블에는 각기 다른 데이터 행이 필요합니다. 첫 번째 행이 제거되고 하나의 행이 추가되었습니다. 다시 그리기가 10 초보다 빨리 수행되어야합니다. – WhiteHat

그 점에 대해 감사드립니다. 글쎄요, 그걸 깨달으려는 것 같아요. – njhelloworld

동적으로 Google 차트를 이동하고 업데이트하는 방법

답변

관련 문제