Help regarding integrating extjs 3.4 and google chart api

manu somasekhar

unread,

Apr 1, 2012, 3:48:50 AM4/1/12

to Google Visualization API

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> <div id="panel"></div></body>
</html>

asgallant

unread,

Apr 2, 2012, 9:55:17 AM4/2/12

to google-visua...@googlegroups.com

I'm not familiar with extjs, what does the Ext.FormPanel(...) function create?

asgallant

unread,

Jul 30, 2012, 5:23:37 PM7/30/12

to google-visua...@googlegroups.com, manus...@gmail.com

That is probably not a good idea, as it will try to call the callback function twice: once when the google package loads and once when Ext loads. If you require both libraries, then some will likely fail when the first callback fires. What might work is this:

Ext.onReady(function () {
  google.load('visualization', '1', {'packages': ['geochart']});
  google.setOnLoadCallback(drawMarkersMap);
  function drawMarkersMap() {
  //Your chart's function where you put all your stuff
  }
};

or this:

On Monday, July 30, 2012 10:07:32 AM UTC-4, Jax Walsh wrote:

I know this post is a little old, but I found a solution to the problem and felt I should share.

In you js for the google chart you are using (mine was a heatmap), at the top after the google.load(), and the google.setOnLoadCallback(), you need to add the Ext.onReady() with the same parameter as the setOnLoadCallback (mine was drawMarkersMap, so my sample code here will use that). I don't know if the setOnLoadCallback is still required, but I included it in my code and it's working, note that I'm using ASP .NET MVC4, so there's that. But in short, make the equivalent calls in your js and it should work:

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawMarkersMap);
Ext.onReady(drawMarkersMap);
function drawMarkersMap() {
//Your chart's function where you put all your stuff
}

On Sunday, April 1, 2012 3:48:50 AM UTC-4, manu somasekhar wrote:

Reply all

Reply to author

Forward