Create interactive charts and implement drill-down – using Sencha Touch Pie chart and Bar Chart


Problem statement:

In this article we will see how we can create an interactive charts using Sencha Touch and also implement the drill-down functionality. We are going to showcase this by using the following use case:

– Prepare a pie chart to show report for montly power consumption

– On tap of pie slice i.e. tap on any month should open the bar chart showing the daily power consumption for that particular month

Pre-requisites

  • Working knowledge of Sencha Touch 2.2
  • Sencha Touch sample project

Details

Creating Pie chart using Sencha Touch

Step 1: Create a Sencha Touch app using Sencha Cmd, for how to do this you may refer to Create, Build & Package Sencha Touch project using Sencha Cmd

Step 2 : Create a simple panel with ‘Hello world’ text PieDemo.js

Ext.define('SenchaCharts.view.PieDemo', {
 extend: 'Ext.Panel',
 xtype: 'piedemo',
 initConfig:function(){
var me = this;
 Ext.apply(me.initialConfig,{
 layout: 'fit',
 style: 'background: #EEEEEE',
 items: [
{
 html:"Hello world"
 }
 ]
});
me.callParent(arguments);
 }
});

Make following changes to the app.js

launch: function() {
 // Destroy the #appLoadingIndicator element
 Ext.fly('appLoadingIndicator').destroy();
var pieChart = Ext.create('SenchaCharts.view.PieDemo',{});
 Ext.Viewport.add(pieChart);
 },

Once you are done with above changes to basic application created through Sencha cmd in step 1, you will see following page in browser chartbasic_panel

Step 3:  Add polor xtype as panel item as shown below

Ext.define('SenchaCharts.view.PieDemo', {
 extend: 'Ext.Panel',
 xtype: 'piedemo',
 requires: ['Ext.chart.PolarChart'],
 initConfig:function(){

 var me = this;
 Ext.apply(me.initialConfig,{
layout: 'fit',
 style: 'background: #EEEEEE',
 items: [

 {
 xtype: 'polar',
 }
 ]
});

 me.callParent(arguments);
 }});

Step 4: Add pie series as shown below

Ext.define('SenchaCharts.view.PieDemo', {
 extend: 'Ext.Panel',
 xtype: 'piedemo',
 requires: ['Ext.chart.PolarChart', 'Ext.chart.series.Pie'],
initConfig:function(){

 var me = this;
 Ext.apply(me.initialConfig,{
layout: 'fit',
 style: 'background: #EEEEEE',
 items: [

 {
 xtype: 'polar',
 innerPadding: 45,
 series: [
 {
 type: 'pie',
 donut: 30,

 style: {
 stroke: 'white',
 miterLimit: 10,
 lineCap: 'miter',
 lineWidth: 2
 }
 }
 ],
 axes: [
 ]
 }
 ]
});

 me.callParent(arguments);
 },});

Step 5: Create a sample store to prepare the pie chart which has month and units data, as shown below

Ext.define('SenchaCharts.store.PieDemo', {
 alias: 'store.Pie',
 extend: 'Ext.data.Store',
 config: {
 storeId: 'Pie',
 fields: ['month', 'units'],
 data: [
 {'month': 'January', 'units': 336},
 {'month': 'February', 'units': 290},
 {'month': 'March', 'units': 325},
 {'month': 'April', 'units': 350},
 {'month': 'May', 'units': 500},
 {'month': 'June', 'units': 500},
 {'month': 'July', 'units': 350},
 {'month': 'August', 'units': 200},
 {'month': 'September', 'units': 300},
 {'month': 'Octo', 'units': 300},
 {'month': 'Novem', 'units': 225},
 {'month': 'Decem', 'units': 200}
 ]
 }

 });

Step 6: Use the above store in view, which gives the following pie chart view

Ext.define('SenchaCharts.view.PieDemo', {
 extend: 'Ext.Panel',
 xtype: 'piedemo',
 requires: ['Ext.chart.PolarChart', 'Ext.chart.series.Pie'],
initConfig:function(){

 var me = this;
 Ext.apply(me.initialConfig,{
layout: 'fit',
 style: 'background: #EEEEEE',
 items: [
 {
 xtype: 'polar',
 store: 'Pie',
 animate: {
 duration: 1500,
 easing: 'easeIn'
 },
 innerPadding: 45,
 series: [
 {
 type: 'pie',
 xField: 'units',
 labelField: 'month',
 donut: 30,

 highlightCfg: {
 margin: 20
 },
 style: {
 stroke: 'white',
 miterLimit: 10,
 lineCap: 'miter',
 lineWidth: 2
 }
 }
 ],
 axes: [
 ]
 }
 ]
});

 me.callParent(arguments);
 },
 initialize: function () {
 this.callParent();
 Ext.getStore('Pie');
 }
});

