SlideShare a Scribd company logo
gauravkheterpal
gaurav.kheterpal@metacube.com
Starts at 4:15 PM
Enterprise Grade
Analytics Using
Sencha Touch Charts
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
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
Quick Poll
Developers
Sencha Touch Developers
Sencha Touch Developers Who’ve Used Sencha
Touch Charts
Overview
• If a picture is worth a thousand words
Overview
• A graph or a chart is definitely worth millions
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!
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
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
Key Concepts
• Chart
• Axis
• Series
• Legend
Key Concepts - Axes
Docking Types
• Left/ Right (Vertical)
• Top/ Bottom (Horizontal)
• Radial
• Angular
Key Concepts - Series
• Abstract master class for all chart types
• Each type defined by series:type attribute
• Area
• Bar
• Line
• Pie
• Radar
• Scatter
• Gauge
Key Concepts – Series Types
Stacked Area
Bar
Key Concepts – Series Types
Line
Key Concepts – Series Types
Pie
Key Concepts – Series Types
Radar
Key Concepts – Series Types
Scatter
Key Concepts – Series Types
Gauge
Key Concepts – Series Types
Interactivity in Sencha Touch
Charts
A Chart without Interactivity is often like
Interactivity in Sencha Touch
Charts
• Interactions
• Gestures
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);
}
}
}
]
Gestures
Customize gestures as you want
Item Highlight
Highlight individual data points on a chart with a
default tap gesture
Item Info
Select individual data point items and view detailed
information in a popup panel
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
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
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
Case Study – Models
• Datamodel stores actual JSON data for all charts
• UserSetting model defines parameters for each
chart displayed
Case Study – Controllers
• One Master controller that loads stores, invokes
other controllers
• One controller per chart type
• One controller for each slider bar
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!
Demo & Code Walkthrough
Code - https://github.com/mcube/SenchaCON-Charts-demo
Live Demo - http://174.129.42.247/SenchaCONDemo/
Q&A
Just in case you didn’t remember, Community
Pavilion Pub Crawl is next !
Take the Survey!
• Session survey
• Available on the
SenchaCon mobile
app
• http://app.senchacon.c
om
• Be social!
• @senchacon
• #senchacon
• @gauravkheterpal

More Related Content

Similar to SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
David Farrell
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
David Farrell
 
Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?
Jen Stirrup
 
Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?
Jen Stirrup
 
WSO2 Analytics Platform: The one stop shop for all your data needs
WSO2 Analytics Platform: The one stop shop for all your data needsWSO2 Analytics Platform: The one stop shop for all your data needs
WSO2 Analytics Platform: The one stop shop for all your data needs
Sriskandarajah Suhothayan
 
UNit4.pdf
UNit4.pdfUNit4.pdf
UNit4.pdf
SugumarSarDurai
 
Apple Watch Human Interface Guidelines
Apple Watch Human Interface GuidelinesApple Watch Human Interface Guidelines
Apple Watch Human Interface Guidelines
ShengWen Chiou
 
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuireEmbracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
Databricks
 
Visual guidance calgary user group
Visual guidance calgary user groupVisual guidance calgary user group
Visual guidance calgary user group
Berkovich Consulting
 
Advanced automated visual testing - DrupalCon Global 2020
Advanced automated visual testing - DrupalCon Global 2020Advanced automated visual testing - DrupalCon Global 2020
Advanced automated visual testing - DrupalCon Global 2020
Shweta Sharma
 
SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3
SpringPeople
 
Graph store
Graph storeGraph store
Graph store
Inder Singh
 
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
Nagios
 
Cincinnati Tableau User Group Event #5
Cincinnati Tableau User Group Event #5Cincinnati Tableau User Group Event #5
Cincinnati Tableau User Group Event #5
Russell Spangler
 
Data visualization 2
Data visualization 2Data visualization 2
Data visualization 2
ManokamnaKochar1
 
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise AppsResponsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
Param Rengaiah
 
Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2
Arun K
 
Intro to Angular Directives using Interactive charting directives that use Hi...
Intro to Angular Directives using Interactive charting directives that use Hi...Intro to Angular Directives using Interactive charting directives that use Hi...
Intro to Angular Directives using Interactive charting directives that use Hi...
Lakshman Prasad
 
Android Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and PatternsAndroid Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and Patterns
Adham Enaya
 
