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/-/kNHhuodAdAcJ.
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.
