Google图表未显示

Question

I am getting some data from an ajax call and would like to display a chart on success of the ajax call. to check the functionality i am currently using a default chart and trying to display some static data on the chart. but when i click on the element 'asSvSs' The developer tools inspector shows the chart data but nothing is displayed on the page.

What am I doing wrong ?

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

recommend loading google first,
which only needs to happen once per page load,
not once per chart

try setup similar to following...

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