This document introduces Sencha Touch Charts 2.0, a JavaScript framework for building interactive charts and graphs on mobile devices. It discusses key features of Sencha Touch like cross-platform support, touch events, and components. Sencha Touch Charts adds charting capabilities, allowing developers to easily create charts using stores, axes, series and interactions. Examples are provided for getting started and references are included.

1. Sencha Touch Charts 2.0
For the Mobile Web
Saad Ulde

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. 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. Touch Events

Built on native browser events and abstracted for
performance

Supports

Tap

Double Tap

Tap and hold

Swipe

Rotate

Pinch

5. Charts on Mobiles

In mobile web world most of the charting libraries use
flash

Flash isn't supported on many devices

The few that are javascripts based ( amCharts,
Highcharts, Raphael ) don't support gestures ( swipe,
pinch etc ).

Gestures are quintessential when operating from
mobile.

6. Enter Sencha Touch Charts

Enables developers to easily build interactive and
animated charts and graphs in HTML5

New add-on to Sencha Touch that will change how
people interact with mobile web data

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. Components of Charts

9. Components explained
Store

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. 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. 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. 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. 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. Demo

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/