Getting Started with Innoslate
Getting Started with InnoslateGetting Started with Innoslate
Getting Started with Innoslate
Elizabeth Steiner
 

Similar to SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts (20)

Games Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface PrototypingGames Design 2 - Lecture 10 - Game Interface Prototyping
Games Design 2 - Lecture 10 - Game Interface Prototyping
 
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper PrototypesGame Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
Game Design 2: Lecture 5 - Game UI Wireframes and Paper Prototypes
 
Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?
 
Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?Business Intelligence Barista: What DataViz Tool to Use, and When?
Business Intelligence Barista: What DataViz Tool to Use, and When?
 
WSO2 Analytics Platform: The one stop shop for all your data needs
WSO2 Analytics Platform: The one stop shop for all your data needsWSO2 Analytics Platform: The one stop shop for all your data needs
WSO2 Analytics Platform: The one stop shop for all your data needs
 
UNit4.pdf
UNit4.pdfUNit4.pdf
UNit4.pdf
 
Apple Watch Human Interface Guidelines
Apple Watch Human Interface GuidelinesApple Watch Human Interface Guidelines
Apple Watch Human Interface Guidelines
 
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuireEmbracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
Embracing a Taxonomy of Types to Simplify Machine Learning with Leah McGuire
 
Visual guidance calgary user group
Visual guidance calgary user groupVisual guidance calgary user group
Visual guidance calgary user group
 
Advanced automated visual testing - DrupalCon Global 2020
Advanced automated visual testing - DrupalCon Global 2020Advanced automated visual testing - DrupalCon Global 2020
Advanced automated visual testing - DrupalCon Global 2020
 
SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3
 
Graph store
Graph storeGraph store
Graph store
 
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
Nagios Conference 2014 - Sam Lansing - Utilizing Data Visualizations in Syste...
 
Cincinnati Tableau User Group Event #5
Cincinnati Tableau User Group Event #5Cincinnati Tableau User Group Event #5
Cincinnati Tableau User Group Event #5
 
Data visualization 2
Data visualization 2Data visualization 2
Data visualization 2
 
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise AppsResponsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise Apps
 
Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2
 
Intro to Angular Directives using Interactive charting directives that use Hi...
Intro to Angular Directives using Interactive charting directives that use Hi...Intro to Angular Directives using Interactive charting directives that use Hi...
Intro to Angular Directives using Interactive charting directives that use Hi...
 
Android Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and PatternsAndroid Effective UI: Tips, Tricks and Patterns
Android Effective UI: Tips, Tricks and Patterns
 
Getting Started with Innoslate
Getting Started with InnoslateGetting Started with Innoslate
Getting Started with Innoslate
 

More from Gaurav Kheterpal

DevFest19 - Early Diagnosis of Chronic Diseases by Smartphone AI
DevFest19 -  Early Diagnosis of Chronic Diseases by Smartphone AIDevFest19 -  Early Diagnosis of Chronic Diseases by Smartphone AI
DevFest19 - Early Diagnosis of Chronic Diseases by Smartphone AI
Gaurav Kheterpal
 
Commerce Cloud 101
Commerce Cloud 101Commerce Cloud 101
Commerce Cloud 101
Gaurav Kheterpal
 
My TopCoder Journey - How I reinvented myself as a Developer
My TopCoder Journey - How I reinvented myself as a DeveloperMy TopCoder Journey - How I reinvented myself as a Developer
My TopCoder Journey - How I reinvented myself as a Developer
Gaurav Kheterpal
 
Summer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
Summer of Trailhead - Jaipur Developer user Group - Gaurav KheterpalSummer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
Summer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
Gaurav Kheterpal
 
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
Gaurav Kheterpal
 
Titanium - The Good Parts (TiConf Bangalore)
Titanium - The Good Parts (TiConf Bangalore)Titanium - The Good Parts (TiConf Bangalore)
Titanium - The Good Parts (TiConf Bangalore)
Gaurav Kheterpal
 
Mobilise your apps with Salesforce1
Mobilise your apps with Salesforce1Mobilise your apps with Salesforce1
Mobilise your apps with Salesforce1
Gaurav Kheterpal
 
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
Gaurav Kheterpal
 
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdkDf12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
Gaurav Kheterpal
 
