ładuj wykresy google przez wywołanie ajax

Question

Próbuję połączyć się z wykresem google po kliknięciu linku. To właśnie mój funkcji wygląda następująco:

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

     }, 
    }); 
} 

Więc co próbuję osiągnąć tutaj jest załadowanie innego wykresu na inny podobny, więc powiedzmy, że mam wykresy polityka, sport itp wykresy I don” wiem gdzie umieścić kod Google API chociaż, ponieważ wydaje się, że to po prostu nie działa ...

EDIT: edytowany funkcję tak:

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

ale mam problemy z wysyłaniem ten strumień danych z mojego pliku php ajax:

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

odpowiedź nie jest prawidłową tablicą 2D. Jeśli ręcznie wstawię wartości do pliku javascript, działa, więc problem jest gdzieś w odpowiedzi.

Answer 1

Możesz załadować wykresy Google za pomocą połączenia Ajax, korzystając z poniższego kodu.

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

możesz ładować dowolne inne typy wykresów zamiast zwykłego interfejsu za pomocą Google API.