Platinum Partner
netbeans,json,javaee,ext-js,restful,jee 6

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

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:




 

{{ tag }}, {{tag}},

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
{{ parent.authors[0].realName || parent.author}}

{{ parent.authors[0].tagline || parent.tagline }}

{{ parent.views }} ViewsClicks
Tweet

{{parent.nComments}}