通过Ajax调用加载谷歌排行榜 [英] load google charts through an ajax call

问题描述

我想打电话给谷歌图表点击一个链接后。这是我的功能是这样的：

I'm trying to call the google chart after clicking on a link. This is what my function looks like:

function getGraphData(id) {

    var ajax_url = '<?=URL?>ajaxlibrary/get-graph-data';

    $.ajax({
        type: 'POST',
        url: ajax_url,
        dataType: 'html',
        data: ({
            id : id
      }),
        cache: false,
        success: function(data) {
            $('a').removeClass("selected");
            $('#link_'+id).addClass("selected");
            alert(data);

        },
    });
}

所以，我想在这里实现是加载不同的图形为不同类的，所以可以说我有政治走势图，体育图表等，我不知道从哪里把谷歌API code但是，因为它似乎它只是不工作...

So what I'm trying to achieve here is to load a different graph for a different like, so lets say I have politics charts, sports charts etc. I don't know where to put the Google API code though, because it seems it's just not working...

编辑： 我编辑这样的功能：

I edited the function like this:

  $.ajax({
         type: "POST",
         dataType: "html",
         data: {id: id},
         url: '<?=URL?>' + 'ajaxlibrary/get-charts',
         success: function(datas) {
            console.log(datas);
            var data = google.visualization.arrayToDataTable([
                    datas
            ]);

            var options = {
                title: 'My Daily Activities'
            };

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

但我在与我的ajax php文件发送这个数据流的问题：

but i'm having issues with sending this data stream from my ajax php file:

echo '[\'Task\', \'Hours per Day\'],
            [\'Work\',     10],
            [\'shit\',     50],
            [\'loop\',     25],
            [\'poop\',     15]';

的响应是不是有效的2D阵列。如果我把这些值在JavaScript文件手动，它的工作原理，所以这个问题是在响应中的某个地方。

the response is not a valid 2D array. If I put the values in the javascript file manually, it works, so the issue is somewhere in the response.

推荐答案

您可以使用下面code加载谷歌图表与Ajax调用。

You can load the Google Charts with Ajax call using below code.

$.ajax({
  url: 'https://www.google.com/jsapi?callback',
  cache: true,
  dataType: 'script',
  success: function(){
    google.load('visualization', '1', {packages:['corechart'], 'callback' : function()
      {

            $.ajax({
                 type: "POST",
                 dataType: "json",
                 data: {id: YOURIDHERE},
                 url: '<?=URL?>' + 'ajaxlibrary/get-charts',
                 success: function(jsondata) {
                    var data = google.visualization.arrayToDataTable(jsondata);

                    var options = {title: 'My Daily Activities'};

                    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
                    chart.draw(data, options);
                 }
            });    
        ]);

      }
    });
    return true;
  }
});

您可以使用谷歌API的加载只是corechart任何其他图表类型来代替。

you can load any other chart types instead of just the corechart using Google API.

这篇关于通过Ajax调用加载谷歌排行榜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！