At Clemson, we have commenced an industry sponsored project to build Web 2.0 based business dashboards. I was in the process of designing a RIA based architecture for the same. I was considering RIA' s like jQuery, ExtJS and YUI. Some of the features of ExtJS 3.0 were impressive and the ExtJS charts caught my attention. Though it has been implemented using flash, I thought of performing a proof-of-concept to understand the capabilities of the ExtJS charts with XML data.These were the steps which I have followed.
Step 1 : Building Charts.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Charts</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/stylesheet.css"/>
<script type ="text/javascript" src="adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="ext-all.js"> </script>
<script type="text/javascript" src="charts.js"> </script>
</head>
<body>
<h1>Charts Example</h1>
<div style="position:relative" align="center" id="container">
</div>
</body>
</html>
Step 2: test1.xml
(This XML file shows of the total number of members in Clemson University OSUM Club divided on a monthly basis)
Step 3: charts.js
(This will be the file which will load the Chart object with the parameters as mentioned in the excel )
Ext.chart.Chart.CHART_URL = 'resources/charts.swf';
Ext.onReady(function(){
var store = new Ext.data.XmlStore({
url: 'test1.xml',
record: 'test',
fields:[{name:'name'},{name:'members', type:'int'}]
});
store.load();
new Ext.Panel({
title: 'Clemson University OSUM Club Members',
renderTo: 'container',
width:500,
height:300,
layout:'fit',
items: {
xtype: 'linechart',
store: store,
xField: 'name',
yField: 'members',
listeners: {
itemclick: function(o){
var rec = store.getAt(o.index);
Ext.example.msg('Item Selected', 'You chose {0}.', rec.get('name'));
}
}
}
});
});
In this case, we have mentioned the url as test1.xml, since we want to load the data from the xml and we have used an XmlStore for this data. You will be ina position to call a servlet by mentioning the servlet name instead of the "test1.xml" in the url: parameter.The take away from this proof-of-concept is that we should parse the string data from the xml to an 'int' while generating graphs using ExtJS where ever required. In our case we need to parse the number of members to the data type "int". Hence we parsed the members node as "int" in the datastore as depicted below.
fields:[{name:'name'},{name:'members', type:'int'}] Now you may build the application and deploy the war file in a web server. The final chart will look like the following. Special thanks to Reeta Kumari for the advise provided.
