更新Chartjsは、これは私が<strong>Chart.js</strong>ライブラリでチャートを描画するために作成したコードであるAJAX

Question

にデータをプッシュ：

$(document).ready(function(){ 

    $.ajax({ 
      url : "data.php", 
      type : "JSON", 
      success : function(data){ 

       var lung = data.length;   

       console.log(data); 

       var timestamp_utc = []; 
       var temperature = []; 


       for(var i in data) { 
        timestamp_utc.push(data[i].timestamp_utc); 
        temperature.push(data[i].temperature); 


       } 


       var config_temp = { 
        labels: timestamp_utc.slice(lung-10, lung), 
        datasets: [ 
         { 
          label: "temperature", 
          fill: false, 
          lineTension: 0.1, 
          backgroundColor: "rgba(0, 169, 252, 0.75)", 
          borderColor: "rgba(0, 169, 252, 1)", 
          pointRadius: "5", 
          pointColor: "rgba(0, 169, 252, 1)", 
          pointBorderColor: "#fff", 
          pointHoverBackgroundColor: "rgba(0, 169, 252, 1)", 
          pointHoverBorderColor: "rgba(0, 169, 252, 1)", 
          data: temperature.slice(lung-10, lung) 
         }] 
       }; 


       var ctx_temp = $("#mycanvas"); 

       var LineGraph_temp = new Chart(ctx_temp, { 
        type: 'line', 
        data: config_temp 
       }); 



    }, 

      error : function(data) { 

      } 
     }); 


    }); 

私は、グラフ15分ごとに更新します。 どうすればいいですか？

Answer 1

setIntervalメソッドを使用すると、チャートを更新データでレンダリングするコードを実行できます。

var pollInterval = 15000; //change this value as needed 
function renderChart() { 
    // put your existing code to render the chart here 
} 

$(function() { 
    window.setInterval(renderChart, pollInterval); 
});