2015-09-07 3 views
0

Я использую географическую диаграмму Google в своем приложении. Я реплицирую пример, приведенный в ссылке с данными базы данных.Google Geo Charts: невозможно рисовать диаграмму с данными json

https://developers.google.com/chart/interactive/docs/gallery/geochart?hl=en

Массив данных

var data = google.visualization.arrayToDataTable([ 
     ['City', 'Population', 'Area'], 
     ['Rome',  2761477, 1285.31]]) 

в формате.

Я передаю данные аналогичным образом в переменную данных. но не видит диаграмму.

var arr=[]; 

     $.ajax({ 
      type: 'POST', 
      url: "LiveMap", 
      dataType: "json", 
      success: function (response) { 

       for (var i = 0; i < response.length; i++) { 
        var temp=[]; 
        var str=response[i].split(':'); 
        temp[0]=str[0]; 
        temp[1]=parseInt(str[1]); 
        temp[2]=parseInt(str[2]); 

        arr[i]=temp; 
       } 
      } 

     }); 

    google.load('visualization', '1', {'packages': ['geochart']}); 
    google.setOnLoadCallback(drawMarkersMap); 

     function drawMarkersMap() { 
      var data = new google.visualization.DataTable(); 
    data.addColumn("string","City"); 
    data.addColumn("number","Population"); 
    data.addColumn("number","Area"); 
    data.addRows(arr); 
     var options = { 
     region: 'IT', 
     displayMode: 'markers', 
     colorAxis: {colors: ['green', 'blue']} 
     }; 

     var chart = new google.visualization.GeoChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    }; 
    </script> 
    </head> 
    <body> 
    <div id="chart_div" style="width: 300px; height: 300px;"></div> 
    </body> 
</html> 

Ответ на Ajax вызова

result.put("Bhopal:300:200"); 
     result.put("Hyderabad:300:200"); 
     result.put("Vizag:300:200"); 
     result.put("Mysore:300:200"); 
     result.put("Delhi:300:200") 

;

ответ

0

попытка держать следующий код после того, как цикл

google.load('visualization', '1', {'packages': ['geochart']}); 
google.setOnLoadCallback(drawMarkersMap); 

Как это:

$.ajax({ 
      type: 'POST', 
      url: "LiveMap", 
      dataType: "json", 
      success: function (response) { 

       for (var i = 0; i < response.length; i++) { 
        var temp=[]; 
        var str=response[i].split(':'); 
        temp[0]=str[0]; 
        temp[1]=parseInt(str[1]); 
        temp[2]=parseInt(str[2]); 

        arr[i]=temp; 
       } 
       google.load('visualization', '1', {'packages': ['geochart']}); 
       google.setOnLoadCallback(drawMarkersMap); 
      } 

     }); 
Смежные вопросы