Sencha Touch Charts 2.0  For the Mobile Web              Saad Ulde
Introduction to Sencha               Touch    Cross-platform    Javascript framework for    building rich mobile apps    ...
A complete framework    Components            Lists, Carousel, Pickers, Slider, Toolbar, Forms etc    MVC    Layouts ...
Touch Events    Built on native browser events and abstracted for    performance    Supports            Tap           ...
Charts on Mobiles  In mobile web world most of the charting libraries useflash    Flash isnt supported on many devices ...
Enter Sencha Touch Charts Enables developers to easily build interactive andanimated charts and graphs in HTML5 New add-...
Features    Abstraction for SVG, VML and Canvas engines    Graceful fallbacks when not supported    Supported all basic...
Components of Charts
Components explainedStore        It is a client side cache and loads data via a Proxy        Code snippet of a store -  ...
Axis   Defines axis for charts   Position, type, style can be configured   Not applicable to pie/donut or similar chart...
Series        Series is the type of chart to be displayed        Besides the basic types of charts, the new ones      th...
Interactions        Plugged in to a chart to allow the user to interact      with the chart and its data in special ways ...
Getting started with Touch              Charts    Download the Sencha Touch Charts and extract its    contents in your lo...
Demo
References    Sencha Touch 2 -    http://docs.sencha.com/touch/2-0/    Sencha Touch Charts 2.0(beta) -http://docs.sencha...
Upcoming SlideShare
Loading in...5
×

Sencha Touch Charts

3,572

Published on

Slides from my talk at Radiance at Clarice Technologies, July 2012.

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

No Downloads
Views
Total Views
3,572
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sencha Touch Charts

  1. 1. Sencha Touch Charts 2.0 For the Mobile Web Saad Ulde
  2. 2. Introduction to Sencha Touch Cross-platform Javascript framework for building rich mobile apps with web standards Faster, cheaper Highly customizable Resolution Independent Open Source (application), free (commercial)
  3. 3. A complete framework Components  Lists, Carousel, Pickers, Slider, Toolbar, Forms etc MVC Layouts Device detection Animations Scrolling (hardware accelerated) Data Package (easily consumes JSON/P, XML, YQL) Theming (CSS3, SASS and Compass)
  4. 4. Touch Events Built on native browser events and abstracted for performance Supports  Tap  Double Tap  Tap and hold  Swipe  Rotate  Pinch
  5. 5. Charts on Mobiles In mobile web world most of the charting libraries useflash Flash isnt supported on many devices The few that are javascripts based ( amCharts,Highcharts, Raphael ) dont support gestures ( swipe,pinch etc ). Gestures are quintessential when operating frommobile.
  6. 6. Enter Sencha Touch Charts Enables developers to easily build interactive andanimated charts and graphs in HTML5 New add-on to Sencha Touch that will change howpeople interact with mobile web data
  7. 7. Features Abstraction for SVG, VML and Canvas engines Graceful fallbacks when not supported Supported all basic types of charts and provides some special charts like :  Gauge  Treemap  Sunburst  Wordmap  World Data/Census
  8. 8. Components of Charts
  9. 9. Components explainedStore  It is a client side cache and loads data via a Proxy  Code snippet of a store - var myStore = Ext.create(Ext.data.Store, { model: , proxy: { type: ajax, url : , reader: { type: json } } });
  10. 10. Axis Defines axis for charts Position, type, style can be configured Not applicable to pie/donut or similar charts Code snippet of an axis -{ type: Numeric, grid: true, position: left, fields: [data1, data2, data3], title: Number of Hits }}
  11. 11. Series  Series is the type of chart to be displayed  Besides the basic types of charts, the new ones that Touch Charts supports are : Sunburst, Wordmap, Treemap etc  Code snippet of a series - { type: area, axis: left, xField: , yField: [ ], title: [ ] }
  12. 12. Interactions  Plugged in to a chart to allow the user to interact with the chart and its data in special ways  Panzoom, itemcompare, itemhighlight, iteminfo, rotate, togglestacked are some of the itneractions supported.  Code snippet for an interaction - { type: iteminfo, event:itemtap, listeners: { show: function (interaction, item, panel) { panel.setHtml( ); } } }
  13. 13. Getting started with Touch Charts Download the Sencha Touch Charts and extract its contents in your local web server folder. Create an HTML file give the paths to Sencha Touch and Charts framework and the index.js file that has the code for your charts.<script type="text/javascript" src="sencha-touch.js"></script><script type="text/javascript" src="touch-charts.js"></script><script type="text/javascript" src="src/index.js"></script>
  14. 14. Demo
  15. 15. References Sencha Touch 2 - http://docs.sencha.com/touch/2-0/ Sencha Touch Charts 2.0(beta) -http://docs.sencha.com/touch-charts/1-0/ Kitchen Sink Demo (Sencha Touch 2)http://docs.sencha.com/touch/2-0/touch-build /examples/production/kitchensink/

×