SlideShare a Scribd company logo
1 of 34
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 PrototypingDavid 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 PrototypesDavid 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 needsSriskandarajah Suhothayan
 
Apple Watch Human Interface Guidelines
Apple Watch Human Interface GuidelinesApple Watch Human Interface Guidelines
Apple Watch Human Interface GuidelinesShengWen 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 McGuireDatabricks
 
Visual guidance calgary user group
Visual guidance calgary user groupVisual guidance calgary user group
Visual guidance calgary user groupBerkovich 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 2020Shweta Sharma
 
SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3SpringPeople Introduction to HTML5 & CSS3
SpringPeople Introduction to HTML5 & CSS3SpringPeople
 
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 #5Russell Spangler
 
Responsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise AppsResponsive Web Design for Enterprise Apps
Responsive Web Design for Enterprise AppsParam Rengaiah
 
Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2Tableau Visual analytics complete deck 2
Tableau Visual analytics complete deck 2Arun 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 PatternsAdham Enaya
 
Getting Started with Innoslate
Getting Started with InnoslateGetting Started with Innoslate
Getting Started with InnoslateElizabeth 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 AIGaurav 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 DeveloperGaurav 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 KheterpalGaurav 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 Salesforce1Gaurav 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 sdkGaurav 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 painGaurav 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 titaniumGaurav 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

Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observabilityitnewsafrica
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Mark Simos
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsYoss Cohen
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxAna-Maria Mihalceanu
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterMydbops
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch TuesdayIvanti
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityIES VE
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFMichael Gough
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Kaya Weers
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Recently uploaded (20)

Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security ObservabilityGlenn Lazarus- Why Your Observability Strategy Needs Security Observability
Glenn Lazarus- Why Your Observability Strategy Needs Security Observability
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
Tampa BSides - The No BS SOC (slides from April 6, 2024 talk)
 
Infrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platformsInfrared simulation and processing on Nvidia platforms
Infrared simulation and processing on Nvidia platforms
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
A Glance At The Java Performance Toolbox
A Glance At The Java Performance ToolboxA Glance At The Java Performance Toolbox
A Glance At The Java Performance Toolbox
 
Scale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL RouterScale your database traffic with Read & Write split using MySQL Router
Scale your database traffic with Read & Write split using MySQL Router
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
2024 April Patch Tuesday
2024 April Patch Tuesday2024 April Patch Tuesday
2024 April Patch Tuesday
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Decarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a realityDecarbonising Buildings: Making a net-zero built environment a reality
Decarbonising Buildings: Making a net-zero built environment a reality
 
All These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDFAll These Sophisticated Attacks, Can We Really Detect Them - PDF
All These Sophisticated Attacks, Can We Really Detect Them - PDF
 
Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)Design pattern talk by Kaya Weers - 2024 (v2)
Design pattern talk by Kaya Weers - 2024 (v2)
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

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