How to dynamically populate Google Chart with AJAX query, getting DOM exception 8

Question

I have a controller that returns (well) formatted JSON in the format that Google Charts expects. I can view the output by navigating to http://localhost:9000/manager/echoVariables and the OP is as follows: [["foo",3],["foo",3]]

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.

But I am getting a DOM Exception 8 on my way to passing this JSON string to Google Charts.

This is the view that is creating the graphs:

#{extends 'main.html' /} #{set title:'Home' /} #{set 'moreScripts'}
#{/set}
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

      // 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);
      }
    </script>

<script type="text/javascript">
//$.get()
$(document).ready(function() {
    $("#result").html();
    $.get(
        '/manager/echoVariables',
        {var1: "foo", var2: 5},
        function(responseText){
            $("#result").html(responseText);
        },
        "json"
    );
});


</script>

<body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
    <div id="result"></div>
</body>

How do I make the piechart show my values, instead of the ones that are given in the snippet?

Thanks.

Jeff-Meadows · Accepted Answer · 2013-02-27 16:57:47Z

There's two problems with your code. First, you are using jQuery's html() function on your #result div, but you're passing a javascript object instead of a string like the function expects. If you do just want to see the data, you'd change that to something like

$.get(
    '/manager/echoVariables',
    {var1: "foo", var2: 5},
    function(responseText){
        $("#result").html(JSON.stringify(responseText));
    },
    "json"
);

The other problem, of course, is that you're not actually passing the result data to the google chart API. To do that, you'll need to call chart.draw using data you got back from your AJAX call instead of the data from the example.

Yes Jeff, I was able to do it. JS is not my forte, and I was wondering if you would help me clean it up? — theTuxRacer, Commented Feb 28, 2013 at 8:01

Collectives™ on Stack Overflow

How to dynamically populate Google Chart with AJAX query, getting DOM exception 8

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related