Graphique Google n'affiche pas

Question

Je reçois des données d'un appel ajax et voudrais afficher un graphique sur le succès de l'appel ajax. Pour vérifier la fonctionnalité, j'utilise actuellement un graphique par défaut et j'essaie d'afficher des données statiques sur le graphique. mais quand je clique sur l'élément 'asSvSs' L'inspecteur des outils de développement affiche les données du graphique mais rien n'est affiché sur la page.

Qu'est-ce que je fais mal?

$(document).on('click', '.asDvSs', function(e){ 

var uid = $('#sesval').data('uid'); 
var apikey = $('#sesval').data('key'); 
var gateway_id = $(this).data('gateway_id'); 
var device_id = $(this).data('device_id'); 
var device_type = $(this).data('device_type'); 

if(uid!= '' && apikey!= '') { 
    $.ajax({ 
     url: basePathUser + apiUrlAnalyticsDeviceSensorData + '/' + gateway_id + '/' + device_id + '/' + device_type, 
     type: 'GET', 
     headers: { 
      'uid': uid, 
      'Api-Key': apikey 
     }, 
     contentType: 'application/json; charset=utf-8;', 
     dataType: 'json', 
     async: false, 
     beforesend: function(xhr){ 
      setRequestHeader("uid", uid); 
      setRequestHeader("Api-Key", apikey); 
     }, 
     success: function(data, textStatus, xhr) { 
    google.charts.load('current', {'packages':['corechart', 'line']}); 
    google.charts.setOnLoadCallback(drawChart); 

    function drawChart() { 

     var data = google.visualization.arrayToDataTable([ 
        ['Year', 'Sales', 'Expenses'], 
        ['2004', 1000,  400], 
        ['2005', 1170,  460], 
        ['2006', 660,  1120], 
        ['2007', 1030,  540] 
      ]); 

     var options = { 
      title: 'Temperature Streaming', 
      width: 900, 
      height: 500, 

     hAxis: { 
       title: 'time' 
      }, 
      vAxis: { 
       title: 'device_value' 
      } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('countries')); 

    chart.draw(data, options); 

} 
     } 
    }); 
} 
}); 

Answer 1

est recommandé de charger google premier,
qui ne doit se produire une fois par chargement de la page,
pas une seule fois par carte

configuration essai similaire à la suite ...

google.charts.load('current', { 
    callback: loadPage, 
    packages: ['corechart'] 
}); 

function loadPage() { 
    $(document).on('click', '.asDvSs', function(e){ 
    var uid = $('#sesval').data('uid'); 
    var apikey = $('#sesval').data('key'); 
    var gateway_id = $(this).data('gateway_id'); 
    var device_id = $(this).data('device_id'); 
    var device_type = $(this).data('device_type'); 

    if(uid!= '' && apikey!= '') { 
     $.ajax({ 
      url: basePathUser + apiUrlAnalyticsDeviceSensorData + '/' + gateway_id + '/' + device_id + '/' + device_type, 
      type: 'GET', 
      headers: { 
       'uid': uid, 
       'Api-Key': apikey 
      }, 
      contentType: 'application/json; charset=utf-8;', 
      dataType: 'json', 
      async: false, 
      beforesend: function(xhr){ 
       setRequestHeader("uid", uid); 
       setRequestHeader("Api-Key", apikey); 
      }, 
      success: function(data, textStatus, xhr) { 
      var data = google.visualization.arrayToDataTable([ 
       ['Year', 'Sales', 'Expenses'], 
       ['2004', 1000,  400], 
       ['2005', 1170,  460], 
       ['2006', 660,  1120], 
       ['2007', 1030,  540] 
      ]); 

      var options = { 
       title: 'Temperature Streaming', 
       width: 900, 
       height: 500, 
       hAxis: { 
       title: 'time' 
       }, 
       vAxis: { 
       title: 'device_value' 
       } 
      }; 

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