Диаграмма не загружается: jQuery HighchartTable Plugin с PHP для преобразования данных таблицы в диаграмму

Question

Я пытаюсь использовать High-chart, чтобы превратить мои таблицы PHP / MySQL в форму диаграммы.

Предполагается, что произойдет следующее:

• Создано содержимое сгенерированной PHP таблицы "Most Popular Facilities".
• Нажата кнопка «Просмотр данных на графике» (id = «view_chart»).
• Появляется всплывающее окно с гистограммой, которая отображает данные из таблицы «наиболее популярных объектов».

Однако кнопка «Просмотр данных в диаграмме» (id = «view_chart») ничего не делает при нажатии.

Я следую учебнику YouTube , так как я очень плохо знаком с PHP, jQuery и High-chart в частности.

Код ниже показывает фрагмент, с которым я работаю.Все соответствующие плагины связаны в заголовке (другой файл), они не являются проблемой, как я убедился в моем тестировании.

Это то, с чем я имею дело:

<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>