Integrate 3rd Party Charting Library (Ex HighCharts) with Extjs – By Arindam

ExtJS 5 provides a rich set of Charting libraries for our use. But sometimes they fall short as Business may need more rich charting to solve their BI issues. Examples of such scenarios may be a Timeline running continuous stock chart or a combination of multiple charting in a single dimension. These scenarios force us to look for other Charting libraries which can help the businesses get a better and effective GUI for their real life scenarios.

In this blog we will show how to Integrate one of such libraries to ExtjS. We will be using HighCharts for the purpose. There are tons of libraries available and mostly will gel well with Extjs using some tweaks. Note that as of now HighCharts is free for personal websites and non Commercial use. There are developer and OEM licenses for Commercial purpose. Get more about HighCharts here.

An Example from HighCharts:

Screen Shot 2015-05-03 at 12.58.17

Code Steps:

Step1 : Download the HighChart Standalone Framework (HighCharts + jQuery merged into one set from : http://www.highcharts.com/download). This will eliminate the requirement of jQuery to be imported.

Step2: In the jsp or Html of your app add this path along with other Extjs paths.

Steps 3: Check all the required files. The Js files required are:

<link rel=”stylesheet” type=”text/css” href=”ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css“>
<script type=”text/javascript” src=”ext/build/ext-all-debug.js“></script>
<script type=”text/javascript” src=”ext/packages/ext-theme-neptune/build/ext-theme-neptune.js“></script>
<script type=”text/javascript” src=”highcharts-custom.js“></script>

Change the theme files according to your requirement or Project theme.

The code below shows a Window having a component (which holds the HighChart). Make sure to change the path of libraries to suit your needs.


Ext.create('Ext.window.Window', {
title: 'Window with HighChart',
layout: 'fit',
autoShow:true,
items: [
{
xtype:'component',
title:'Example Chart',
id:Ext.id(),
listeners:{
afterrender:function( component, eOpts ){
var chartref = new Highcharts.Chart(
{
chart: {
type: 'bar',
renderTo:this.getId()
},
title: {
text: 'Stacked bar chart'
},
credits:{
enabled:false
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
}
);
}
}
}
]
});

Output:

A HighChart running within ExtjS Window.

Screen Shot 2015-05-03 at 13.44.29

Happy Coding !!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s