Data Visualization in Ext Js 3.4

(1)

Data Visualization in Ext Js 3.4

Ext JS is a client-side javaScript framework for rapid

development of cross-browser interactive Web

applications using techniques such as Ajax, DHTML and

DOM scripting. In 2006, Jack Slocum began working on

a set of extension utilities for the Yahoo! User Interface

(YUI) library. These extensions were later organized into

an independent library of codes, named as "yui-ext".

In the same year, Jack released its final version, whose

name was changed to Ext.

Ext JS framework is a highly robust, scalable and

Open Source javaScript framework. It provides many

utility functions, which help in DOM traversal and

DOM manipulation along with stable and

cross-browser User Interface (UI) components. Some of the

components are like grids, charts, trees, forms, drag

and drop and so on.

(2)

About the Author

Kali Prasanna Mishra

(3)

3

Introduction

Setting up Ext JS

Problem statement/key challenges

Ext JS framework is a highly robust, scalable and Open Source javaScript framework. It provides many utility functions, which help in DOM traversal and DOM manipulation along with stable and cross-browser User Interface (UI) components. Some of the components are like grids, charts, trees, forms, drag and drop and so on. Data visualization in Ext JS includes the chart package. The chart package contains bar chart, column chart, line chart, pie chart, etc. This paper explores the customization possible with the charts. Paper also explains how to connect to a server side component like a servlet/php file/asp.net and some of the Ext JS concepts like Store, Proxy API, Reader, Writer, etc.

The following is a step-by-step procedure to set up the Ext JS.

To set up Ext JS:

1. Download Ext JS 3.4.0 from the link, “http://www.sencha.com/”.

2. Unzip its content into your Integrated Development Environment (IDE).

3. Unzipped content contains several folders and files, out of which ext-all.css, ext-base.js and ext-all.js are important for development perspective. Refer them in the <head> part of the page.

4. Include “charts.swf” file to load the chart controls on the Web page as mentioned here. The .swf file is present in the resources directory of the Ext 3.x versions.

Ext.chart.Chart.CHART_URL='../ext-3.4.0/resources/charts.swf'; All the examples are created and tested on the following platforms:

OS : Windows XP IDE : Eclipse 3.6 Server : tomcat 6.0 Database : MySQL 5.0 Ext JS versions : 3.4

Project type: Java dynamic Web application with servlet as server-side component

In modern Rich Internet Applications (RIA) the focus has shifted from traditional tabular display to classy widgets. Web applications are now consisting of modular units capable of executing functionalities, called widgets. Widgets not only change the UI but also make the applications more modular. Widgets display data to user in a better manner by using different data layout components like grid, charts, tree, forms, and so on. In widgets based RIA, the focus is on data visualization and arrangements of widgets on the screen. On the other hand widgets are created keeping an eye on better user experience. So the search is now the

technologies which can provide ways of creating better widgets in small span of time. On RIA space, many of the Open Source javaScript frameworks have evolved, tested and proven to be stable across platforms.

(5)

5

Ext JS provides many user friendly widgets. Widgets are also easy to develop and easy to integrate with existing applications. In this white paper, we will explore the data visualization capabilities of Ext JS which will help other developers in rapidly creating amazing widgets.

Ext JS has the support for different types of charts. These charting components follow a certain method to get data and to send data across the server. So defining a data source for charts is an important aspect in Ext JS.

Ext JS supports different data sources like XML, JSON and ARRAY. To understand the process, we can create a data source (of type xml) and use the same data source in all the subsequent cases. The xml to be used gets generated from the servlet. However, at the same time, Ext JS can connect to different server-side components like .php or .asp files for generating the data. A process to create a store which has a proxy and reader is as follows:

(6)

The servlet ForLineChart gives response XML as follows.

Thus the data source is ready to be used by Ext JS widgets.

Ext JS widgets can be created for Java based applications or MS. Net based applications. Widgets are generally placed over a user interface. Let us consider that to be a simple HTML page. Ext JS widgets follow a certain rendering mechanism by which they get attached to a particular place on the HTML. So let us create place holders for the charts to be created soon.

