Untitled

<html>
<?php
include "connection.php";
?>
   <head>
	<script src='jquery-3.4.1.min.js'></script>
	<script type="text/javascript" src="chart.js"></script>
   </head>
   <body>
      <form method="get">
         <select name="year" size="1" >
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
         </select>
         <input type="submit"></input>
      </form>
	  <div id="chart-container">
         <canvas id="myChart"></canvas>
		</div>
   </body>
</html>

data.php file

<?php
include "connection.php"

$year=$_GET['year'];
$sql = "SELECT Bookings, Destination from topflights WHERE Year ='".$year."'";
$result = mysqli_query($con, $sql);

//variables
$dataX = array();
$dataY = array();

//Loop to get the data
while($row = mysqli_fetch_assoc($result)){
    array_push($dataX, $row['Destination']);
    array_push($dataY, $row['Bookings']);
}

header('Content-Type: application/json');
echo json_encode(array(
    "dataX" => $dataX,
    "dataY" => $dataY
));
?>

Javascript file:

function renderHtmlChart() {
    var myChart = document.getElementById('myChart').getContext('2d');
    var universalOptions = {
        title: {
            display: true,
            text: "Top 5 Flights Booked in the Year <?php  echo $_GET['year'];?>"
        },
        legend: {
            display: false,
        },
        scales: {
            yAxes: [{
                display: true,
                ticks: {
                    beginAtZero: true,
                }
            }],

        }
    }

    $.ajax({
        url: 'data.php',
        method: 'GET',
        success: function(response) {
            var dataX = response.dataX;
            var dataY = response.dataY;

            var data = {
                type: 'bar',
                data: {
                    labels: dataX,
                    datasets: [{
                        label: 'top flights',
                        data: dataY,
                        backgroundColor: ['tomato', 'green', 'blue', 'cyan', 'orange'],
                        borderWidth: 1,
                        borderColour: 'grey',
                        hoverBorderColor: 'black'
                    }],
                },
                options: universalOptions
            }

            var Chart = new Chart(myChart, data);
        }
    });
}
$(document).ready(function() {
	renderHtmlChart();
});