Sencha Inc. | HTML5 Apps

Blog

Sencha Touch Charts: A New Way to Interact with Data on the Mobile Web

July 20, 2011 | Aditya Bansod

Various chart styles

We’re excited to share with you the beta release of Sencha Touch Charts. Touch Charts is a new add-on to Sencha Touch that we think will change how people interact with mobile web data. Just like AJAX was a revolution because it accelerated work flow by eliminating page refreshes, Touch Charts allows users to explore and interact with data in-session without high latency server image serving. With the included gesture controls in Touch Charts, users can zoom in and out of data, pan across data sets, as well as quickly aggregate and filter data series.

HTML5: Canvas

Sencha Touch Charts runs on the world's best touchscreen devices

When we released the new drawing packing in Ext JS 4, we took browser drawing and packaging to a whole new level. With Touch Charts we took the core drawing and charting system from Ext JS 4 and made it come alive.When we started to think mobile for Charts, we had a few key requirements. First, it had to work on all platforms that Sencha Touch supported, including Android 2+, iOS, and BlackBerry OS6. Second, it had to be mobile friendly and feel fast. We wanted to come as close to a native experience as possible using HTML5.

In order to get to that high performance native feel, we implemented a HTML5 Canvas engine in the core drawing system. Out of the gate that gave us some great benefits. We were able to leverage Canvas’ drop shadow capabilities that are hardware accelerated on many browsers. Different legend configurations Also by changing the underlying drawing system from the SVG/VML in Ext JS 4, we were able to get all the basics of the higher level charting system in place incredibly quickly and then focus on delivering the mobile specific experience.

While designing Touch Charts, we took into account that mobile has two devices types: phones and tablets; and two orientations: portrait and landscape. Touch Charts adapts to device size and orientation by creating different layouts for the charts legend. Where there’s limited screen real estate, the legend is activated via a slide-out menu so users can focus on the data. When there’s enough screen real estate (on a tablet, for example) legends are shown inline. In both cases, Legend Views extend from DataView, so they’re fully configurable Sencha Touch components.

Animated and Interactive

Selected pie chart The best part of building in a modern browser for mobile is being able to build Charts that are mobile specific, so we have the ability to add gesture control. The gestural interactions are completely configurable, so on any chart you can change the kinds of interactions you want to use. For example, you can enable a pie chart to spin with a drag or a pinch. On a bar graph you can let your users pinch to zoom, drag to pan, swap between a grouped and stacked bar with a swipe, and more. You can also add interactions directly on an axis and expose more gestures on the chart itself.

Anybody who has experience in HTML5 knows that mobile WebKit browsers differ, sometimes significantly. One key issue that we came across when building Touch Charts was the lack of consistent multi-touch browser events in different browsers. Android most notably doesn’t handle this well until Android 3.x. This posed a problem when using pinch-to-zoom on an axis, so Touch Charts provides a compatibility mode that enables the user to toggle between zoom and pan modes with older HTML5 browsers but use gestures on more capable browsers.

Style via SASS

Much like Sencha Touch, all charts in Touch Charts are styleable using SASS. Changes to the look and feel of a chart, like those to gradients, drop shadows, fonts and colors, can be implemented with variables and mixing inside SCSS files. The included Energy App example is a great example of an application that takes advantage of SASS and is styled with a darker theme. Just changing a few variables can style any chart in Touch Charts.

h3{clear: both}. Demos

If you want to get a feel for how Touch Charts looks try out these three demos in a WebKit browser:

US Energy app icon World Data app icon Combo chart icon

p{clear: both}. View other examples

If you’re visiting from a non-WebKit browser (such as Firefox or Internet Explorer), you can also see this video and get a feel for how Touch Charts look on a mobile device.

h3{clear: both}. Get Started

To take advantage of all this graphical greatness, check out the new product page and download the beta. The download contains the full source for examples and documentation to get you started building Sencha Touch Charts.

Download Now

There are 38 responses. Add yours.

Joe Lennon

3 years ago

Really impressive. Nice work guys!

Andrea Cammarata

3 years ago

This is really amazing!
I think this was one of the features most requested by ST developers, we waited and we do not have disappointed. As usual, not only this important feature has been developed, but was developed in the best way possible. Customers will be pleased to learn this news:). Thanks Sencha Team.

gkatz

3 years ago

WOW!!!!!
wish my app needed charts smile

???( Kim, JongKwang )

3 years ago

??~ Canvas ?? ???? ???? ??? ????.
?? ???? Sencha ? ?????? ?????.

Sencha Touch 2.0 Preview ? ? ??? ?????, ? ? ?? Ext.JS ? ???? ?? ?? ??? ???.
?????.

Thank you for Sencha.

JongKwang

3 years ago

Huks…;;

Wow… Great using HTML5-Canvas. and some graphic support by hardware accelerated.

Thank you Sencha.

P.S. my Korean text is broken..

PlayBook Tester

3 years ago

A welcome addition to the family, but some of the performance issues of ST need to be addressed asap. The slide effect in the World data example run at 1-2fps when cards include charts.

Jamie Avins

3 years ago

@PlayBook Tester Performance is the number one goal for our next major release of Sencha Touch.

PlayBook Tester

3 years ago