basic_pie

Step 7: Add colors to the charts by specifying the colors config as shown below:

colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e",'#800000','#F25454','#81BEF7'],

pie_colors

Step 8: Add legend to the pie chart by setting the legen config on the chart as shown in the below code:

legend: {
 docked: 'top',
 verticalWidth: 100
 }

pielegend

Step 9:  Adding interactions to the chart like itemhighlight, rotate etc.

interactions: ['rotate','itemhighlight']

pie_itemhighlight

Now your pie chart is ready with provided sample data.

Step 10: To complete the chart , add a title bar, which tells the user what this chart is about  i.e. monthly power consumption report as mentioned in use case. – Add new item to panel : ‘titlebar’, as below

{
xtype: 'titlebar',
docked: 'top',
title: 'Monthly power consumption report',
},

See below image after all configuration is done

 complete_pie

Now we will see how we prepare a bar chart, which represents daily consumption report as per our use case.

Create Bar chart using Sencha Touch

Step 11: Create a new view BarDemo.js and paste the following code in the file

Ext.define('SenchaCharts.view.BarDemo', {
 extend: 'Ext.Panel',
 requires: ['Ext.chart.Chart', 'Ext.chart.interactions.PanZoom',
 'Ext.chart.series.Bar', 'Ext.chart.axis.Numeric', 'Ext.chart.axis.Category','Ext.chart.interactions.ItemHighlight'],
 config: {
 cls: 'card1',
 layout: 'fit',
 items: [
{
xtype: 'titlebar',
 docked: 'top',
 title: 'Daily power consumption report',
 },

 {
 xtype: 'chart',
 store: 'Bar',
 background: '#EEEEEE',
 colors: ["#115fa6", "#94ae0a", "#a61120", "#ff8809", "#ffd13e",'#800000','#F25454','#81BEF7'],
 interactions: [

 'itemhighlight'
 ],

 axes: [
 {
 type: 'numeric',
 position: 'left',
 title: {
 text: 'Units',
 fontSize: 15
 },
 fields: 'units'
 },
 {
 type: 'category',
 position: 'bottom',
 title: {
 text: 'Days',
 fontSize: 15
 },
 fields: 'day'
 }
 ],
 series: [
 {
 type: 'bar',
 xField: 'day',
 yField: 'units',
 style: {
 fill: '#AB3333'
 },
 highlightCfg:{
 strokeStyle :'red'
 }
 }
 ]
 }
 ]
 },
initialize: function () {
 this.callParent();
 var barStore = Ext.getStore('Bar').getDailyUsageData('January');
console.log(barStore);;

 }
});

Bar chart represents vartical or  horizontal bars for the comparisons among entities. Two axeses i.e. X – axes and Y – axes represents the property and values respectively. Bar chart has few extra configurations other than pie chart which are : – axes and series.  Configure axes and series as shown in the above code with data fields. Following image represents the bar chart showing daily power consumption details:bar_cfg

Step 12 : Now, as per the mentioned use case in the problem statment section we will make this chart app more interactive. Make following changes to PieDemo.js, so that when user taps twice on any of the pie chart slice i.e. perticular month, then the daily consumption bar chart will be opened. –  Handle the itemdoubletap event for pie slice as shown below

listeners :{
 itemdoubletap: function( series, item, event, eOpts ){
me.showDailyConsumption(series, item, event, eOpts);
 }
 },

– In showDailyConsumption function create a bar chart and add to view port as below

showDailyConsumption :function( series, item, event, eOpts ){
var oldItem = Ext.Viewport.getActiveItem();
 Ext.Viewport.remove(oldItem);
 var barChart = Ext.create('SenchaCharts.view.BarDemo',{});
 Ext.Viewport.add(barChart);
}

Final bar chart view will appear as below:

barchart

Conclusion 

In this article we saw that how we can create an interactive charts like pie charts and bar charts using Sencha Touch, which add important value to any application.

References

Sencha Touch API Documentation

About

Technical Lead at Walking Tree. Full-stack Mobile and Web developer with expertise in Sencha Ext JS/Sencha Touch/MEEN area. Involved in leading and developing products and solutions of high complexity.

Tagged with: , , , , , ,
Posted in Sencha Touch

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

We Have Moved Our Blog!

We have moved our blog to our company site. Check out https://walkingtree.tech/index.php/blog for all latest blogs.

Sencha Select Partner Sencha Training Partner
Xamarin Authorized Partner
Do More. With Sencha.

Recent Publication
%d bloggers like this: