title: Ajax and Google charts. Passing PHP
body: <p>exampleUsingPHP.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;!--Load the AJAX API--&gt;
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  var jsonData = $.ajax({
  url: "getData.php",
  //dataType:"java",
  async: false
  //success: function(results) {alert(results);}
  }).responseText;
  
  
  // Load the Visualization API and the piechart package.
  google.load('visualization', '1', {'packages':['corechart']});
  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);
  
  function drawChart() {
  alert(jsonData);
  // Create our data table out of JSON data loaded from server.
  var data = google.visualization.arrayToDataTable(jsonData);
  
   // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, {width: 400, height: 240});
  }
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--Div that will hold the pie chart--&gt;
  &lt;div id="chart_div"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
  &lt;/script&gt;  
  &lt;/html&gt;
  </code></pre>
  
  <p>getData.php</p>
  
  <pre><code>   &lt;?php 
     echo "[['Task', 'Hours per Day'],
     ['Work',     11],
     ['Eat',      2],
     ['Commute',  2],
     ['Watch TV', 2],
     ['Sleep',    7]
     ]";
     ?&gt;
  </code></pre>
  
  <p>So my problem is the line...</p>
  
  <pre><code>var data = google.visualization.arrayToDataTable(jsonData);
  </code></pre>
  
  <p>When I try to pass jsonData into the arrayToDataTable(), it does not like that it is a string. What can I do to convert the string "jsonData" into valid javascript that can be used in the arrayToDataTable() function?</p>