Draw multiple Google pie charts in for loop - php

Question

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 1

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