1.
gauravkheterpal
gaurav.kheterpal@metacube.com
Starts at 4:15 PM
Enterprise Grade
Analytics Using
Sencha Touch Charts

2.
Agenda
• Let’s Get To Know Each Other
• Overview
• Getting Started with Sencha Touch Charts
• Interactivity in Sencha Touch Charts
• Case Study – Enterprise Analytics
• Demo & Code Walkthrough
• Q&A

3.
Quick Intro
• Head – Mobility at Metacube, a premier product
engineering based company in Jaipur, India
• 14 years of development experience in web, mobile and
telecom domains
• Expert in hybrid development using Appcelerator
Titanium, Sencha Touch & PhoneGap
• Specialist in Salesforce mobile development using
Sencha Touch

4.
Quick Poll
Developers
Sencha Touch Developers
Sencha Touch Developers Who’ve Used Sencha
Touch Charts

5.
Overview
• If a picture is worth a thousand words

6.
Overview
• A graph or a chart is definitely worth millions

7.
Overview
Why/ When to use Charts In Your Apps?
• Quick and intuitive visualization for data
• Great way of showing relationships & comparisons
• Forceful & Convincing
• Compact & Interesting
Charts Bring Facts to Life!

8.
Getting Started with
Sencha Touch Charts
• Separate Charts library till Sencha Touch 2.0.x
• Integrated in core Sencha Touch 2.1 core
• Supported in Sencha Architect
• Included in Sencha Complete Bundle

9.
Key Concepts
• All chart components derived from
Ext.chart.AbstractChart which in turn derives from
Ext.draw.component
• 3 Major Chart Types
• Cartesian Charts
• Polar Charts
• Space Filling Charts

10.
Key Concepts
• Chart
• Axis
• Series
• Legend

11.
Key Concepts - Axes
Docking Types
• Left/ Right (Vertical)
• Top/ Bottom (Horizontal)
• Radial
• Angular

12.
Key Concepts - Series
• Abstract master class for all chart types
• Each type defined by series:type attribute
• Area
• Bar
• Line
• Pie
• Radar
• Scatter
• Gauge

13.
Key Concepts – Series Types
Stacked Area

14.
Bar
Key Concepts – Series Types

15.
Line
Key Concepts – Series Types

16.
Pie
Key Concepts – Series Types

17.
Radar
Key Concepts – Series Types

18.
Scatter
Key Concepts – Series Types

19.
Gauge
Key Concepts – Series Types

20.
Interactivity in Sencha Touch
Charts
A Chart without Interactivity is often like

21.
Interactivity in Sencha Touch
Charts
• Interactions
• Gestures

22.
Interactions - Example
interactions: [
// If all you want is to use the default interaction,
// simply put its name here.
'panzoom',
'itemhighlight',
{
type: 'iteminfo',
// For some interactions, you can specify the gesture
// to trigger it.
gesture: 'itemtaphold',
// You can also attach listeners to an interaction.
listeners: {
show: function (me, item, panel) {
panel.setHtml("Current Item: " + item.record.data.name);
}
}
}
]

23.
Gestures
Customize gestures as you want

24.
Item Highlight
Highlight individual data points on a chart with a
default tap gesture

25.
Item Info
Select individual data point items and view detailed
information in a popup panel

26.
Case Study – Enterprise Analytics
Technology Stack
• J2EE
• Sencha Touch 2.2
• MySQL
• Hibernate
• Maven
• AWS-EC2
Demo deployed on Amazon EC2, scan the QR code
to get the URL

27.
Case Study – Enterprise Analytics
• Can replace Hibernate with Spring Data JPA or
Play Framework
• One Controller for Each Chart Type
• One Store for Each Panel Settings
• Views Organized Hierarchically
Grab the source code by scanning this QR code

28.
Case Study – Views
• Main Panel derived from Ext.Container
• Parent Panel consisting of Title Bar, Four-Panel
Layout & Bottom Toolbar
• Four-Panel Layout split into two sub-panels
• One Store for Each Panel Settings
• Views Organized Hierarchically

29.
Case Study – Models
• Datamodel stores actual JSON data for all charts
• UserSetting model defines parameters for each
chart displayed

30.
Case Study – Controllers
• One Master controller that loads stores, invokes
other controllers
• One controller per chart type
• One controller for each slider bar

31.
Sencha Touch Charts & Google
Analytics – Made For Each Others
• Track hits to each page (or chart) of your app
• Identify which users want what data
• Identify demographics, traffic sources
• Identify your bread earning pages
* Endless possibilities to generate valuable
analytical information for your charts!

32.
Demo & Code Walkthrough
Code - https://github.com/mcube/SenchaCON-Charts-demo
Live Demo - http://174.129.42.247/SenchaCONDemo/

33.
Q&A
Just in case you didn’t remember, Community
Pavilion Pub Crawl is next !

34.
Take the Survey!
• Session survey
• Available on the
SenchaCon mobile
app
• http://app.senchacon.c
om
• Be social!
• @senchacon
• #senchacon
• @gauravkheterpal