Add Google Visualizations to Ext, just like you would add any Ext Component, with

See Demo and Download here.

var mygooglemap = new Ext.ux.GoogleVisualizationComponent({
	visualizationType: 'Map',
	visualizationConfig: {
		width: 400,
		height: 300,
		showTip: true
	columns: [
		['number', 'Lat'],
		['number', 'Lon'],
		['string', 'Name']
	data: [
		[37.4232, -122.0853, 'Work'],
		[37.4289, -122.1697, 'University'],
		[37.6153, -122.3900, 'Airport'],
		[37.4422, -122.1731, 'Shopping']
To load as config option use xtype: 'googlevisualizationcomponent',
Ext.GoogleVisualizationComponent extends Ext.BoxComponent so you can use all its config options

Public Methods:
getSelection() - eg. mygooglemap.getSelection()
setSelection() - eg. mygooglemap.setSelection()

"select" - eg. mygooglemap.on('select', function() {}, this);

To see how these public methods and events work see docs at

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="Ext.ux.GoogleVisualizationComponent.js"></script>
<script type="text/javascript">
  Ext.ux.loadGoogleVisualizationPackages("piechart", "map", "intensitymap", "gauge");
Copy and paste these script tags to wherever you are loading your scripts
In the Ext.ux.loadGoogleVisualizationPackages add the packages you want to use.

If you are using Google Maps then you have to add one more script
<script src=";v=2&amp;key=PASTE-YOUR-KEY-HERE" type="text/javascript"></script>
Before you paste this script you will need to sign up for Google Maps API.
When you sign up you get a key which you can cut and paste in the script tag above.
You can sign up for google maps api here

There are many visualizations here. I will add config options for some visualizations in my next post. If you want to use a particular visualization and cant find the config options here, then go to the visualization's docs page by selecting it from the visualization gallery. You will find code on how to add it to a web page(Not Ext). By looking at the code you will easily figure out the Ext config option. You can compare the Maps config option above with the maps doc to see the how it is done.

Important! If the package name is "piechart", then your visualizationType will be "PieChart". The visualization type is not the package name. I will make a list of all the visualization types for all the visualizations and post it here.

If you are able to use a visualization who's config option is not available here, then please post it here for others.

If you find bugs, made modifications to the code please post it here so that i can incorporate in the next release.