Friday Oct 25, 2013

Developing Ext JS Charts in NetBeans IDE

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:

Here is app.js:

Ext.chart.Chart.CHART_URL = 'js/libs/extjs/resources/charts.swf';
var store = new{
    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

The index.html is as follows:

        <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>

More info on Ext JS:

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:


Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.


« October 2013 »