Untitled

Index.php file
<html>
   <?php
      include "connection.php";

      ?>
   <head>
	  <script type="text/javascript" src="chart.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/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>
         <canvas id="myChart"></canvas>
      </div>
   </body>
</html>
data.php file
<?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
));

//Trim your string for white spaces and for comma at the end
        $dataX=trim($dataX,",");
        $dataY=trim($dataY,",");
?>
chart.js 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);
        }
    });
}