PDA

View Full Version : Help regarding integrating extjs 3.4 and google chart api



manuss
31 Mar 2012, 11:41 PM
Hi guys,
First of all I am newbie .I need some help with integrating Ext js 3.4 and google chart api.
I am trying to add google pie chart to an Ext.FormPanel
I created a panel with the following code


var grid = new Ext.FormPanel({
id:'test',
renderTo: 'panel',
title:'Sign up',
bodyStyle: 'padding: 10px;',
frame: true,
width:500,
height:500
});

The following code tries to add pie chart to the above panel.


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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);


var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};

var chart = new google.visualization.PieChart(document.getElementById('test'));
chart.draw(data, options);
}


And my html is this,


<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><script type="text/javascript" src="https://www.google.com/jsapi"></script><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext/ext-all.js"></script><script type="text/javascript" src="scripts/m.js"></script><script type="text/javascript" src="scripts/googleApi.js"></script><script type="text/javascript" src="scripts/GVisualizationPanel.js"></script>

<title>Sample</title></head><body> <dir id="panel"></dir></body></html>
Fire bug is giving me error message as

“Container is not defined”.
Please help me..

mitchellsimoens
1 Apr 2012, 9:13 AM
Is document.getElementById('test') return valid?

manuss
3 Apr 2012, 5:04 AM
Hi guys,
After smashing my head for two days, i got an answer B)

http://www.sencha.com/forum/showthread.php?47774-Ext.ux.GoogleVisualizationComponent-Add-Google-Visualizations-to-your-Ext-App