如何在收到 jquery .post() 函数的响应后加载 google 图表？

Question

我正在开发一个 UI，用户可以在其中选择开始日期和结束日期来检索数据。其中一些数据显示在表格中，我想显示与显示的这些数据相关的 google 图表。

当用户最终选择日期时，我使用 $.post() 函数发送这两个变量，如下所示：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>

$('#button-send').click(function() {
    var url_route = "{{URL::action('Controller@general_stats_post')}}";
    var start_date=$('#start_date_i').val();
    var end_date=$('#end_date_i').val();
    var datos = {start_date: start_date, end_date:end_date,_token:_token};

单击发送按钮后，我使用 $.post() 函数，效果很好：

$.post(url_route, datos, function(data,status){
  if(status=='success'){
    console.log('Dates sent successfully. Now the data retrieved are: '+data);
    var response = jQuery.parseJSON(data);
    if(response.events_types.length === 0){
        console.log('events_types is empty.');
    }
    else{
    console.log('The string for google charts got is: `'+response.events_types+'`');
    /*Here goes the google chart*/

    }
  }else if(status=='error'){
    console.log('Errors found');
  }
 });//end of .post() function
}); //end of onclick button-send

events_types 字符串是，例如：

[['Event','Total'],['Workshop',1],['Seminar',1]]

在 google's jsfiddles.

中完美运行

所以，我一直在尝试将 google 图表的 drawChart() 函数放在字符串 events_types 确实存在的 {} 中，如下所示：

        $.post(url_route, datos, function(data,status){
          if(status=='success'){
            console.log('Dates sent successfully. Now the data retrieved are: '+data);
            var response = jQuery.parseJSON(data);
            if(response.events_types.length === 0){
                console.log('events_types is empty.');
            }
            else{
            console.log('The string for google charts got is: `'+response.events_types+'`');
            /*GOOGLE CHART*/
    google.setOnLoadCallback(drawChart);
    function drawChart() {
   console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable(response.events_types);
    var options = {
       title: 'My test'
                };

    var chart = new google.visualization.PieChart(document.getElementById('eventos_charts'));
    chart.draw(data, options);
     }  
            /*END OF GOOGLE CHART PART*/
            }
          }else if(status=='error'){
            console.log('Errors found');
          }
         });//end of .post() function
        }); //end of onclick button-send

我已经放了一条 console.log 消息让我知道 drawChart() 已经运行。但是，我从来没有收到该消息。所以这意味着 drawChart() 函数永远不会运行 :/ 我卡住了。

几乎工作 - 编辑

这是有效的代码...但前提是我手动定义数据字符串，也就是说：

else{
 console.log('The data string is: `'+response.tipos_eventos+'`');
 var the_string=response.tipos_eventos;
/***** start Google charts:*******/
 //google.setOnLoadCallback(drawChart);
  function drawChart() {
    console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable([['Evento','Cantidad'],['Taller',1],['Seminario',1]]);//DEFINED MANUALLY

 var options = {
   title: 'The chart'
   };
  var chart = new google.visualization.PieChart(document.getElementById('events_types'));

  chart.draw(data, options);
 }
 drawChart();//Thanks to @FABRICATOR                                

/****  END Google charts: Events types *********/                               
}

但是，如果我尝试动态获取数据：

else{
 console.log('The data string is: `'+response.tipos_eventos+'`');
 var the_string=response.tipos_eventos;
/***** start Google charts:*******/
 //google.setOnLoadCallback(drawChart);
  function drawChart() {
    console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable(the_string);//DEFINED DYNAMICALLY

 var options = {
   title: 'The chart'
   };
  var chart = new google.visualization.PieChart(document.getElementById('events_types'));

  chart.draw(data, options);
 }
 drawChart();//Thanks to @FABRICATOR                                

/****  END Google charts: Events types *********/                               
}

我收到以下错误：

Uncaught Error: Not an array

有什么想法可以让它发挥作用吗？我错过了什么？

Answer 1

我终于找到了最简单的解决方案。鉴于我使用的是 Laravel 的 ORM (Illuminate/Database)，获取的数据采用 json 格式。

这适用于 Laravel 和 Slim 框架。

所以我直接将变量传递给视图（在 Slim 中）：

$app->render('home.php',[
        'myArray'=>$myArray
]);

然后，在视图中（在本例中为 Twig 视图。在 blade 中应该类似），我获取数组并将其放入 Javascript 代码中的变量中：

var myArray = {{ myArray|json_encode|raw }};

然后我迭代获取每个元素并将其添加到 Google 图表数据数组中：

$.each(myArray,function(index, value){
            //console.log('My array has at position ' + index + ', this value: ' + value.r1);
            data.addRow([value.col1,value.col2,value.col3,value.col4]);
        });

现在可以使用了。

如何在收到 jquery .post() 函数的响应后加载 google 图表？

How to load google chart after getting response from jquery .post() function?

javascript

jquery

google-visualization