title: How to dynamically populate Google Chart with AJAX query, getting DOM exception 8
body: <p>I have a controller that returns (well) formatted JSON in the format that Google Charts expects.  I can view the output by navigating to <code>http://localhost:9000/manager/echoVariables</code> and the OP is as follows: <code>[["foo",3],["foo",3]]</code></p>
  
  <p>I want to do a AJAX call and am not able to pass this JSON to Google Charts. I can confirm that the JSON is being received, I verified in Chrome's Browser Inspector's Network Tab.</p>
  
  <p>But I am getting a <code>DOM Exception 8</code> on my way to passing this JSON string to Google Charts.</p>
  
  <p>This is the view that is creating the graphs:</p>
  
  <pre><code>#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreScripts'}
  #{/set}
  &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"&gt;
  
        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});
  
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
  
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
  
          // Create the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Topping');
          data.addColumn('number', 'Slices');
          data.addRows([
            ['Mushrooms', 3],
            ['Onions', 1],
            ['Olives', 1],
            ['Zucchini', 1],
            ['Pepperoni', 2]
          ]);
  
          // Set chart options
          var options = {'title':'How Much Pizza I Ate Last Night',
                         'width':400,
                         'height':300};
  
          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
      &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  //$.get()
  $(document).ready(function() {
      $("#result").html();
      $.get(
          '/manager/echoVariables',
          {var1: "foo", var2: 5},
          function(responseText){
              $("#result").html(responseText);
          },
          "json"
      );
  });
  
  
  &lt;/script&gt;
  
  &lt;body&gt;
      &lt;!--Div that will hold the pie chart--&gt;
      &lt;div id="chart_div"&gt;&lt;/div&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How do I make the piechart show my values, instead of the ones that are given in the snippet?</p>
  
  <p>Thanks.</p>