White Paper 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 crossbrowser User Interface (UI) components. Some of the components are like grids, charts, trees, forms, drag and drop and so on.
About the Author Kali Prasanna Mishra The author, Kali Prasanna Mishra, is Systems Engineer, working with TCS. He has more than three years of experience in developing and managing Rich Internet Application (RIA) for various domains. He also has the expertise in User Experience space. His competency includes RIA technologies like Ext JS, jquery, Flex; etc. He has worked on different RIA Web applications and has helped in making the websites Browser Compatible and Usable. 2
Table of Contents 1. Introduction 4 2. Setting up Ext JS 4 3. Problem statement/key challenges 4 4. Defining Data Source for Charts 5 5. Creating Html Pages for Displaying Charts 6 6. Creating Line Chart 7 7. Creating Column Chart 8 8. Creating Bar Chart 9 9. Creating a Pie Chart 10 10. Customizing Charts 11 I. Creating Multi Series Chart 11 II. Displaying the Legend for a Chart 12 III. Customizing the Tool Tip for Charts 13 11. Conclusion 14 3
Introduction 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. Setting up Ext JS 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: n OS : Windows XP n IDE : Eclipse 3.6 n Server : tomcat 6.0 n Database : MySQL 5.0 n Ext JS versions : 3.4 n Project type: Java dynamic Web application with servlet as server-side component Problem statement/key challenges 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. 4
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. Defining Data Source for Charts 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: 5
The servlet ForLineChart gives response XML as follows. Thus the data source is ready to be used by Ext JS widgets. Creating HTML Pages for Displaying Charts 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. 6
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 Figure 1: Line chart with single series and default styling 7
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: 'columnchart', xtype: stackedcolumnchart // for creating a column chart, // for creating stacked column chart Figure 2: Column chart with single series and default styling 8
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: 'barchart', // for creating a bar chart, xtype: 'stackedbarchart' // for creating stacked bar chart Figure 3: Bar chart with single series and default styling 9
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. Figure 4: Pie chart with default styling 10
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. Figure 5: Multiseries line chart 11
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. Figure 6: Multiseries line chart with legend 12
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: Figure 7: Multiseries line chart with custom tooltip 13
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: n n n n n 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. References [1] http://docs.sencha.com/ext-js/3-4/ [2] http://w3techs.com/technologies/details/js-extjs/all/all [3] http://en.wikipedia.org/wiki/comparison_of_javascript_frameworks 14
Contact For more information about TCS consulting services, contact at ntdg.ux@tcs.com 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 About Tata Consultancy Services (TCS) 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 www.tcs.com IT Services Business Solutions Outsourcing 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 other applicable laws, and could result in criminal or civil penalties. Copyright 2012 Tata Consultancy Services Limited TCS Design Services I M I 02 I 12