PDA

View Full Version : Ext.ux.GoogleVisualizationComponent - Add Google Visualizations to your Ext App



santosh.rajan
20 Sep 2008, 9:21 PM
Add Google Visualizations (http://code.google.com/apis/visualization/documentation/gallery.html) to Ext, just like you would add any Ext Component, with
Ext.ux.GoogleVisualizationComponent.

See Demo and Download (http://extgooglevisdemo.myofiz.com) here.

Usage

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']
]
});
mypanel.add(mygooglemap);


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()

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

To see how these public methods and events work see docs at
http://code.google.com/apis/visualization/documentation/events.html

Setup

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="Ext.ux.GoogleVisualizationComponent.js"></script>
<script type="text/javascript">
Ext.ux.loadGoogleVisualizationPackages("piechart", "map", "intensitymap", "gauge");
</script>
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="http://maps.google.com/maps?file=api&amp;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 http://code.google.com/apis/maps/signup.html

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.

santosh.rajan
20 Sep 2008, 9:31 PM
Pie Chart

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'PieChart',
visualizationConfig: {
width: 400,
height: 240,
is3D: true,
title: 'MyDailyActivities'
},
columns: [
['string', 'Task'],
['number', 'Hours per day']
],
data: [
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]
}


Intensity Map

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'IntensityMap',
visualizationConfig: {
},
columns: [
['string', '', 'Country'],
['number', 'Population (mil)', 'a'],
['number', 'Area (km2)', 'b']
],
data: [
['CN', 1324, 9640821],
['IN', 1133, 3287263],
['US', 304, 9629091],
['ID', 232, 1904569],
['BR', 187, 8514877]
]
}

Gauge

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'Gauge',
visualizationConfig: {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
minorTicks: 5
},
columns: [
['string', 'Label'],
['number', 'Value']
],
data: [
['Memory', 80],
['CPU', 55],
['Network', 68]
]
}

MotionChart

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'MotionChart',
visualizationConfig: {
width: 600,
height: 300
},
columns: [
['string', 'Department'],
['number', 'Year'],
['number', 'Sales'],
['number', 'Expenses']
],
data: [
['Dogs', 1995, 1000, 300],
['Cats', 1995, 950, 200],
['Dogs', 1996, 1200, 400],
['Cats', 1996, 900, 150],
['Dogs', 1997, 1250, 800],
['Cats', 1997, 200, 660]
]
}

Organization Chart

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'OrgChart',
visualizationConfig: {
},
columns: [
['string', 'Name'],
['string', 'Manager']
],
data: [
['Mike'],
['Jim', 'Mike'],
['Alice', 'Mike'],
['Bob', 'Jim'],
['Carol', 'Bob']
]
}

santosh.rajan
22 Sep 2008, 12:53 AM
Annotated Time Line

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'AnnotatedTimeLine',
visualizationConfig: {
width: 700,
height: 240,
displayAnnotations: true
},
columns: [
['date', 'Date'],
['number', 'Sold Pencils'],
['string', 'Title1'],
['string', 'Text1'],
['number', 'Sold Pens'],
['string', 'Title2'],
['string', 'Text2']
],
data: [
[new Date(2008, 1 ,1), 30000, '', '', 40645, '', ''],
[new Date(2008, 1 ,2), 14045, '', '', 20374, '', ''],
[new Date(2008, 1 ,3), 55022, '', '', 50766, '', ''],
[new Date(2008, 1 ,4), 75284, '', '', 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66464, '', ''],
[new Date(2008, 1 ,6), 33322, '', '', 39463, '', '']
]
},



Area Chart
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'AreaChart',
visualizationConfig: {
width: 400,
height: 240,
legend: 'bottom',
title: 'Company Performance'
},
columns: [
['string', 'Year'],
['number', 'sales'],
['number', 'Expenses']
],
data: [
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]
},

jay@moduscreate.com
23 Sep 2008, 4:30 AM
that's awesome. I have to read their license terms before i jump on this. Thanks dude.

galdaka
23 Sep 2008, 6:56 AM
http://extgooglevisdemo.myofiz.com/ not work in IE7

Greetings,

santosh.rajan
23 Sep 2008, 7:27 AM
The famous IE "comma". Fixed it. Thanks for pointing out.

santosh.rajan
24 Sep 2008, 2:34 AM
Client Location map is a special case of the map visualization, where you dont have to specify a location, the location is determined by the users IP address by the google api itself, and shown. According to google api docs this may not work sometimes because location info may not be available for some ip addresses.Example config below.
Client Location Map

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'ClientLocationMap',
visualizationConfig: {
width: 400,
height: 300,
showTip: true
}
}


In the usage example for maps in the first post, you can also specify addresses instead of latitude and longitude. Example config below.
Map

{
xtype: 'googlevisualizationcomponent',
visualizationType: 'Map',
visualizationConfig: {
width: 400,
height: 300,
showTip: true
},
columns: [
["string", "Address"],
['string', 'Name']
],
data: [
["1, Times Sq,New york", 'Home']
]
}

taichimaro
23 Jun 2009, 4:26 AM
Hello,
i want to change data of the googlevisualizationcomponent when i want
for example, when I retrieve data from my server, i want to replace existing data by new data how to do ?
i used this but id doesn't works :

var d = [['Janvier', 11],['Fevrier', 2]];
Ext.getCmp('mygooglemap').loadData(Ext.decode(d));

help please

taichimaro
24 Jun 2009, 1:53 AM
Thnx but i found a small solution :)
i create a new googlecomponent, delete the first one and add the new with the data ^^

tchitani
1 Jul 2009, 7:28 PM
Hi

I've got an error:

this.drawChart is undefined
[Break on this error] this.drawChart.defer(100, this);

Could you please help?

Thanks

tayyabah
24 Mar 2011, 5:15 AM
I am getting the same error on
this.drawChart.defer(100, this);
what extra I need to configure?

vtmoren
16 Dec 2011, 2:23 PM
Does this extension work in ExtJS 4?
And does it still need flash?

-VM

anuruddha84
22 Apr 2012, 5:19 PM
Hi,I need to change the "data" attribute here in a way that accept json data store. If any one have idea pls help me.
{
xtype: 'googlevisualizationcomponent',
visualizationType: 'PieChart',
visualizationConfig: { width: 400, height: 240, is3D: true, title: 'MyDailyActivities' },
columns: [ ['string', 'Task'], ['number', 'Hours per day'] ],
data: [ ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ] //Need to put JSON Store here instead of array of local data store.
}

Thank you.

buntyindia
12 May 2013, 1:00 AM
link of site not working how can I download ?