Google Charts from Json

Question

Google Charts APIを使用してグラフを作成しようとしています。私のデータは、図のようにjsonファイルとして保存されます。

{ 
     "1":[{"a":0,"d":0}], 
     "2":[{"a":0,"d":0}], 
     "3":[{"a":6,"d":62.92}], 
     "4":[{"a":1.57,"d":75.32}], 
     "5":[{"a":1.67,"d":66.45}], 
     "6":[{"a":1.25,"d":76}], 
     "7":[{"a":1.36,"d":75.08}], 
     "8":[{"a":1.59,"d":69.27}], 
... 
    } 

私はjsonファイルを取り込み、オブジェクトをjavascript配列にプッシュしています。問題なく動作します。私は何が起こっているのかを理解するためにこれらの行を追加しました。しかし、GoogleのAPIは、私の値を受け入れないとだけ

dots.push([5, 50]); 
dots.push([7,60]); 

は、ここに値の私のコード

function drawDots() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'a'); 
    data.addColumn('number', 'd'); 

    dots = new Array; 
    dots.push([5, 50]); 
    dots.push([7,60]); 

    $.getJSON("/graph/graph.json", function(json) 
    { 
     $.each(json, function(id, num) 
     { 
      $.each(num, function(i, e) 
      {   
       dots.push([e.a, e.d]); 
      }); 
     }); 

    }); 

    data.addRows(dots); 

    var options = { 
     title: '', 
     hAxis: {title: 'Data 1', minValue: 0, maxValue: 100}, 
     vAxis: {title: 'Data 2', minValue: 0, maxValue: 100}, 
     legend: 'none' 
    }; 

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 

    chart.draw(data, options); 
} 

データ型のショーの数が、私はまたに）（evalを試してみました。コンソールでは、値は配列のように見えます。何が間違っているのか理解できません。

ここには、ドットとデータのコンソールログとスクリーンショットがあります。

Answer 1

問題は、非同期のgetJSON呼び出しにあります。 getJSON呼び出しが発生しますが、まだgraph.jsonの内容を取得している間は、残りのコードが実行されます。これは、チャートが描画された後にgetJSONコールバックが実行されることを意味します。

ソリューション：getJSONコールバックにチャートの描画コードを移動：

function drawDots() 
{ 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'a'); 
    data.addColumn('number', 'd'); 

    dots = new Array; 
    dots.push([5, 50]); 
    dots.push([7,60]); 

    $.getJSON("/graph/graph.json", function(json) 
    { 
     $.each(json, function(id, num) 
     { 
      $.each(num, function(i, e) 
      {   
       dots.push([e.a, e.d]); 
      }); 
     }); 

     data.addRows(dots); 

     var options = { 
      title: '', 
      hAxis: {title: 'Data 1', minValue: 0, maxValue: 100}, 
      vAxis: {title: 'Data 2', minValue: 0, maxValue: 100}, 
      legend: 'none' 
     }; 

     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 

     chart.draw(data, options); 
    }); 
}