Pie Chart in Sencha Touch MVC using GoogleChart Api

View Page

Ext.define('app.view.PieChart', {
    extend: 'Ext.Container',//extend: 'Ext.Panel',
    alias: 'widget.googlepiechart',

    config: {
  html: ' <div id="piechart" >Loading Chart</div>',
layout: 'fit'
 },

constructor: function () {
          this.drawInnerChart();
},

drawInnerChart:function(){
  try{
console.log('drawChart  fn');
google.load('visualization', '1', {packages: ['corechart']});

var data = google.visualization.arrayToDataTable([
  ['Task', 'Hours per Day'],
  ['Work',     11],
  ['Eat',      2],
  ['Commute',  2],
  ['Watch TV', 2],
  ['Sleep',    7]
]);
var he = Ext.Viewport.getWindowHeight();
var wi = Ext.Viewport.getWindowWidth();
//console.log(he+' _ '+wi);

var options = {
title: 'My Daily Activities',
width: wi,
height: he,
is3D: true,
// pieStartAngle: 100,
 pieSliceText: 'label',
  /*slices: {
4: {offset: 0.2},
12: {offset: 0.4},
14: {offset: 0.4},
15: {offset: 0.5},
},*/
 //pieHole: 0.4,
 tooltip: { trigger: 'selection' },
 legend:{position: 'top'}

          /*pieSliceTextStyle: {
            color: 'red',
          },*/

};

var chart = new google.visualization.PieChart(document.getElementById('piechart'));



chart.draw(data, options);

}catch(e){
console.log(''+e);
//alert(e);
}

}


});

index.html

<!--Google Map -- -->


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

google.load('visualization', '1.0', {packages: ['corechart']});
//google.setOnLoadCallback(drawChart);

</script>