2013-05-21 2 views
7

Я пытаюсь вызвать диаграмму google после нажатия на ссылку. Это то, что моя функция выглядит следующим образом:загрузить диаграммы Google через вызов ajax

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 Google, хотя, потому что кажется, что это просто не работает ...

EDIT: я редактировал функцию:

$.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:

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

ответ не является допустимым 2D-массивом. Если я поместил значения в файл javascript вручную, он будет работать, поэтому проблема будет где-то в ответе.

ответ

13

Вы можете загрузить диаграммы Google с помощью Ajax-вызова, используя код ниже.

$.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 Google.

+0

удивительный, это сработало. Одна вещь, хотя, я хочу передать идентификатор, который у меня был в моем первоначальном ajax, поэтому я могу загрузить определенные значения из файла PHP. Может быть, добавить еще один вызов ajax при загрузке данных? – InsaneSVK

+0

см. Прокомментированный код // создайте свой материал для создания диаграммы здесь вы можете добавить сюда свои материалы .. если диаграммы не нуждаются в ваших вещах, вы можете сделать это за пределами этого вызова. \ – Nagarjun

+0

Я знаю, что вы имели в виду, просто проверьте мой отредактированный первый пост и скажите, пожалуйста, что делать. – InsaneSVK