[visualization-api] 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>
}