Blog

Resources

To start with this tutorial you need to download the resources, which has a HTML document that only includes the ExtJS library and an empty JS, which will be the file where we’re going to write the code for the charts.

Packaging the tutorial

Before we start the tutorial you need to package the code we will be writing, we already know the advantages of doing it, since we’ve studied about it.

//the namespace for this tutorial
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.Charts = {
	init: function(){
		//We are going to write the code here
	}
}

Ext.onReady(com.quizzpot.tutorial.Charts.init,com.quizzpot.tutorial.Charts);

The previous code must be written in the file “chart.js”.

Defining the information to be displayed

Now we’re going to define the information we need to display on the chart, for this example I’m going to display a chart of the different JavaScript libraries and quantity of users of their communities (this information is fake since it’s just an example). Don’t forget that this information could come from a database or some other source and it can be interpreted in any format that is supported by the store (XML, JSON, Array), in this case the information will come from an array we define directly in the code.

//information to display in the chart
var data = [['Ext JS',115000],['jQuery',250100],['Prototype',150000],['mootools',75000],['YUI',95000],['Dojo',20000],['Sizzle',15000]];

//we create the Store that will manipulate the information
var store = new Ext.data.ArrayStore({
	fields:[{name:'framework'},{name:'users', type:'float'}]
});
store.loadData(data); // loading the information in the store

We have discussed the previous code in previous chapters so this must look familiar to you.

The charts

This component is an adaptation of the library YUI, which uses a “swf” (flash movie) to generate the images of the chart, it is customizable because we can change the aspect of the chart (colors, typography, styles). You can find the components in the package “Ext.chart” so I recommend you to read the documentation.

Bar Chart

Let’s create a bar chart with the information we have in the store:

var columnChart = new Ext.chart.ColumnChart({
	store: store,
	//url:'../ext-3.0-rc1/resources/charts.swf',
	xField: 'framework',
	yField: 'users'
});

The basic configuration properties are only those three, we can add more properties by specifying the “url” of the file “swf”, since is the one in charge to display the chart; this is really important if we don’t want to our application to search the “swf” from Yahoo and it’s actually required to specify the “url” if we don’t have Internet access.

With the property “xField” we define where the graph should be positioned on the X axis, meanwhile the property “yField” indicates the position for the Y axis, these two fields are required to create a Bar Chart.

If we add the property “renderTo” we can render the chart in the screen, so it can look like like this:

Linear Chart

A linear chart is created the same way as the bar chart, we only need to use the component “LineChart” like this:

var lineChart = new Ext.chart.LineChart({
	store: store,
	xField: 'framework',
	yField: 'users'
});

This information is enough to create a basic linear chart; to render this chart on the screen we can use the property “render To”.

Pie Chart

The pie chart is created differently from the other charts because we don’t have X and Y axis. A pie chart is created with percentages, the component “PieChart” handles everything, we only need to configure the next few lines:

var pieChart = new Ext.chart.PieChart({
	store: store,
	dataField: 'users', //information to display in the chart
	categoryField : 'framework' //tags or categories
});

In the previous code the property “dataField” contains the information that is going to be displayed in the chart and the property “categoryField” contains the categories that are being graphing, these two properties are very important to display the chart correctly.

Positioning the charts on the screen

At this point we are going to create the panels we need for each chart, we assign these panels to a main panel and we render it to the div “frame” we have in the HTML document; also we’re going to make the panels collapsible.

var panel1 = new Ext.Panel({
	title: 'Column chart example',
	items:[columnChart]
});

var panel2 = new Ext.Panel({
	title: 'Line chart example',
	items:[lineChart]
});

var panel3 = new Ext.Panel({
	title: 'Pie chart example',
	items:[pieChart]
});

var main = new Ext.Panel({
	renderTo: 'frame',
	width:450,
	defaults: {
		height:250,
		collapsible: true,
		border:false,
		titleCollapse: true
	},
	items: [panel1,panel2,panel3]
});

The previous code generates the following screen.

We have seen the functionality of the panels before so you must be familiar with the previous code.

Conclusions

The ExtJS Framework provides charts that allow us to display information in a very simple way and we can integrate them easily with other components (panels, windows, forms, etc).

In this tutorial we have seen something we can create using the new version of ExtJS, in future articles I will show you other components tha were added in this version. As always, questions or suggestions are welcome, so make sure to leave a comment or post it in the forum.