X

Geertjan's Blog

  • October 25, 2013

Developing Ext JS Charts in NetBeans IDE

Geertjan Wielenga
Product Manager

I took my first tentative steps into the world of Ext JS charts today, in NetBeans IDE 7.4. Click to enlarge the image.

I will make a screencast soon showing how charts such as the above can be created with NetBeans IDE and Ext JS. Setting up Ext JS is easy in NetBeans IDE because there's a JavaScript library browser, by means of which I can browse for the Ext JS libraries that I need and then NetBeans IDE sets up the project for me.

The JavaScript code shown above comes directly from here:

http://www.quizzpot.com/courses/learning-ext-js-3/articles/chart-series

Here is app.js:

Ext.chart.Chart.CHART_URL = 'js/libs/extjs/resources/charts.swf';
var store = new Ext.data.JsonStore({
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2004, comedy: 39000000, action: 53890000, drama: 38450000, thriller: 32060000},
{year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
{year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
{year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
{year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
]
});
var chart = new Ext.chart.ColumnChart({
store: store,
xField: 'year',
yField: 'comedy'
});
Ext.onReady(function() {
var win = new Ext.Window({
title: 'Chart series example',
width: 550,
height: 320,
layout: 'fit',
items: chart
});
win.show();
});

The index.html is as follows:

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="js/libs/extjs/resources/css/ext-all.css"/>
<script src="js/libs/ext-core/ext-core.js"></script>
<script src="js/libs/extjs/adapter/ext/ext-base-debug.js"></script>
<script src="js/libs/extjs/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body>
</body>
</html>

More info on Ext JS:

http://docs.sencha.com/extjs/4.1.3/

By the way, quite a few other articles are out there on Ext JS and NetBeans IDE, such as these, which I will be learning from during the coming days:

Join the discussion

Comments ( 2 )
  • guest Wednesday, September 28, 2016

    Hi Geertjan, I'm curious to know if the JavaScript library browser you mentioned above still exists in NB 8.1? I haven't been able to find it. Great article on using ExtJS in NB by the way.


  • Geertjan Saturday, October 1, 2016

    Go to the Project Properties of your project, you're able to browse the libraries there for Bower or Node etc.


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.Captcha
Oracle

Integrated Cloud Applications & Platform Services