Uncaught Error: Container is not defined

4,619 views
Skip to first unread message

Arnaud Lamy

unread,
Oct 30, 2013, 12:36:50 PM10/30/13
to google-visua...@googlegroups.com
Hi Guys,

Here's my code:

--------

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Brand Monitoring stats</title>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
      (function() {
        $.getJSON( brandStatsAPI, {
          after: "2013-01-01",
          before: "2014-04-30"
        })
        .done(function( jsonData ) {
          google.load("visualization", "1", {packages:["corechart"]});
          google.setOnLoadCallback(drawChart());
          function drawChart() {
            console.log(jsonData);
            var data = google.visualization.arrayToDataTable(jsonData);
            console.log(data);
            var options = {
              title: 'Brands presence'
            };
            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, options);
          }
        })
        .fail(function( jqxhr, textStatus, error ) {
          var err = textStatus + ", " + error + jqxhr;
          console.log( "Request Failed: " + err );
          console.log(jqxhr);
        });
      })();
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

--------

Here's what I got in my console:

Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]
 index.html:19
V {Mb: "0.6", H: Array[2], J: Array[17], ab: null, Ma: Array[0]…}
 index.html:21

I tried to move "google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart());" to the top but doesn't work neither (drawChart doesn't declared). Have you any idea how I can do that ? 

My use case is pretty simple, load a formatted json for google char and load it inside a line graph ! :)

Best,
Arnaud

asgallant

unread,
Oct 30, 2013, 12:50:36 PM10/30/13
to google-visua...@googlegroups.com
You'll need to reorganize your code a bit.  First off, you don't want the "()" after "drawChart" when you call the google.setOnLoadCallback function, as that executes the drawChart function and passes the return value (null in your case) as the callback.  This is the primary reason why you are getting those errors (the drawChart function is executing while the API is only partially loaded).  Second, calling google.load from inside other functions is known to cause problems.  Your best bet is to make your AJAX requests inside the callback from the google loader, and use the drawChart function as the callback from the AJAX:

function drawChart () {
    $.getJSON( brandStatsAPI, {
        after: "2013-01-01",
        before: "2014-04-30"
    })
    .done(function (jsonData) {
        console.log(jsonData);
        var data = google.visualization.arrayToDataTable(jsonData);
        console.log(data);
        var options = {
            title: 'Brands presence'
        };
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    })
    .fail(function( jqxhr, textStatus, error ) {
        var err = textStatus + ", " + error + jqxhr;
        console.log( "Request Failed: " + err );
        console.log(jqxhr);
    });
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});

Arnaud Lamy

unread,
Oct 30, 2013, 12:59:00 PM10/30/13
to google-visua...@googlegroups.com
Great ! Thank you it works now ! I just removed the "()" and add the callback parameter as you said.

Best,
Arnaud
Reply all
Reply to author
Forward
0 new messages