Ext JS

Ext Charting and Mapping with Google Visualizations

October 13, 2008 by Aaron Conran

Creating cross-browser consistent visualizations of data without Adobe’s Flash plugin has always been a difficult issue to address. Google introduced a Visualization API earlier this year which enables you to present tabular data in the form of charts, maps, and other graphical representations without the need for Flash. (Some visualizations actually do use flash, but most are implemented with SVG and/or VML.)

Working with different API’s can present hurdles as we attempt to massage the same data in two different data structures - one for a grid and another for a pie chart. To address this specific challenge, I developed a short user extension Ext.ux.GVisualizationPanel enabling users to integrate visualizations into Ext JS applications without concern for these issues. The GVisualizationPanel adapts any Ext data Store into the google’s format and enables you to embed any type of visualization into a panel.

Adapting google’s DataTable to an Ext Store

All Google Visualization’s are backed by a google.visualization.DataTable. According to Google, “A DataTable is a two dimensional table, with rows and columns and cells. Each column has a defined data type.” Google’s DataTable and Ext’s data Store are analogous and serve similar purposes. Their primary purpose is to enable developers to manipulate data in a single place and drive your GUI from that data. In order to continue changing our data in a single place and avoid having to manually synchronize 2 data structures, we will need to create an adapter to convert any Ext Store to a Google Table.

Differences between Ext.data.Store and google.visualization.DataTable

A key difference between Ext’s Store and Google’s DataTable is that the Ext data Store only handles data & schema information. On the contrary, Google’s DataTable requires presentation information like Label’s. The Ext.ux.GDataTableAdapter eliminates any inconsistencies between the 2 API’s allowing you to apply the same store to a visualization as you would apply to an Ext GridPanel. Ext.data.Store provides the developer with more formats by choosing a JsonReader, XmlReader or ArrayReader. Google’s DataTable is limited to programmatically adding data via methods or loading data from a Google Spreadsheet. This makes the Ext.data.Store a more favorable data structure in most cases. A final difference between Ext.data.Store and Google DataTable is that they each use different data types.

Using the Adapter

By eliminating the differences between Store and Table with the adapter, a single Ext.data.Store can be bound to Ext components and Google Visualizations at the same time. The Organizational Chart sample demonstrates how to synchronize a Google OrganizationChart and an Ext grid by binding them to the same Ext.data.Store. The sample also demonstrates how to consume the ’select’ event exposed by the GVisualizationPanel.

Adapting your existing Ext Store’s can be done with Ext.ux.GDataTableAdapter’s static adapt method.

var dataTable = Ext.ux.GDataTableAdapter.adapt({
	store: myDs,
	columns: [{
		dataIndex: 'yr',
		label: 'Year'
	},{
		dataIndex: 'sales',
		label: 'Sales'
	},{
		dataIndex: 'expenses',
		label: 'Expenses'
	}]
});

Using the GVisualizationPanel

GVisualizationPanel works like any typical Ext.Panel and can partake in the container model and layout management. This means you can integrate it into your existing border layout or as a custom portlet. The class has been registered with the xtype of ‘gvisualization’. To use a visualization you will need to determine the visualizationPkg you’d like to use from Google. Then setup an appropriate store and pass in the visualizationPkg, store and columns configuration to create a new visualization.

For example, to create the Intensity Map used in the demo we can use the following code:

var countryStore = new Ext.data.SimpleStore({
    fields: [{
        name: 'Country',
        type: 'string'
    },{
 
        name: 'pop',
        type: 'int'
    },{
        name: 'area',
        type: 'int'
    }],
    data: [
        ['CN', 1324, 9640821],        
        ['IN', 1134, 3287263],
        ['US', 304, 9629091],
        ['ID', 232, 1904569],
        ['BR', 187, 8514877]        
    ]
});
var intensityMap = new Ext.ux.GVisualizationPanel({
    id: 'intensityMap',
    visualizationPkg: 'intensitymap',
    title: 'Intensity Map Sample',
    store: countryStore,
    columns: ['Country',{
        dataIndex: 'pop',
        label: 'Population (mil)'
    },{
        dataIndex: 'area',
        label: 'Area (km2)'
    }]
});

In Conclusion

Using the GDataTableAdapter to adapt or convert an Ext.data.Store to a google.visualization.DataTable is a good way to allow Ext Developers to use Google Visualizations without worrying about any underlying differences. Some of Google’s Visualizations have additional configuration options which can be used through a visualizationCfg configuration. GVisualizationPanel is a powerful implementation which supports any of the visualizations provided by Google in their gallery by simply setting a visualizationPkg config. Take a look at the many different types of visualizations available in Google’s Visualization Gallery.

This entry was posted on Monday, October 13th, 2008 at 3:43 am and is filed under Ext JS, Extensions, Google. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Gunmen
Posted on October 13th, 2008 at 6:48 am

