图表无法加载：带有PHP的jQuery HighchartTable插件可将表格数据转换为图表

I'm trying to use High-chart to turn my PHP/MySQL tables into chart form.

What is meant to happen is the following :

• The contents of the PHP generated table "Most Popular Facilities" is produced.
• The button "View data in chart" (id="view_chart") is clicked.
• A pop up appears with a bar-chart, that displays the data from the "most popular facilities" table.

However the button "View data in chart" (id="view_chart") does nothing when clicked.

I am following a YouTube tutorial, as I am very new to PHP, jQuery and High-chart specifically.

The code below shows the snippet I am working with. All appropriate plugins are linked to in the heading (another file), they are not the issue as I have made sure of in my testing.

This is what I am dealing with :

<div class="table-responsive">
 <table class="table table-bordered table-striped" id="for_chart">
   <thead>
     <tr>
       <th>Facility</th>
       <th>Times Booked</th>
     </tr>
   </thead>
   <tbody id="bookings_month_TableBody">

     <?php
     // If there are any values in the table, display them one at a time.
     if ($mysqli->connect_errno) {
       echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
     }

     $sql = "SELECT tbl_facility.facility_name, COUNT(tbl_booking.facility_ID) AS mostpopularfacility
             FROM tbl_booking, tbl_facility
             WHERE tbl_booking.facility_ID=tbl_facility.facility_ID
             GROUP BY tbl_facility.facility_name
             ORDER BY mostpopularfacility DESC
             LIMIT 7";
     $result = $mysqli->query($sql);

     if ($result->num_rows > 0) {
       // output data of each row
       while($row = $result->fetch_assoc()) {
         ?>

         <tr>
           <td><?php echo $row['facility_name']; ?></td>
           <td><?php echo $row['mostpopularfacility']; ?></td>
         </tr>

         <?php
       }
     } else {
       echo "</br></br>";
       echo "No Bookings are currently in the database under tbl_bookings.   </br></br></br>";
     }
     ?>

   </tbody>
 </table>

</div>

<div id="chart_area" id="Students Admission & Passout Details">

</div>
<br/>
<div align="center">
 <button type="button" name="view_chart" id="view_chart" class="btn-info btn-lg">View Data in Chart</button>
</div>






<script>
$(document).ready(function(){

   $('#chart_area').dialog({ //initialize jquery dialog box
       autoOpen:true, //stops it automatically initializing
       width: 1000,
       height: 500
   });

   $('#view_chart').click(function(){ //When the button with ID view-chart is clicked...
     $('#for_chart').data('graph-container', '#chart_area');
     $('#for_chart').data('graph-type', 'column'); //Line, column, pie, etc...
     $('#chart_area').dialog('open'); //Pop up each query dialog box
     $('#for_chart').highchartTable(); //Initialize highchart table plug in. Takes the table data and puts it in the chart.
   });


});
</script>