Google Pie-charts

JavaScript code to add a 3D Pie chart(Google charts).The Pie-chart doesn't shows in the view.How to solve it ?

Javascript:

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

    <script type="text/javascript">
        $(function() {
            <?php
                $bookingData = array();
                $i=0;
                foreach($bookingCounts as $booking){
                $bookingData[$i]['label'] = $booking['Name'];
                $bookingData[$i]['data'] = $booking['total'];
                $i++;
                }
            ?>
            var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
            console.log(data);

    var options = {
          title: 'Booking',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
        chart.draw(data, options);


});

My View is:

<div class="flot-chart">
    <div class="flot-chart-content" id="flot-pie-chart">
    </div>
 </div>

Javascript:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
    <?php
        $bookingData = array();
        $i=1;
        $bookingData[0][0] = 'Task';
        $bookingData[0][1] = 'Hours per Day';
        foreach($bookingCounts as $booking){
        $bookingData[$i][0] = $booking['Name'];
        $bookingData[$i][1] = $booking['total'];
        $i++;
        }
    ?>

    var data = <?php echo json_encode($bookingData, JSON_NUMERIC_CHECK);?>;
    console.log(data);
    var data2 = google.visualization.arrayToDataTable(data);

    var options = {
      title: '',
      is3D: true,
    };

    var chart = new google.visualization.PieChart(document.getElementById('flot-pie-chart'));
    chart.draw(data2, options);


};