Googleチャートをサーバーから受信したデータで更新する

Question

新しいデータでグラフを変更するにはどうすればよいですか？私は、コンソールから見ることができる私のサーバーへのAPIコールからデータを取得します。どのようにチャートを更新するのですか？

map.on('singleclick', function(evt) { 
    var coordinate = evt.coordinate; 
    var hdms = ol.proj.transform(
     coordinate, 'EPSG:3857', 'EPSG:4326'); 
     $.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0], 
     function(data) { 
      console.log(data); 
     }); 
    ); 
} 

Answer 1

1）負荷では、Google最初

google.charts.load置き換えることができます - >$(document).ready（または類似）

2） 3チャート
を作成）などのデータ

何かを得ます...

google.charts.load('current', { 
    packages: ['corechart'] 
}).then(function() { 
    // save reference to chart here 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 

    map.on('singleclick', function(evt) { 
     var coordinate = evt.coordinate; 
     var hdms = ol.proj.transform(
      coordinate, 'EPSG:3857', 'EPSG:4326'); 
      $.get("http://127.0.0.1:5000/stats?lat="+hdms[1]+"&lon="+hdms[0], 
      function(data) { 
       console.log(data); 
       // draw chart here 
       chart.draw(data); 
      }); 
     ); 
    }; 
}); 

---

あなたがデータテーブル

1を作成するには、いくつかの方法があるチャート

を描画するDataTableを作成する必要がありますUPDATE

）あなたはJSONを使用することができますが、それはである必要があります単純な配列データを使用することができfound here

var jsonData = { 
    cols: [ 
    {label: 'x', type: 'number'}, 
    {label: 'y', type: 'number'} 
    ], 
    rows: [ 
    {c:[{v: 0}, {v: 0}]}, 
    {c:[{v: 1}, {v: 1}]} 
    ] 
} 
var dataTable = new google.visualization.DataTable(jsonData); 

2）、及び静的Mとして、次の形式、 arrayToDataTable

var arrayData = [ 
    ['x', 'y'], 
    [0, 0], 
    [1, 1] 
]; 
var dataTable = google.visualization.arrayToDataTable(arrayData); 

3）または手動をethod列と行

var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn('number', 'x'); 
dataTable.addColumn('number', 'y'); 
dataTable.addRow([0, 0]); 

// -- or addRows -- 

dataTable.addRows([ 
    [0, 0], 
    [1, 1] 
]);