Thanks for sharing. I’m l’vin it!

sharpguy
Posted on October 13th, 2008 at 6:59 am

Excellent!

Amjith PS
Posted on October 13th, 2008 at 8:02 am

Thanks Aaron Conran for sharing this.

Amjith PS
Googleknoltalk.com

Ajaxian » Tying great visualizations to Ext charts and maps
Posted on October 13th, 2008 at 10:37 am

[...] Conran has developed a nice Ext extension to tie that world to the Google Visualization API: Working with different API’s can present hurdles as we attempt to massage the same data in two [...]

Vishal G
Posted on October 13th, 2008 at 1:03 pm

Thanks Aaron, Very cool integration.

Ajax Girl » Blog Archive » Tying great visualizations to Ext charts and maps
Posted on October 13th, 2008 at 1:06 pm

seasharp2
Posted on October 13th, 2008 at 2:59 pm

Is is possible to render any of the Google Visualization widgets without sending application data to a Google server?

Derick S
Posted on October 13th, 2008 at 3:29 pm

This is very nice. I like having the data in just one place. Great blog.

Daily del.icio.us for October 11th through October 13th — Vinny Carpenter's blog
Posted on October 13th, 2008 at 5:00 pm

[...] Ext JS - Ext Charting and Mapping with Google Visualizations - Using the GDataTableAdapter to adapt or convert an Ext.data.Store to a google.visualization.DataTable is a good way to allow Ext Developers to use Google Visualizations without worrying about any underlying differences [...]

Aaron Conran
Posted on October 13th, 2008 at 5:01 pm

@seasharp2, Yes there are several Visualizations which never send any data to a Google server and generate all of their contents on the client-side. For each specific Visualization you can check out the Data Policy link found at the top of the Visualization page. You can see that the gauges are all generated client-side. Quoting Google “All code and data are processed and rendered in the browser. No data is sent to any server. ” On the flip side, there are certainly Visualizations which DO send data to Google’s servers.You will need to read the Data Policy for each visualization you would like to use.

luven
Posted on October 13th, 2008 at 9:28 pm

thanks very much , this is just i want…

Tutorial: Ext Charting and Mapping with Google Visualizations | Code Snippets : Claude Betancourt's Technical Blog
Posted on October 14th, 2008 at 2:28 am

[...] Aaron Conran posted an entry about Ext.ux.GVisualizationPanel, a user extension that takes advantage of the similarities between the Ext data store and Google’s data table to allow reuse of an Ext data store with Google’s Visualization API. [...]

Javascript News » Blog Archive » Tying great visualizations to Ext charts and maps
Posted on October 14th, 2008 at 2:46 am

seasharp2
Posted on October 14th, 2008 at 6:06 am

@Aaron

Thanks for the Data Policy pointer. After following the Google App Engine project I have become a little circumspect about Google licensing and motives. However after scanning the Google visualizations gallery it seems most of the controls that interest me are client-side only

Annotated Time Line
http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

Area Chart http://code.google.com/apis/visualization/documentation/gallery/areachart.html

Bar Chart
http://code.google.com/apis/visualization/documentation/gallery/barchart.html
Column Chart
http://code.google.com/apis/visualization/documentation/gallery/columnchart.html#Data_Policy

Gauge
http://code.google.com/apis/visualization/documentation/gallery/gauge.html#Data_Policy

Organizational Chart
http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

Pie Chart
http://code.google.com/apis/visualization/documentation/gallery/piechart.html

Line Chart
http://code.google.com/apis/visualization/documentation/gallery/linechart.html

Scatter Chart
http://code.google.com/apis/visualization/documentation/gallery/scatterchart.html

Web 2.0 Announcer
Posted on October 14th, 2008 at 3:14 pm

Ext Charting and Mapping with Google Visualizations…

[...]Creating cross-browser consistent visualizations of data without Adobe’s Flash plugin has always been a difficult issue to address. Google introduced a Visualization API earlier this year which enables you to present tabular data in the form of ch…

Simon Elliston Ball
Posted on October 15th, 2008 at 11:28 am

This is fantastic, however, it only works for a once off. I have a use-case where a combo box selects an item and then reloads the store to which the visualization is bound. This is easily (but lazily) fixed by adding the following:

