Over a million developers have joined DZone.

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

DZone 's Guide to

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

· Java Zone ·
Free Resource

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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
<div id="chart"></div>



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({
name: 'areaLength'
}, {
name: 'areaWidth'
} ]),
fields : [{
name: 'areaLength',
type : 'double'
}, {
name: 'areaWidth',
type : 'double'



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

var storerefresh = {
run: function(){
interval: 10000 //1 second



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



Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}