動的にGoogleライングラフに行を追加して、設定間隔ajaxをオフにしますか？

Question

設定間隔のajax呼び出しでデータを取得するたびに、Googleライングラフに行を動的に追加するにはどうすればよいですか？

私は、動的とすぐにページがロードされ、設定された間隔の後に、次のようにAJAXクエリからフェッチされた新しい値を追加する必要がありますよう行の追加をしたいの代わりに、今、このコード

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

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'Day'); 
    data.addColumn('number', 'Guardians of the Galaxy'); 
    data.addColumn('number', 'The Avengers'); 
    data.addColumn('number', 'Transformers: Age of Extinction'); 

    data.addRows([ 
    [1, 37.8, 80.8, 41.8], 
    [2, 30.9, 69.5, 32.4], 
    [3, 25.4, 57, 25.7], 
    [4, 11.7, 18.8, 10.5], 
    [5, 11.9, 17.6, 10.4], 
    [6, 8.8, 13.6, 7.7], 
    [7, 7.6, 12.3, 9.6], 
    [8, 12.3, 29.2, 10.6], 
    [9, 16.9, 42.9, 14.8], 
    [10, 12.8, 30.9, 11.6], 
    [11, 5.3, 7.9, 4.7], 
    [12, 6.6, 8.4, 5.2], 
    [13, 4.8, 6.3, 3.6], 
    [14, 4.2, 6.2, 3.4] 
    ]); 

    var options = { 
    chart: { 
     title: 'Box Office Earnings in First Two Weeks of Opening', 
     subtitle: 'in millions of dollars (USD)' 
    }, 
    width: 900, 
    height: 500 
    }; 

    var chart = new google.charts.Line(document.getElementById('linechart_material')); 

    chart.draw(data, options); 
} 

を持っている：

setInterval(ajaxCall, 300000); //300000 MS == 5 minutes 

function ajaxCall() { 

    $.ajax({ 
       type: "GET", 
       crossDomain: true, 
       dataType: "json", 
       data: { 
        format: 'json' 
         }, 
       url: 'http://192.168.1.156:8025/json', 
       success: function(jsondata) { 
        jsn = JSON.stringify(jsondata, undefined, 2); 

        // put data in jsn to google line chart. 

        // Above Google Line chart to load here 
        // data = new google.visualization.DataTable(); 


         // dynamically add rows on each fetch success of ajax call 
       } 
      }); 
    //do your AJAX stuff here 
} 


{"arduino" : [{"location" : "Outdoor" , "temperatureInC" : "22.20" , "temperatureInF" : "71.96" , "dewPoint_in_Fahr" : "62.66" , "dewPoint_in_Cel" : "13.54" , "heat_index__in_Fahr" : "71.61" , "heat_index_in_Cel" : "22.00" , "humidity":"58"} , {"location" : "Drawing Room" , "temperatureInC" : "25.80" , "temperatureInF" : "78.44" , "dewPoint_in_Fahr" : "62.66" , "dewPoint_in_Cel" : "17.03" , "heat_index__in_Fahr" : "78.73" , "heat_index_in_Cel" : "25.96" , "humidity" : "58.50"}] , "pots" : [{"pot1" : "0"}]} 

Answer 1

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

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'Update'); 
 
    data.addColumn('number', 'temperatureInC'); 
 
    data.addColumn('number', 'temperatureInF'); 
 
    data.addColumn('number', 'humidity'); 
 

 
    var options = { 
 
    chart: { 
 
     title: 'temperature vs. humidity' 
 
    }, 
 
    width: 900, 
 
    height: 500 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('linechart_material')); 
 
    ajaxCall(); 
 
    setInterval(ajaxCall, 5000); //300000 MS == 5 minutes 
 
    function ajaxCall() { 
 
    $.ajax({ 
 
     type: 'GET', 
 
     crossDomain: true, 
 
     dataType: 'json', 
 
     data: { 
 
     format: 'json' 
 
     }, 
 
     url: 'http://san.gotdns.ch:8025/json', 
 
    }).done(function (jsonData) { 
 
     var chartData = jsonData.arduino; 
 
     if (chartData.length > 0) { 
 
     data.addRow([ 
 
      data.getNumberOfRows() + 1, 
 
      parseFloat(chartData[0].temperatureInC), 
 
      parseFloat(chartData[0].temperatureInF), 
 
      parseFloat(chartData[0].humidity) 
 
     ]); 
 
     } 
 
     chart.draw(data, options); 
 
    }); 
 
    } 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="linechart_material"></div>

...次の作業スニペットを参照してください