title: load google charts through an ajax call
body: <p>I'm trying to call the google chart after clicking on a link. This is what my function looks like:</p>
  
  <pre><code>function getGraphData(id) {
  
      var ajax_url = '&lt;?=URL?&gt;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);
  
          },
      });
  }
  </code></pre>
  
  <p>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...</p>
  
  <p>EDIT:
  I edited the function like this:</p>
  
  <pre><code>  $.ajax({
           type: "POST",
           dataType: "html",
           data: {id: id},
           url: '&lt;?=URL?&gt;' + '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);
           }
      }); 
  </code></pre>
  
  <p>but i'm having issues with sending this data stream from my ajax php file:</p>
  
  <pre><code>echo '[\'Task\', \'Hours per Day\'],
              [\'Work\',     10],
              [\'shit\',     50],
              [\'loop\',     25],
              [\'poop\',     15]';
  </code></pre>
  
  <p>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.</p>