(7)

7

Creating Line Chart

Ext JS is developed with oops concepts and 'new' keyword is used for creating objects. Ext JS provides short hand notations for complete package names as given here.

xtype: 'linechart', // for creating a line chart whose package structure is Ext.chart.LineChart

(8)

Creating Column Chart

Ext JS provides support for 2 types of column charts, simple column charts and stacked column charts. Ext JS provides xtype for almost all of its components.

Xtype for both of them is as follows. xtype:

xtype:

'columnchart', // for creating a column chart, stackedcolumnchart // for creating stacked column chart

(9)

9

Creating Bar Chart

Ext JS provides support for 2 types of bar charts. They are simple bar chart and stacked bar chart. Ext JS provides xtype for all most all of its components.

Xtype for both of them as follows: xtype:

xtype:

'barchart', // for creating a bar chart,

'stackedbarchart' // for creating stacked bar chart

(10)

Creating a Pie Chart

Only a single data field can be shown at a time in Pie chart. Available data fields break up into 360 degree. Tool tip shows % of volume consumed by the each data field.

Xtype of type ‘piechart’ creates a Pie chart.

(11)

Customizing Charts

We can customize a chart in Ext JS by using config objects. Config objects are nothing but the name and value pairs. A single attribute may contain an array of values as its key value. The customizing properties are same for all the chart types. Let us, therefore, consider a Line chart as shown in Figure 1 for demonstrating the customizing capabilities of Ext JS.

I. Creating Multi Series Chart

So far we have created single series charts. Now let us see how to create a multi series chart. Each series represents a unique set of data like profit across months, loss across months, and so on. The following code snippets are the add-ons for the already discussed charts and are not to be used as standalone items.

11

(12)

II. Displaying the Legend for a Chart

The legend is displayed using the 'extraStyle' property of the chart components as mentioned below. Legend displays more textual information alongside of the charts.

(13)

13

III. Customizing the Tool Tip for Charts

Ext JS provides default tooltip, which doesn’t fit to all situations. So there is a quest for changing the default tooltip. This can be achieved by 'tipRenderer' property is used to create custom tooltip for the charts as mentioned below:

(14)

References

[1] http://docs.sencha.com/ext-js/3-4/

[2] http://w3techs.com/technologies/details/js-extjs/all/all

Conclusion

Ext JS 3.4 is an Open Source javaScript framework. These chart components are robust and easy to customize and are supported by all platforms and browsers. As discussed above, these chart components are

customizable and easy to connect to server side components. So we can summarize its advantages as follows: Is easy to customize with the help of attributes

Supports all OS platforms

Does not need any proprietary tool to develop the Ext JS based component Supports a wide range of data sources like XML, JSON and Array

Supports static as well as dynamic data.

n

(15)

All content / information present here is the exclusive property of Tata Consultancy Services Limited (TCS). The content / information contained here is correct at the time of publishing. No material from here may be copied, modified, reproduced, republished, uploaded, transmitted, posted or distributed in any form without prior written permission from TCS. Unauthorized use of the content / information appearing here may violate copyright, trademark and

vices M 02 12 I I I

About Tata Consultancy Services (TCS)

www.tcs.com

Tata Consultancy Services is an IT services, consulting and business solutions organization that delivers real results to global business, ensuring a level of certainty no other firm can match. TCS offers a consulting-led, integrated portfolio of IT and IT-enabled infrastructure, engineering

TM

and assurance services. This is delivered through its unique Global Network Delivery Model , recognized as the benchmark of excellence in software development. A part of the Tata Group, India’s largest industrial conglomerate, TCS has a global footprint and is listed on the National Stock Exchange and Bombay Stock Exchange in India.

For more information, visit us at

IT Services

Business Solutions Outsourcing

Subscribe to TCS White Papers

TCS.com RSS: http://www.tcs.com/rss_feeds/Pages/feed.aspx?f=w Feedburner: http://feeds2.feedburner.com/tcswhitepapers

Contact

Data Visualization in Ext Js 3.4