Sencha Inc. | HTML5 Apps

Blog

Ext Charting and Mapping with Google Visualizations

October 13, 2008 | Aaron Conran

Daily Forum Ratio GaugesCreating 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.

Google Orgchart Screenshot with Binding

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.

There are 70 responses. Add yours.

Gunmen

6 years ago

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

sharpguy

6 years ago

Excellent!

Amjith PS

6 years ago

Thanks Aaron Conran for sharing this.

Amjith PS
Googleknoltalk.com

Ajaxian » Tying great visualizations to Ext

6 years ago

[...] 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

6 years ago

Thanks Aaron, Very cool integration.

Ajax Girl » Blog Archive » Tying great

6 years ago

[...] 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 [...]

seasharp2

6 years ago

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

Derick S

6 years ago

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

Daily del.icio.us for October 11th through October

6 years ago

[...] 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

6 years ago

@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

6 years ago

thanks very much , this is just i want…

Tutorial: Ext Charting and Mapping with Google Vis

6 years ago

[...] 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

6 years ago

[...] 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 [...]

Web 2.0 Announcer

6 years ago

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

6 years ago

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

6 years ago

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

Time

6 years ago

??~

Time

6 years ago

EXT????????????????
??????????????????????????????????

Charles Opute Odili

6 years ago

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

6 years ago

[...] 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)

6 years ago

Really, Great!
Conran is the best

Mathulan

6 years ago

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

6 years ago

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 charts,...

Becca

6 years ago

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 B

6 years ago

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

Karr

6 years ago

????? ? ????????? ?? ????? ???????, ???? ?????? ? ????? ????? ???? ?????????? ??????. smile

Ext Charting and Mapping with Google Visualization

6 years ago

[...] click here to see the complete example [...]

jGrowl

6 years ago

[...] click here to see the complete example Currently playing: Ext Charting and Mapping with Google Visualizations [...]

XSatiram

6 years ago

? ??? ?????? ?? ????? ??????? ??????? ?? ????????? ?????? ???????, ?? ??????? ????? ??????????, ?? ??? ? ?? ????? ????????? ?? ???????? smile

dragon

6 years ago

Really, Great!
Conran is the best:)

Lie

6 years ago

Google make great things.

????

6 years ago

???????????????????

30 Essential Controls

6 years ago

[...] by: Flex (various plug-ins and Flex Charting), ExtJs (combined with GWT), Dojo, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Gauge), MooTools, MochaUI, [...]

NewToExt&LovinIT

6 years ago

Quick question
I am concerned about this line
what if google decides to discontinue some of services/properties mentioned in it.
question is basically how far should I rely on above line.
NewToExt&LovinIT

NewToExt&LovinIT

6 years ago

Line is missed in above Q. is related to call to http://www.google.com/jsapi in script look up

tang

6 years ago

Thanks for sharing

Matt

5 years ago

Is there a way to set the formatted value of an item when using a store instead of a DataTable? For example, when using the google.visualization.DataTable you can add a fourth parameter to setCell to define the formatted value of the cell:
      data.setCell(1, 0, ‘Jim’,‘jim’);

Give your Web Interface a Great Look | Expertz

5 years ago

[...] by: Flex (various plug-ins and Flex Charting), ExtJs (combined with GWT), Dojo, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Gauge), MooTools, MochaUI, [...]

mishmash

5 years ago

I love Pligg sites, but modifying Pligg templates is always hard for me…

kabin

5 years ago

thanks admin iyiydi saol sevdim seni böle adam olun hep :d

dinstapinsta

5 years ago

Finally found the info I needed thanks to your great blog, thanks! ^^

Neil Garb

5 years ago

I had to do some hacking to get the class to work with a JsonStore instead of a static store.  It seems that the google visualization is being rendered before the store has loaded its data.

To do this, I modified onLoadCallback to:

  onLoadCallback: function() {
      this.tableCfg = {
        store: this.store,
        columns: this.columns
      };
     
      var delegate = this.storeCallback.createDelegate(this);
     
      this.store.load({ callback: delegate });
  } 

and put the rest of onLoadCallback’s logic in storeCallback.  tableCfg becomes an object attribute instead of a local function variable as well.

Franz

5 years ago

This componenet is really what we need… I wander, does it work with EXT 3.0? thank in advance

Movie Maniac

5 years ago

Yes, it works with ext 3.0.

Saravana

5 years ago

Neil,

  Are you using asp.net? I need a sample code on How to generate a Json string from asp.net application(asp.net MVC will be useful) and bind it to the Organisation chart of google visualisation component. Any body have a demo or link for a demo?

Imran

4 years ago

More I use EXT more I love it. This is a great blog

Cristian Rinaldi

4 years ago

Great job !!!!!
I am using GVisualizationPanel with Ext 3.2.0, and I’m getting the following error:
  “this.body is undefined” on line “this.body.update(’ ‘);” GVisualizationPanel code.


This is the code for my application:

