Ouertani Slim was born in Tunisia in 1981. Now he is a software engineer since 2004 and he is Java 6 and Spring certified with 100% and 94% respectively. He is very interested in Java technology, Scala and open source projects. He believes that programming is one of the hardest jobs and most beautiful in the world. Slim has posted 32 posts at DZone. You can read more from them at their website. View Full User Profile

Create Heartbeat Charts with Ext JS, NetBeans IDE 6.9, and REST

06.03.2010
| 10169 views |
  • submit to reddit

This tutorial walks through how to animate an Ext JS chart using Java EE 6 with RESTful web services and NetBeans IDE 6.9.

This tutorial uses the following software:

  •   NetBeans IDE 6.9
  •   GlassFish V3
  •   Derby DB
  •   Ext JS version 3

1. Create a new web project with Glassfish V 3 and JEE  6, and name it "heartbeat":



 
2. Add a new RESTful web service from database:

  •     Select jdbc/sample as datasource and add the "micromarket" table.
  •     Set the package to "com.jtunisie.extjs.entity" and click Finish.
  •     A configuration window appears, leave the defaults, and click OK.


3. Set shared-cache-mode to NONE in the "persistence.xml" file.

4. Copy and paste the Ext JS directory into your web project:


5. Add two files, "index.html" and "index.js", with the content below:

index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="index.js"> </script>
</head>
<body>
<div id="chart"></div>
</body>
</html>


"index.js":

Ext.onReady(function(){

var store = new Ext.data.Store({
header :Ext.Ajax.defaultHeaders = {
'Accept': 'application/json'
},
proxy: new Ext.data.HttpProxy({
url: '/heartbeat/resources/microMarkets/'
}),
reader: new Ext.data.JsonReader({
root:'microMarket'
},
[{
name: 'areaLength'
}, {
name: 'areaWidth'
} ]),
fields : [{
name: 'areaLength',
type : 'double'
}, {
name: 'areaWidth',
type : 'double'
}]

});


store.load();

var chart = new Ext.chart.LineChart({
height: 300,
width: 600,
store: store,
xField: "areaLength",
yField: "areaWidth",
renderTo: "chart"
});

var storerefresh = {
run: function(){
store.load();
},
interval: 10000 //1 second
}
Ext.TaskMgr.start(storerefresh);

});

 

6. Run the project, change your data in the database, and the chart will be automatically updated:




 

5
Your rating: None Average: 5 (2 votes)
Published at DZone with permission of its author, Slim Ouertani.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)