JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<?php include('DBconnect.php');
	  mysql_query("USE onlinerecruitment"); 
	  
	  $dept = $_POST['dept'];
	  $year = $_POST['year'];

?>

<center><p>Summary of <?php echo $dept ?>  report</p></center>
<br>
Year : <?php 
			 echo $year;
	   ?>
<br>
Department Vacancy : <br><?php 
$result = mysql_query("SELECT * FROM position WHERE Position_Department = '".$dept."' "); 
$num = 1;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)){ 
	
	echo $num;
	echo ". ";
	echo $row['Position_Name'];
	echo "  ";
	echo $row['Recruitment_Seat'];

    ?>   seats




<?php  echo "<br>";
 $num++; } ?>
<br>
Total : <?php $result1 = mysql_query("SELECT sum(Recruitment_Seat) FROM position WHERE Position_Department = '".$dept."' "); 


while ($rows1 = mysql_fetch_array($result1, MYSQL_ASSOC)){ 
	
	$TotalDepartment = $rows1['sum(Recruitment_Seat)'];



	echo $TotalDepartment;
	
}  ?> seats
<br>
Total applicants : <?php 

$pos_tmp = array();
$count = 0;

		$TotalApp = 0;


$result01 = mysql_query("SELECT * FROM position WHERE Position_Department = '".$dept."' "); 

while($rows01 = mysql_fetch_array($result01, MYSQL_ASSOC)){
	
	$pos_tmp_id = $rows01['Position_ID'];
	
	array_push($pos_tmp, $pos_tmp_id);
	
	$count++;
	

	
}

for($i = 0; $i < $count; $i++){


		$result2 = mysql_query("SELECT App_Data_ID FROM application_data_file WHERE Position_ID = '".$pos_tmp[$i]."'  && YEAR(App_Form_Send_Date) = '".$year."' "); 
		
		
		while ($rows2 = mysql_fetch_array($result2, MYSQL_ASSOC)){ 
			
			$TotalA = $rows2['App_Data_ID'];
		
			$TotalApp++;
		
		}
			
} echo $TotalApp; ?> persons
<br>

Recruited : <?php

		$recruited = 0;


for($i = 0; $i < $count; $i++){

		 $result3 = mysql_query("SELECT * FROM application_data_file WHERE Position_ID = '".$pos_tmp[$i]."'   && YEAR(App_Form_Send_Date) = '".$year."'  && Application_Status = 'Pass' "); 
		
		while ($rows3 = mysql_fetch_array($result3, MYSQL_ASSOC)){...

JavaScript

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

        var data = google.visualization.arrayToDataTable([
          ['Position', 'Applicant(s)'],
		  
		  <?php 
		  for($i = 0; $i < $table_counter; $i++){
		  
		  		if($i + 1 != $table_counter){
		  ?> 
					[<?php $pos_chart[$i] ?>,   <?php $tapp_chart[$i] ?>],
			 
		  <?php 
				}else{
					?>
					
					[<?php $pos_chart[$i] ?>,   <?php $tapp_chart[$i] ?>]
			<?php
				}
		  }
		  ?>

        ]);

        var options = {
          title: 'Pie chart of Total Applicants'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>



<div id="piechart" style="width: 900px; height: 500px;"></div>