....
      var Ext.data.SimpleStore organizationDs = new ((
        store: ‘orgDs’
        fields: [(
              name: ‘OrgName’,
              type: ‘string’
          ), (
              name: ‘orgDepName’
              type: ‘string’
          )]
        data: [
          [’‘,’‘], Government
          [‘Ministry of Economy’, ‘government’]
          [“Secretary 1 ‘,’ Economy Ministry ‘]
          [‘Health Ministry’, ‘government’]
        ]
      ));

      var Ext.Panel OrgChart = new ((
        layout: ‘border’,
        id: ‘orgChartCt’
        defaults: (border: false)
        items: [(
              xtype: ‘gvisualization’
              id: ‘OrgChart’
              region: ‘center’,
              height: 220,
              bodystyle: ‘padding: 30px;’
              visualizationPkg ‘Orgchart’
              title: ‘Visualization of Organizations’,
              store: ‘orgDs’
              Columns: [‘OrgName’, ‘orgDepName’]
          )]
      ));

      var Ext.TabPanel tabsOrganizations = new ((
        region: ‘center’,
        activeTab: 0,
        plain: true,
        defaults: (autoscroll: true)
        items: [(
              title: ‘Missions and Functions’,
              html: ‘Content’
          ), (
              title: ‘Authority’
              html: ‘Content’
          )
          OrgChart

        ]
      ));

      var center = new Ext.Panel ((
        header: false,
        region: ‘center’,
        id: ‘center-panel’,
        autoscroll: true,
        margins: ‘0 0 0 0 ‘
        layout: ‘border’,
        items: [
          tools,
          tabsOrganizations
        ]
      ));
....

I appreciate your help.
Thank you.

Johan

4 years ago

I had a problem with this extension and Extjs version 3.2, but I have solved it. It came up constantly with “invalid type” in the Google API.

Change in the Ext.ux.GDataTableAdapter the following:
f.type in f.type.type

It works like a charm. The extjs 3.2 working version you can find on: http://loadthis.info/ext-ux/samples/gvisualization-sample.htm

Cristian Rinaldi

4 years ago

Hello, I’m having the same error, “this.body.update (’‘)”, the only difference I have with the example is that I do not visualize all within a Viewport, just within a panel.

var layout = new Ext.Panel ((
        Rendert ‘initHome’
        layout: ‘border’,
        items: [(
              id: ‘center’,
              region: ‘center’,
              layout: ‘card’
              activeItem: 0,
              defaults: (border: false)
              margins: ‘5 5 5 0 ‘
              items: [
                orgChartCt
              ]
          )]
      ));

      layout.render (‘layout’);

Where “orgChartCt” is the organizational chart.
Thanks for your help!

Mayus

4 years ago

Hello, nice Work !

Since I upgrade to Ext 3.2, I’m having the same error than Cristian Rinaldi and I didn’t find yet how to solve it.

Any help ?

Thanks

Umang

4 years ago

Excellent!

Alyssa Manfredonia

4 years ago

That is a great post because, I’m guilty,

Jude MWenda

4 years ago

Hi,
I have been working with this extension only that i can not get it to work with Google Motion chart? is it possible through motion charts?

Regards

Ignacio Sosa

4 years ago

Hi,

Does anyone, who had the problem “this.body is undefined” on line “this.body.update(‘ ‘);” on GVisualizationPanel code, resolved it?.

The problem, for me, is shown on Firefox, on Chrome it works perfect.

Thanks in advance

Amin

4 years ago

Great work!

Any idea how to use style property?
I’m looking for the equivalent of the following line:
myDataTable.setRowProperty(3, ‘style’, ‘border: 1px solid green’);

thanks!

Eddie

4 years ago

Hi,
any word on the “this.body is undefined” problem reported by Ignacio and Cristian Rinaldi? I’m getting it too. Using 3.2.

Thanks!

mato

4 years ago

Hi, try this one for ExtJs 3.2. I don’t think it’s the best solution but should be working.
www.mafospace.com/Ext.ux.GVisualizationPanel.js

Johan van de Merwe

4 years ago

I had the same problem with “this.body is undefined”. I use now the code from this post of Simon Elliston Ball from 2008 and my problem disappeared and everything works fine now, with version 3.2.

Ralph Krausse

4 years ago

I am getting an error with the samples. My error is Object expected, Ext.ux.gvisualizationpanel.js Line 121. I am using Ext 3.2.1. Also the samples at http://loadthis.info/ext-ux/samples/gvisualization-sample.htm do not seem to work for me.

thanks
Ralph

ChiefDanGeorge

4 years ago

Has anyone used the visualizationCfg parameter with one of the params that are objects themselves, something like:
visualizationCfg :
{
  hAxis :
  {
  showTextEvery : 4
  }
}
and had any success? Those params don’t seem to get used when the visualization is called.
I am using ext2.2.1 with the Ext.ux.gvisualizationpanel.js.

KM

4 years ago

Yes obviously there is regression or something because I am getting the same “this.body is undefined” error as everyone else. And it’s not only in this script either, it is in random components. I can see in firebug that the body property is defined, and contains an object, but component.body is undefined.

It’s really telling that no one at Sencha is even willing to respond to questions, let alone provide a simple patch.

rspaeth

4 years ago

Aaron, this looks like a cool use of the store with a 3rd party data visualization tool.  We have been looking for a data visualization tool that would be good for the org chart and recently found the google version.  With the ext wrapper it makes it all the more better.  Before we dive into using the google visualizations, we were wondering if the ext4 data visualizations will include an org chart?  Thanks

Canada

4 years ago

The title is very interested in learning specifically come under, thank you for the talk, I wish you good health.

goose

4 years ago

This article is the best that I have read, you must be regret if don’t read it. Wonderful! I will support you all the time.

Charles

3 years ago

This plugin seem like it would work really well for cross platform browsers.

sms

3 years ago

It is such a pleasure to tell you that all the matters what you have talked about above, will be helping me from time to time. The suggestions and writing of this article is going to be proved as an outstanding instruction for those who are trying to start their writing career.And yes i have digg your site http://www.sencha.com .

bjtyyq

3 years ago

????

bjtyyq

3 years ago

?????

jayeshdalwadi

3 years ago

i want to add google chart in extjs4 any example that working with google chart in extjs 4

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.