Over a million developers have joined DZone.

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

· Java Zone

Learn more about Kotlin, a new programming language designed to solve problems that software developers face every day brought to you in partnership with JetBrains.

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:




 

The Java Zone is brought to you in partnership with JetBrains.  Discover how powerful static code analysis and ergonomic design make development not only productive but also an enjoyable experience.

Topics:

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

{{ parent.tldr }}

{{ parent.urlSource.name }}