Ext.ux.GVisualizationPanel = Ext.extend(Ext.Panel, {
// These are required by Google API
// To add more visualizations you can extend
// visualizationPkgs
visualizationAPI: ‘visualization’,
visualizationAPIVer: ‘1′,
visualizationPkgs: {
‘intensitymap’: ‘IntensityMap’,
‘orgchart’: ‘OrgChart’,
‘linechart’: ‘LineChart’,
‘gauge’: ‘Gauge’,
’scatterchart’: ‘ScatterChart’,
‘annotatedtimeline’: ‘AnnotatedTimeLine’
},

/**
* visualizationPkg {String}
* (Required) Valid values are intesitymap, orgchart, gauge and scatterchart
* The error “Module: ‘visualization’ with package: ” not found!” will be
* thrown if you do not use this configuration.
*/
visualizationPkg: ”,

/**
* html {String}
* Initial html to show before loading the visualization
*/
html: ‘Loading…’,

/**
* store {Ext.data.Store/String}
* Any valid instance of a store and/or storeId
*/
store: null,

// event handler for store
redraw: function(){
this.datatable = Ext.ux.GDataTableAdapter.adapt({
store: this.store,
columns: this.columns
});

this.visualization.draw(this.datatable, Ext.apply({}, this.visualizationCfg));
},
// Overriden methods
initComponent: function(){
if (typeof this.visualizationPkg === ‘object’) {
Ext.apply(this.visualizationPkgs, this.visualizationPkg);
for (var key in this.visualizationPkg) {
this.visualizationPkg = key;
break;
}
}
google.load(this.visualizationAPI, this.visualizationAPIVer, {
packages: [this.visualizationPkg],
callback: this.onLoadCallback.createDelegate(this)
});
this.store = Ext.StoreMgr.lookup(this.store);

// setup a listener on the store to enable reloading of data
this.store.on({
load: this.redraw,
datachanged: this.redraw,
add: this.redraw,
remove: this.redraw,
update: this.redraw,
clear: this.redraw,
scope: this});

Ext.ux.GVisualizationPanel.superclass.initComponent.call(this);
},

// custom methods
onLoadCallback: function(){
var tableCfg = {
store: this.store,
columns: this.columns
};
this.datatable = Ext.ux.GDataTableAdapter.adapt(tableCfg);

var cls = this.visualizationPkgs[this.visualizationPkg];
if (this.body) {
this.body.update(”);
this.visualization = new google.visualization[cls](this.body.dom);

var relaySelect = function(){
this.fireEvent(’select’, this, this.visualization);
};
google.visualization.events.addListener(this.visualization, ’select’, relaySelect.createDelegate(this));
this.visualization.draw(this.datatable, Ext.apply({}, this.visualizationCfg));
}
}
});
Ext.reg(’gvisualization’, Ext.ux.GVisualizationPanel);

timmyc
Posted on October 15th, 2008 at 12:11 pm

Aaron-
Very nice work, I can already think of dozens of use for this ux. Thanks for sharing.

Time
Posted on October 16th, 2008 at 8:38 pm

不错~

Time
Posted on October 16th, 2008 at 8:46 pm

EXT的样式风格，看久会产生视觉疲劳。
让然非常的不舒服，最好有简约版本的，一是速度快，二是没有视觉疲劳感。

Charles Opute Odili
Posted on October 16th, 2008 at 10:40 pm

Very cool and timely indeed. I needed to use a timeline visualization recently and it made me look at several APIs and libraries and realized that the best way to implement it for my app was to build a ux for it, but with this I no longer have to bother. Very cool, thanks for sharing !!

Vive les graphiques en Ajax | Interfaces riches
Posted on October 17th, 2008 at 5:07 am

[...] en charge n’importe quelle type de données et les représenter avec les outils de Google : Ext Charting and Mapping with Google Visualizations. Le résultat est tout à fait intéressant : Ext [...]

Jose Voss (Brasil, Blumenau)
Posted on October 17th, 2008 at 3:25 pm

Really, Great!
Conran is the best

Mathulan
Posted on October 29th, 2008 at 4:28 am

Great stuff. But we had to do the following change to get it working.
From:
var fld = store.fields.itemAt(j);
To:
var fld = store.fields.get(cols[j].dataIndex);

Also when working with Google AnnotatedTimeLine, we had to pass the following two additional configs
height: container.getInnerHeight(),
width: container.getInnerWidth(),
during Ext.ux.GVisualizationPanel instantiation.

Thanks
Mat

pligg.com
Posted on November 2nd, 2008 at 1:10 pm

Becca
Posted on November 5th, 2008 at 2:33 pm

Very cool, thank you for sharing this. I linked back to your blog through Ajax Rain. Wanted to comment here as well.

20081104 網摘 - CCHK Launched - 網絡暴民 Jacky’s Blog
Posted on November 10th, 2008 at 12:18 pm

[...] Ext Charting and Mapping with Google Visualizations [...]

Karr
Posted on November 20th, 2008 at 1:26 am

Можно и поспорить по этому вопросу, ведь только в споре может быть достигнута истина.

Ext

Ext Charting and Mapping with Google Visualizations

October 13, 2008 by Aaron Conran

Adapting google’s DataTable to an Ext Store

Differences between Ext.data.Store and google.visualization.DataTable

Using the Adapter

Using the GVisualizationPanel

In Conclusion

27 Responses to “Ext Charting and Mapping with Google Visualizations”

Leave a Reply

Archives

Categories

Ext GWT

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help