Графики Google api после вызова ajax

У меня возникла проблема с визуализацией данных с диаграммами Google api после вызова ajax.Графики Google api после вызова ajax

Сначала я сделал вызов ajax и достал объект json. После этого я хочу извлечь некоторые данные из json и нарисовать калибровочную диаграмму. Получение json и извлечение данных прекрасно работают, но когда я пытаюсь загрузить диаграмму, тело удаляется, и я получаю пустой/белый экран. Кто-нибудь знает, что я делаю неправильно? Я также пытался записать значения кода для диаграммы вместо того, чтобы принимать значения json (но сохранял вызов ajax перед загрузкой диаграммы), но это не сработало.

function loadStats(){ 
    var http = getRequestObject(); 
    var city = "berlin"; 
    http.open("GET", "getTwitterSentiments.php?city="+city, true); 
    http.onreadystatechange=function() { 
     getStatistic(http) 
    }; 
    http.send(null); 
} 

function getStatistic(request) { 
    if ((request.readyState == 4) && (request.status == 200)) { 
     var data = request.responseText; 
     var JSONStats = eval("(" + data + ")"); 
     loadGauge(JSONStats.sentiment_index); 
    } 

function loadGauge(sentiment){ 
    google.load('visualization', '1', {packages:['gauge']}); 
    google.setOnLoadCallback(drawGauge); 
    function drawGauge() { 
     var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'], 
      ['Test', sentiment]  
     ]); 

     var options = { 
      width: 100, 
      height: 100, 
      redFrom: 0, 
      redTo: 45, 
      yellowFrom: 45, 
      yellowTo: 55, 
      greenFrom: 55, 
      greenTo: 100, 
      minorTicks: 10 
     }; 

     var chart = new google.visualization.Gauge(document.getElementById('testgchart')); 
     chart.draw(data, options); 
    } 
}

источник

2012-06-21 anel

Поскольку вы не указали никаких ответов как правильно, как вы решили проблему? Я тоже застрял в этом. – rajpy

Я предполагаю, что ваш элемент testgchart не загружать в DOM все же, ваш код должен работать.

Я привел пример из вашего кода:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script src="https://www.google.com/jsapi"></script> 
    <script> 
    function loadGauge(val){ 
     google.load('visualization', '1', {packages:['gauge']}); 
     google.setOnLoadCallback(drawGauge); 
     function drawGauge() { 
      var data = google.visualization.arrayToDataTable([ 
       ['Label', 'Value'], 
       ['Test', val], 
      ]); 

      var options = { 
       width: 100, 
       height: 100, 
       redFrom: 0, 
       redTo: 45, 
       yellowFrom: 45, 
       yellowTo: 55, 
       greenFrom: 55, 
       greenTo: 100, 
       minorTicks: 10 
      }; 


      var chart = new google.visualization.Gauge(document.getElementById('average')); 
      chart.draw(data, options); 
     } 
    } 
    </script> 
    </head> 
    <body> 
    <div id="average"></div> 
    <script>loadGauge(99)</script> 
    </body> 
</html>

Но это не работает, если вы удалите эту строку <script>loadGauge(99)</script> и заменить тело тега с <body onload="loadGauge(99)">. Вероятно, вы делаете что-то подобное.

Если вы уверены, что присутствует элемент testgchart, введите логин loadGauge и скажите, действительно ли он вызван getStatistic.

источник

2012-06-23 10:03:45

Попробуйте использовать функцию обратного вызова google.load().

Например, для кода, попробуйте следующее:

function loadGauge(sentiment){ 
    google.load('visualization', '1.0', {'packages':['gauge'], 'callback': drawGauge}); 

} 

function drawGauge(){ 
... 
chart.draw(data, options); 
}

Для получения дополнительной информации обратитесь к разделу 'Динамическая загрузка' из Google Loader Developer Guide: https://developers.google.com/loader/#Dynamic

Если я правильно понимаю, называя loadGauge () несколько раз будет не вызывать несколько поездок на серверы Google для загрузки необходимых API, но только один раз.

источник

2012-10-17 19:39:24 mohitp

Отметьте как правильный ответ! –

Графики Google api после вызова ajax

ответ

Смежные вопросы