olivierGrech olivierGrech - 1 year ago 218
AngularJS Question

Google Chart - Container is not defined

I know this question has already been asked, but I couldn't find a lot of useful answers.
Before drawing my chart, I create the div that will hold it :

var newDiv = document.createElement('div');
newDiv.id = ...
newDiv.class = ...

I then push it in an array that will be displayed with AngularJS via ng-repeat :


Then i create the ChartWrapper :

var chart = new google.visualization.ChartWrapper({
'chartType': chartType,
'containerId': $scope.arrayDiv[i].id,

I create the DataTable (and fill it, but that's not part of the issue).

var data = new google.visualization.DataTable();

And finally, i draw it (or at least try) :


As you guessed it, this is where i get the error
Container is not defined

I tried to do this to check :
, and I get the expected ID.

From what I understood from other questions (Google Charts ColumnChart won't render because "Container is not defined" e.g.) the issue come from the order of the code execution. However, I want to prepare and draw my chart only when the user click on a button. How do I organize my code to solve this issue ?

Answer Source

This is happening because newDiv isn't being added to the DOM anywhere. You would need to do something like this:

var currentDiv = document.getElementById("div1"); 
document.body.insertBefore(newDiv, currentDiv);