Monday, October 13th, 2008

Tying great visualizations to Ext charts and maps

Category: Sencha

Aaron 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 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.

He then shows some examples, such as this intensity map:

javascript

  1. var countryStore = new Ext.data.SimpleStore({
  2.     fields: [{
  3.         name: 'Country',
  4.         type: 'string'
  5.     },{
  6.  
  7.         name: 'pop',
  8.         type: 'int'
  9.     },{
  10.         name: 'area',
  11.         type: 'int'
  12.     }],
  13.     data: [
  14.         ['CN', 1324, 9640821],        
  15.         ['IN', 1134, 3287263],
  16.         ['US', 304, 9629091],
  17.         ['ID', 232, 1904569],
  18.         ['BR', 187, 8514877]        
  19.     ]
  20. });
  21. var intensityMap = new Ext.ux.GVisualizationPanel({
  22.     id: 'intensityMap',
  23.     visualizationPkg: 'intensitymap',
  24.     title: 'Intensity Map Sample',
  25.     store: countryStore,
  26.     columns: ['Country',{
  27.         dataIndex: 'pop',
  28.         label: 'Population (mil)'
  29.     },{
  30.         dataIndex: 'area',
  31.         label: 'Area (km2)'
  32.     }]
  33. });

Posted by Dion Almaer at 9:37 am
1 Comment

+++--
3.5 rating from 212 votes

1 Comment »

Comments feed TrackBack URI

Anyone feeling the urge to go nuts and create a lot of cool dashboards, owe it to themselves to read “Information Dashboard Design” by Stephen Few.

Comment by MorganRoderick — October 13, 2008

Leave a comment

You must be logged in to post a comment.