I’m glad to hear it smile. I’m dying to use transitions in my apps smile

Steven Roussey

3 years ago

Looks great! I guess canvas is always faster on a phone? Even iPhone 4? On Retina display, the text looks kinda blocky. The graphics do to a little, but not nearly as noticeable. Either way, it still rocks to have such charts on a mobile web page! Awesome going guys!

Eugene

3 years ago

Okay, now this IS pretty impressive, I must say.

Eugene

3 years ago

@Jamie Avins, which is when?

Les

3 years ago

I saw the video and it’s very cool smile

Will I be able to create draggable sprites using this addon?

I know sprite dragging doesn’t quite work in the current Ext.draw (IE is a problem).

Thx

PlayBook Tester

3 years ago

@Eugene - I wouldn’t hold my breath as we’ll see a patched 1.x release first, so it will probably be months before ST hits 2.0. My 8-ball told me September wink

Jamie Avins

3 years ago

@Eugene That would be telling…

Jamie Avins

3 years ago

@Steven Roussey We haven’t done the retina tricks yet to force it to be high resolution.  I’m a bit worried on how it will perform, but we’ll see how it goes.

Steven Roussey

3 years ago

@Jamie I’m afraid rentina will be slow… but wonder if the graphics could be in canvas and the text in SVG. I’m sure someone that knows the code (like you) is cringing right now… wink

Thomas Alexander

3 years ago

Looks awesome. smile

Swarnendu De

3 years ago

Awesome work Sencha Team. I was so eagerly waiting for the TouchCharts. Hope to see more transitions and varieties. Is the API documentation available for it?

Arjen

3 years ago

Another nice step forward!

Aditya Bansod Sencha Employee

3 years ago

@Swarnendu—yes, the docs are available inside the download.

Rafael Roman

3 years ago

Glad to hear that….it looks promising!
I hope it’s gonna get better in terms of performance on the oficial release…

on iOS is just great, on android devices is somehow slow…

Jamie Avins

3 years ago

@Rafael Roman Which Android devices are you testing?

Alex Moore

3 years ago

I found the charts to be very unresponsive on a newly installed IPad 1 (4.3.3) with no other applications running apart from safari.  Has anyone else experienced this? 

The responsiveness is slow when adjusting the data range of the axis and scrolling left and right.  Also with the demo, changing between line and area took a long time.

bigfish

3 years ago

I know touch is targeting touch devices ,but can Sencha Touch response the mouse scroll event as Mac OS Lion does?

Rafael Roman

3 years ago

in one of the fastest..

Nexus One

and also tried on Motorola droid/milestone and it’s just horrible in terms of performance.

Joeri Wauters

3 years ago

Works fine when the chart is used in an panel that isnt visibel on startup. (smooth etc)
But when the chart is in a panel that is visible on startup (init drawing?)
My console returns me: “Out of Memory”, ...

Thats to bad ... :/

Jamie Avins

3 years ago

@Joeri Wauters Do you have a specific example of that?

Jamie Avins

3 years ago

@Rafael Roman We continue doing what we can, Android has a couple of issues we’re dealing with, opacity seems to really kill it’s performance so some examples that use it are really suffering.  Another is the crazy amount of events it fires, which we have to deal with in Sencha Touch itself better.

Rafael Roman

3 years ago

@Jamie

Indeed that’s true I’m also developing webapplications for android, and in terms of events it’s a mess.

iOS is better in that particular case, but that memory issue related to javascript in a webview is also not good.

Anyway, I’m happy to hear that you guys are focused on creating the best you can, hope to hear news from sencha charts soon!

Thank you

Maximilien

3 years ago

Nice work guys! It’s really impressive smile

Joeri Wauters

3 years ago

@Jamie Avins, I have check the code multiple times, but don’t really find a “snap” in it. Should be almost identical to what the Api docs give as example code ( In the project where I’m testing charts in ).

If an example would be usefull,.. I can extract the chart-page to new project and put it online ?

Jamie Avins Sencha Employee

3 years ago

@Joeri Wauters You can post code in the Touch Charts Beta forum (http://www.sencha.com/forum/forumdisplay.php?85-Touch-Charts-Beta).  Easier to keep a conversation going there as well.

mike

3 years ago

Really need to be able to dock items on the bottom of a chart panel, also the ability to hide the title bar.  See what I’ve put together here: http://michaelclagett.com/jonathanscard

KurlyD

3 years ago

This might sound stupid but with what kind of software do you make that app with?

Norman

3 years ago

I have a need to create a chart with 2 parameters and time in the X-axis. This can be done with extJS as I can see an example there but I can’t find an example of it with the Sencha Touch Charts. Can it be done too or can I integrate extJS 4 with Sencha Touch? To better explain the type of chart I need imagine a chart with vertical bars and also a linear chart, both combined within the same chart. One will display sales and the other will display units sold and time will be in the x-axis.

linkkei

3 years ago

Even iPhone 4? On Retina display, the text looks kinda blocky. The graphics do to a little, but not nearly as noticeable. iOS is just great, on android devices is somehow slow…
See what: http://agregadordelink.in

jonny

3 years ago

Nice work guys!

Norman

3 years ago

2 weeks and no answer from the Sencha team.what kind of support is this?

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.