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

Source: Ajaxian » Front Page
Original Article: http://feeds.feedburner.com/~r/ajaxian/~3/419567498/tying-great-visualizations-to-ext-charts-and-maps

Comments are closed.



Site Navigation