The all new Ext JS charting engine was completely rewritten for its latest version, Ext JS 4. The new charting system was developed by Sencha, in cooperation with the founder of Raphael JS.

What makes this system so great is that it is able to calculate, render and animate a large array of amazing charts using JavaScript. As all modern browsers possess a build in JavaScript engine, Ext JS 4 no longer needs to rely on flash to create its charts, as it did with previous versions. Not only does this allow charts to lose any dependency with flash or external plugins, it also means that all components of the chart are rendered directly into the browsers DOM. This allows the charts with their data, fully accessible by JavaScript, making them extremely flexible and customisable.

Creating A Simple Chart

Creating a chart in Ext JS 4 follows the same process as creating nearly any component, using the new class system.

Ext.create('Ext.chart.Chart', {
       //CHART CONFIG
});

When you first create your chart component, it has no knowledge of which type of chart it shall become. This is defined within the charts configuration using series, axes and a store. This is the same more the majority of cases in a real world scenario. When you draw your axes for a chart, that chart could potential be many different types (Line, Column, Area, Scatter etc.).

Ext.create('Ext.chart.Chart', {
    animate: true,
    store: Ext.create('Ext.data.Store',{
        fields: ['category', 'data1', 'data2'],
        data: [
            {category: 'User 1', 25, 33},
            {category: 'User 2', 11, 54},
            {category: 'User 3', 46, 98}
       ]
    }),
    axes: [{
        type: 'Numeric',
	position: 'left',
	fields: ['data1','data2'],
        title: 'User Values',
        minimum: 0,
       	maximum: 100,
        grid: true
    },{
        type: 'Category',
	position: 'bottom',
	fields: 'category',
        title: 'User Categories'
    }],
    series: [{
        type: 'column',
        axis: 'left',
        xField: 'category',
        yField: ['data1', 'data2']
    }]
}); 

As shown in the code sample above, I have added 2 axes and a column series using the data from my store, thereby creating a Column Chart. This is a chart in its simplest form with the absolute minimum of required configuration to produce a chart.

The data for a chart comes from a store, specifying which fields represent categories, series, axis values etc. The hardest part of creating charts for a web app that work, is getting your data right. As you can see from the previous code sample, the chart uses the fields defined within the store to specify how the chart is rendered.

What Else Can You Do With Ext JS 4 Charts?

Since the charts are rendered using JavaScript, manipulating the data is really easy, therefore has allowed Sencha to provide a huge amount of customisable options.

• Legend with specified Position
• Specify minimum/maximum axis values or leave for Ext JS to calculate for you
• Create linear gradients to be used with chart components
• Chart animation
• Chart Shadowing
• Series Highlighting, callouts and tooltips
• Chart themes to customise the look and feel of a chart
• Specify the size, style and rotation/direction of chart labels
• And many more…

What makes these additional configuration options so great, is that they all work and flow completely flawlessly, solely using JavaScript.

In my personal opinion the Ext JS 4 Charts are one seriously amazing part of the framework, great job Sencha.

Follow me on Twitter for more, @webdevluke