• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts
 

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

on

  • 1,258 views

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts

Statistics

Views

Total Views
1,258
Views on SlideShare
953
Embed Views
305

Actions

Likes
0
Downloads
0
Comments
0

6 Embeds 305

https://funnel.hasgeek.com 240
http://eventifier.co 50
https://twitter.com 6
http://eventifier.com 5
http://www.eventifier.co 2
http://www.eventifier.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts SenchaCon 2013 - Enterprise Grade Analytics Using Sencha Touch Charts Presentation Transcript

  • 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