google Chart showing blank page

[Kwasi Denkyira]

I am using google visualization api to draw a chart but when the page loads, not chart just blank page. I am not sure what I am missing, either css for the chart or not. Below is code. Any help will be appreciated.

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

    

}

<div class="row">

    <div class="col-md-12">

        <div class="chart"

             data-url="/Metrics/ApprovedCDRLS"

             data-chart-type="Pie"

             data-options='{ "title": "Approved CDRLS", "is3D" : "true" }'>

        </div>

    </div>

</div>

<div class="row">

      

        <div class="col-md-6">

            <div class="chart"

                 data-url="/Metrics/AverageNumResubmissions"

                 data-chart-type="Pie"

                 data-options='{ "title": "Average Resubmissions", "is3D": "true" }'>

            </div>

        </div>

    </div>

 @section scripts

{

    <script type="text/javascript"

            src="https://www.google.com/jsapi?autoload={

            'modules':[{

              'name':'visualization',

              'version':'1',

              'packages':['corechart']

            }]

          }"></script>

    <script type="text/javascript">

        $().ready(function () {

            google.setOnLoadCallback(drawCharts);

        });

        function drawCharts() {

            var chart = $('div.chart');

            $.each(chart, drawChart);

        }

        function drawChart() {

            var $this = $(this);

            var url = $this.data('url');

            var chartType = $this.data('chart-type');

            var options = $this.data('options');

            var chartArea = $this[0];

            $.get(url)

             .done(function (jsonArray) {

                 var chart;

                 var data = google.visualization.arrayToDataTable(jsonArray);

                 var defaultOptions = {

                     title: 'Chart',

                     chartArea: { left: '100' },

                     height: '400'

                 };

                 $.extend(true, defaultOptions, options);

                 switch (chartType) {

                     case "Pie":

                         chart = new google.visualization.PieChart(chartArea);

                         break;

                     default:

                         chart = new google.visualization.LineChart(chartArea);

                 }

                 chart.draw(data, defaultOptions);

             });

        }

    </script>

}