Google Charts holen von Json

Question

Ich versuche, Diagramme mit Google Charts Api zu erstellen. Meine Daten werden wie gezeigt als JSON-Datei gespeichert.

{ 
     "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}], 
... 
    } 

Ich hole Json-Datei, schob die Objekte zu einem Javascript-Array. Es funktioniert ohne Probleme. Ich habe diese Zeilen hinzugefügt, um zu verstehen, was passiert. Allerdings hat Google Api nicht meine Werte annehmen und zeigt nur

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

Hier ist mein Code

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); 
} 

Datentyp der Werte sind die Nummer, habe ich auch versucht, eval() zu. In der Konsole sind Werte in Array. Kann nicht verstehen, was falsch ist.

Hier ist das Konsolenprotokoll von Punkten und Daten mit einem Screenshot.

Answer 1

Das Problem ist mit dem asynchronen getJSON-Aufruf. Der getJSON-Aufruf wird ausgeführt, aber während der Inhalt von graph.json abgerufen wird, wird der Rest des Codes ausgeführt. Dies bedeutet, dass der getJSON-Callback nach dem Zeichnen des Diagramms ausgeführt wird.

Lösung: die Diagrammzeichencode in den getJSON Rückruf verschieben:

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); 
    }); 
}