Currently I am working on a bigger project where Extjs has an important role. Up to now I had no experience with it charts capabilities. From an earlier work experience I knew Fusion Charts, but I was looking for something “for free”, so my eye fell on Google Charts.

No working right away

My usual search on internet led to this contribution on the Extjs website. So I started the effort to make it work in the latest Extjs release 3.2.

After creating a test environment, where I downloaded the extension from the website I was hoping that it would work immediately, but it didn’t. The demo on this link, is using Extjs release 2.2.

Respect the DOM please

I will keep this story short, but a small argument I have for all who put their effort on maintaining a framework like Extjs, or any other framework. It would be also nice if any modifications to the DOM in relation to the core of a product is well documented, in a kind of history matrix.

It would be great if modifications to objects and functions leave the DOM manipulations more intact in relation with the prior release. I think that many bugs can be addressed to this DOM manipulations. It makes versions also not downwards compatible. This time the pain was just one (1) word that made the difference between working and frustration.

The right type.type

Reason why it was not functioning was a modification in the DOM outcome for Ext.StoreMgr and the function fields.get(). The user extension for Google Charts misinterpreted the column information send to the Google API.

In de original javascript ext.ux.gvisualizationpanel.js (line 23) you can find:

tbl.addColumn(convert[f.type], c.label || c, id);

tbl.addColumn(convert[f.type.type], c.label || c, id);

 

Links

• Demo version Extjs 3.2 : Demo
• Demo version Extjs 2.2: Demo
• Download of the Extension (3.2): Download
• Download of the Extension (2.2): Download
• Extjs Framework website: http://www.extjs.com
• Google Charts API documentation: Documentation (Engels)

Credits

Aaron Conran (twitter)