Over a million developers have joined DZone.

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

· Java Zone

Learn more about how the Java language, tools and frameworks have been the foundation of countless enterprise systems, brought to you in partnership with Salesforce.

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:




 

Discover how the Force.com Web Services Connector (WSC) is a code-generation tool and runtime library for use with Force.com Web services, brought to you in partnership with Salesforce.

Topics:

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

{{ parent.tldr }}

{{ parent.urlSource.name }}