Line Chart in Sencha Touch with Google Chart Api

View Page

Ext.define('App.view.linechart', {
    extend: 'Ext.Panel',
    alias : 'widget.googlechartw2',
   // xtype: 'googlechartw1',
hei:'',
wid:'',

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

constructor: function () {
        this.drawChart();

},

drawChart:function(){
try{
console.log('drawChart  fn');
google.load('visualization', '1', {packages: ['corechart']});
  //google.load("visualization", "1", {packages: ["line"]});
//console.log('1  fn');
//google.setOnLoadCallback(drawChart);
     var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);




var options = {

width: 300,

height: 500,
title: 'Company Performance',
curveType: 'function',
legend: { position: 'top' },
tooltip: { trigger: 'selection' }
        };
var chart = new google.visualization.LineChart(
document.getElementById('chartdiv')
);

//console.log('4  fn');
chart.draw(data, options);

chart.setAction({
            id: 'increase',
            text: 'Details',
            action: function() {
 selection = chart.getSelection();
alert('Hiii');
console.log('Chart Action '+selection[0].row);
//var ti=data.getValue(selection[0].row, 0);
//  console.log(data.getValue(selection[0].row, 0)+" "+data.getValue(selection[0].row, 1)+" "+data.getValue(selection[0].row, 2));


 
            }
          });


}catch(e){
console.log("drawChart Fn Exe:"+e);
//alert(e);
 }
}

});