Using Appcelerator Titanium to build native android apps without the native pain
Using Appcelerator Titanium to build native android apps without the native painUsing Appcelerator Titanium to build native android apps without the native pain
Using Appcelerator Titanium to build native android apps without the native pain
Gaurav Kheterpal
 
Android development made easy with appcelerator titanium
Android development made easy with appcelerator titaniumAndroid development made easy with appcelerator titanium
Android development made easy with appcelerator titanium
Gaurav Kheterpal
 

More from Gaurav Kheterpal (11)

DevFest19 - Early Diagnosis of Chronic Diseases by Smartphone AI
DevFest19 -  Early Diagnosis of Chronic Diseases by Smartphone AIDevFest19 -  Early Diagnosis of Chronic Diseases by Smartphone AI
DevFest19 - Early Diagnosis of Chronic Diseases by Smartphone AI
 
Commerce Cloud 101
Commerce Cloud 101Commerce Cloud 101
Commerce Cloud 101
 
My TopCoder Journey - How I reinvented myself as a Developer
My TopCoder Journey - How I reinvented myself as a DeveloperMy TopCoder Journey - How I reinvented myself as a Developer
My TopCoder Journey - How I reinvented myself as a Developer
 
Summer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
Summer of Trailhead - Jaipur Developer user Group - Gaurav KheterpalSummer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
Summer of Trailhead - Jaipur Developer user Group - Gaurav Kheterpal
 
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
Dreamforce 2014 Mobile Theatre Session - Automated Testing for Salesforce1 Mo...
 
Titanium - The Good Parts (TiConf Bangalore)
Titanium - The Good Parts (TiConf Bangalore)Titanium - The Good Parts (TiConf Bangalore)
Titanium - The Good Parts (TiConf Bangalore)
 
Mobilise your apps with Salesforce1
Mobilise your apps with Salesforce1Mobilise your apps with Salesforce1
Mobilise your apps with Salesforce1
 
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
Salesforce Mobile DevWeek 21-28 April: Introduction to Native & Hybrid Develo...
 
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdkDf12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
Df12 gaurav kheterpal-integrating evernote and salesforce using the mobile sdk
 
Using Appcelerator Titanium to build native android apps without the native pain
Using Appcelerator Titanium to build native android apps without the native painUsing Appcelerator Titanium to build native android apps without the native pain
Using Appcelerator Titanium to build native android apps without the native pain
 
Android development made easy with appcelerator titanium
Android development made easy with appcelerator titaniumAndroid development made easy with appcelerator titanium
Android development made easy with appcelerator titanium
 

Recently uploaded

The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
Arpan Buwa
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
Priyanka Aash
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
maigasapphire
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
Ivanti
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
Priyanka Aash
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
BrainSell Technologies
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 

Recently uploaded (20)

The Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and CitiesThe Impact of the Internet of Things (IoT) on Smart Homes and Cities
The Impact of the Internet of Things (IoT) on Smart Homes and Cities
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
(CISOPlatform Summit & SACON 2024) Workshop _ Most Dangerous Attack Technique...
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
Girls Call Churchgate 9910780858 Provide Best And Top Girl Service And No1 in...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
July Patch Tuesday
July Patch TuesdayJuly Patch Tuesday
July Patch Tuesday
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
(CISOPlatform Summit & SACON 2024) Gen AI & Deepfake In Overall Security.pdf
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdfAcumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
Acumatica vs. Sage Intacct vs. NetSuite _ NOW CFO.pdf
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

  • 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); } } } ]
  • 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

Editor's Notes

  1. Good Evening Ladies, Gentlemen & Developers! My name is Gaurav Kheterpal and I’m here to talk about how you can build an Enterprise Grade Analytics solution using Sencha Touch Charts
  2. I’ll start off with a quick introduction about myself. I work as the Head of Mobility practice at Metacube, a premiere product based engineering based company in Jaipur, India. I have around 14 years of development experience in web, mobile and telecom domains. I’m an expert in hybrid development using Appcelerator Titanium, Sencha Touch & PhoneGap. I specialize in Salesforce mobile development using Sencha Touch. I am a Salesforce certified 401 developer, a Appcelerator Titanium Certified Developer and an Appcelerator Titan – I hope Sencha folksAs this presentation is all about charts and graphs, you’ll see a lot of visuals on each slides.
  3. Can also show Pie Chart 3D