Googleグラフが表示されない

Question

ajax呼び出しからいくつかのデータが取得されており、ajax呼び出しの成功時にグラフを表示したいと考えています。私は現在、デフォルトのグラフを使用しており、グラフにいくつかの静的データを表示しようとしている機能をチェックします。 しかし、要素 'asSvSs'をクリックすると、開発者ツールのインスペクタでグラフデータが表示されますが、ページには何も表示されません。

私は間違っていますか？

$(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

...、最初

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