javascriptphpjqueryreact-google-charts

Uncaught Error: Container Is Not Defined - Google Pie Charts


Here is what I'm trying to do.

I'm trying to load a bunch of Google pie charts in a PHP loop based with the following code:

<?php
 foreach ($currentTeamLeaders as $key=> $currentTeamLeader) {
     $chartId = 'chart-'.$key;
?>
     <script>
         google.charts.load("current", {packages:["corechart"]});
         google.charts.setOnLoadCallback(drawChart);
    
         function drawChart() {

                         var data = google.visualization.arrayToDataTable([
                            ['Task', 'Hours per Day'],
                            ['Work',     11],
                            ['Eat',      2],
                            ['Commute',  2],
                            ['Watch TV', 2],
                            ['Sleep',    7]
                         ]);

                         var options = {
                            title: 'My Daily Activities',
                            chartArea:{right:0,top:0,width:"90%",height:"100%" },
                            height: 150,
                            width: 250,
                         };

                        var chart = new google.visualization.PieChart(document.getElementById(<?php echo $chartId ?>));
                        chart.draw(data, options);

                    }

        </script>

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

     <?php
         }
     ?>

But for some reason, I'm getting an Uncaught Error: Container Is Not Defined despite having the div defined.

Thank you


Solution

  • Resolved:

    I needed to add quotes around the following the PHP echo statement.