Draw multiple Google pie charts in for loop

Here is what I’m trying to do. I’m trying to place multiple Google Pie Charts, I already put the code in, however, I’m getting the following error message:

Uncaught TypeError: Cannot read property ‘arrayToDataTable’ of undefined and I’m getting another error message: Error: Data for arrayToDataTable is not an array.

Here is the code that I’m using right now:

    <?php
      foreach ($currentTeamLeaders as $currentTeamLeader) {
          $chartId = "chart_div_$currentTeamLeader[teamLeadId]";

          $chartData = array(
            array("Task","Daily Report"),
            array("Points Achieved",90),
            array("Points Left",190)
          );

      ?>

     <div id="<?php echo $chartId ?>" style="width: 900px; height: 500px;"></div>

     <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
    </script>

     <script type="text/javascript">drawChart('<?php echo $chartId; ?>','<?php echo json_encode($chartData); ?>')</script>

     <?php
         }
     ?>

Here is the google chart code:

 function drawChart(chartId,data) {



    var dataTable = google.visualization.arrayToDataTable(data);

    var options = {
        backgroundColor: 'transparent',
        title: '' ,
        chartArea:{right:0,top:0,width:"90%",height:"100%" },
        height: 150,
        width: 200,
    };

    var chart = new google.visualization.PieChart(document.getElementById(chartId));
    chart.draw(dataTable, options);

 }

What could be causing the issues?

Thanks!

Answer

I have found a solution. What I did was split up the JS code and put the code together in the PHP for loop.