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 Touc...
Quick Intro
• Head – Mobility at Metacube, a premier product
engineering based company in Jaipur, India
• 14 years of deve...
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 relatio...
Getting Started with
Sencha Touch Charts
• Separate Charts library till Sencha Touch 2.0.x
• Integrated in core Sencha Tou...
Key Concepts
• All chart components derived from
Ext.chart.AbstractChart which in turn derives from
Ext.draw.component
• 3...
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
• Ba...
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.
...
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 de...
Case Study – Enterprise Analytics
• Can replace Hibernate with Spring Data JPA or
Play Framework
• One Controller for Each...
Case Study – Views
• Main Panel derived from Ext.Container
• Parent Panel consisting of Title Bar, Four-Panel
Layout & Bot...
Case Study – Models
• Datamodel stores actual JSON data for all charts
• UserSetting model defines parameters for each
cha...
Case Study – Controllers
• One Master controller that loads stores, invokes
other controllers
• One controller per chart t...
Sencha Touch Charts & Google
Analytics – Made For Each Others
• Track hits to each page (or chart) of your app
• Identify ...
Demo & Code Walkthrough
Code - https://github.com/mcube/SenchaCON-Charts-demo
Live Demo - http://174.129.42.247/SenchaCOND...
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!
• @senc...
Upcoming SlideShare
Loading in...5
×

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

1,343

Published on

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,343
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • 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.
  • Can also show Pie Chart 3D
  • Transcript of "SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts"

    1. 1. gauravkheterpal gaurav.kheterpal@metacube.com Starts at 4:15 PM Enterprise Grade Analytics Using Sencha Touch Charts
    2. 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. 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. 4. Quick Poll Developers Sencha Touch Developers Sencha Touch Developers Who’ve Used Sencha Touch Charts
    5. 5. Overview • If a picture is worth a thousand words
    6. 6. Overview • A graph or a chart is definitely worth millions
    7. 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. 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. 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. 10. Key Concepts • Chart • Axis • Series • Legend
    11. 11. Key Concepts - Axes Docking Types • Left/ Right (Vertical) • Top/ Bottom (Horizontal) • Radial • Angular
    12. 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. 13. Key Concepts – Series Types Stacked Area
    14. 14. Bar Key Concepts – Series Types
    15. 15. Line Key Concepts – Series Types
    16. 16. Pie Key Concepts – Series Types
    17. 17. Radar Key Concepts – Series Types
    18. 18. Scatter Key Concepts – Series Types
    19. 19. Gauge Key Concepts – Series Types
    20. 20. Interactivity in Sencha Touch Charts A Chart without Interactivity is often like
    21. 21. Interactivity in Sencha Touch Charts • Interactions • Gestures
    22. 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. 23. Gestures Customize gestures as you want
    24. 24. Item Highlight Highlight individual data points on a chart with a default tap gesture
    25. 25. Item Info Select individual data point items and view detailed information in a popup panel
    26. 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. 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. 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. 29. Case Study – Models • Datamodel stores actual JSON data for all charts • UserSetting model defines parameters for each chart displayed
    30. 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. 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. 32. Demo & Code Walkthrough Code - https://github.com/mcube/SenchaCON-Charts-demo Live Demo - http://174.129.42.247/SenchaCONDemo/
    33. 33. Q&A Just in case you didn’t remember, Community Pavilion Pub Crawl is next !
    34. 34. Take the Survey! • Session survey • Available on the SenchaCon mobile app • http://app.senchacon.c om • Be social! • @senchacon • #senchacon • @gauravkheterpal

    ×