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:
-
-
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)'
-
}]
-
});
-
Related Content:
3.5 rating from 207 votes
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.