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,
                }
            }],

        }
    }

    var data = {
        type: 'bar', //bar, horizontablbar, pie, doughnut, radar, polararea
        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);
}
var getChartData = function() {
    $.ajax({
        url: 'data.php',
        method: 'GET',
        success: function(response) {
            var dataX = response.dataX;
            var dataY = response.dataY;

            renderHtmlChart(dataX, dataY);
        }
    });
};