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:
var ready = {
ext: false,
google: false
};
Ext.onReady(function () {
ready.ext = true;
if (ready.google) {
drawMarkersMap();
}
});
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(function () {
ready.google = true;
if (ready.ext) {
drawMarkersMap();
}
});
function drawMarkersMap() {
//Your chart's function where you put all your stuff
}
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:
>>
>> 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>
>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/k1P-4eRYnZwJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
