claude.betancourt.us | home

Ext-JS & Google Visualization API Sample

This demo uses Aaron Conran's Ext-JS user extension to create a panel with an Annotated Time Line that displays the "Greatest DJIA Daily Point Gains."

What you need

Load up the google API. See details here.
Load the Ext-JS library.
Load the Ext-JS user extension written by Aaron Conran, Ext.ux.GVisualizationPanel.

GVisualizationPanel contains two main pieces, a Google data table adapter and the actual user extension. The data table adapter converts the Ext data store we know and love to the more simplified version required by the Google API.

Create a Ext.data.SimpleStore

Here we create a simple data store using inline data. You can easily replace this with a JsonStore and retrieve live data from a remote proxy instead.

var store = new Ext.data.SimpleStore({
	fields: [
		{
			name: 'pointDate',
			type: 'date'
		},
		{
			name: 'pointClose',
			type: 'float'
		},
		{
			name: 'pointNetChg',
			type: 'float'
		},
		{
			name: 'pointPctChg',
			type: 'float'
		},
		{
			name: 'pointNews',
			type: 'string'
		}
	],
	data: [
		['10/13/2008',9387.61,936.42,11.10,'U.S. stocks join global rally on government plans.'],
		['3/16/2000',10630.60,499.19,4.93,'Mar 16, 2000 highlights here.'],
		['7/24/2002',8191.29,488.95,6.35,'Jul 24, 2002 highlights here.'],
		['9/30/2008',10850.66,485.21,4.68,'Sep 30, 2008 highlights here.'],
		['7/29/2002',8711.88,447.49,5.41,'Jul 29, 2002 highlights here.'],
		['3/18/2008',12392.66,420.41,3.51,'Mar 18, 2008 highlights here.'],
		['3/11/2008',12156.81,416.66,3.55,'Mar 11, 2008 highlights here.'],
		['9/18/2008',11019.69,410.03,3.86,'Sep 18, 2008 highlights here.'],
		['4/5/2001',9918.05,402.63,4.23,'Apr 5, 2001 highlights here.'],
		['4/18/2001',10615.83,399.10,3.91,'Apr 18, 2001 highlights here.'],
		['4/1/2008',12654.36,391.47,3.19,'April Fools Day, 2008'],
		['9/8/1998',8020.78,380.53,4.98,'Sep 8, 1998 highlights here.'],
		['10/15/2002',8255.68,378.28,4.80,'Oct 15, 2002 highlights here.'],
		['9/19/2008',11388.44,368.75,3.35,'Sep 19, 2008 highlights here.'],
		['9/24/2001',8603.86,368.05,4.47,'Sep 24, 2001 highlights here.'],
		['10/1/2002',7938.79,346.86,4.57,''],
		['5/16/2001',11215.92,342.95,3.15,''],
		['2/5/2000',10898.72,338.62,3.21,''],
		['10/28/1997',7498.32,337.17,4.71,''],
		['9/18/2007',13739.39,335.97,2.51,''],
		['8/5/2008',11615.77,331.62,2.94,'']
	]
});

* Data available from Dow Jones Indexes.

Create the Timeline Panel

Here we instantiate the Ext.ux.GVisualizationPanel user extension and configure it to load the store defined above.

Note that the visualization package for annotatedtimeline is not defined by default in the user extension, so you need to pass it as an object literal visualizationPkg: {'annotatedtimeline': 'AnnotatedTimeLine'}.

AnnotatedTimeLine translates into the class name google.visualization.AnnotatedTimeLine

Download the source code here.

Learn more about the Ext-JS GVisualizationPanel user extension and Google Visualization API. Got a question? Ask it here.

Code Snippets by Claude Betancourt is licensed under a
Creative Commons Attribution-Share Alike 3.0 United States License.
Based on a work at code.betancourt.us.