How can a google-chart be created within a new element I've just appended using jQuery?

Question

For context, I'm trying to build a page that displays a google chart for all active sports games that day. A data feed will inform how many there are (in my below example, 3 games going on.) From there, I would like to loop through the set of games, create a div for each one using jQuery, and then place a google chart into each div. Here's what I wrote:

This would come from a data feed:

var activeGames = 3;

Cycle through active games, build a chart for each one

for (i = 0; i < activeGames; i++){

  $('.chartContainer').append("<div id='game'></div>");

  google.charts.load('current', {packages: ['corechart', 'line']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Team A');
  data.addColumn('number', 'Team B');

  data.addRows([1,1]);
    //chart data redacted, would come from data feed


  var options = {
    //chart options redacted, irrelevant
  };

  var chart = new google.visualization.LineChart(document.getElementById('game'));
  chart.draw(data, options);
}

Relevant basics:

• linked to jQuery in HTML appropriately
• My HTML file is basically just a div for the chartContainer class

The chart displays fine if I create div id='g1' in an html file, but for some reason no charts display when the div is created by jquery, even though the divs DO get created.

Any help is appreciated.

---

UPDATE: Here's what worked:

Load google charts package

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);

Call Function, the for loop goes within:

function drawChart() {

    var activeGames = 3;

    for (i = 0; i < activeGames; i++){
        $('.container').append("<div id='g" + i + "'></div>");

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Team A');
    data.addColumn('number', 'Time');
    data.addRows([1,1]]); //redacted the rest
    var options = {};//redacted

    var chart = new google.visualization.LineChart(document.getElementById('g'+ i));
  chart.draw(data, options);
};

};

Answer 1

load google first, wait for the callback , then draw the charts...

google.charts.load only needs to be called once per page load

no need to load for each chart

since you're creating a new <div> for each chart,
create the div and pass it to the chart's constructor
no need to assign an id , which would need to be unique anyway

see following working snippet...

 google.charts.load('current', { callback: drawCharts, packages: ['corechart'] }); function drawCharts() { var activeGames = 3; for (i = 0; i < activeGames; i++){ var data = new google.visualization.DataTable(); data.addColumn('number', 'Team A'); data.addColumn('number', 'Team B'); data.addRow([1,1]); var options = { }; var container = document.createElement('div'); $('.chartContainer').append(container); var chart = new google.visualization.LineChart(container); chart.draw(data, options); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <div class="chartContainer"></div> 

Answer 2

Part of the issue is that the id should be unique to the page. So when creating the div , you should make it unique:

$('.chartContainer').append("<div id='game" + i + "'></div>");

Then, when selecting the div , select the correct div :

var chart = new google.visualization.LineChart(document.getElementById('game' + i));