We’re excited to share with you the beta release of “Sencha Touch Charts”:/products/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.
h3. HTML5: Canvas
When we released the new drawing packing in “Ext JS 4”:/products/extjs/, 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. 
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.
h3. Animated and Interactive
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”:http://dev.sencha.com/deploy/touch-charts-beta/examples/Pie/ to spin with a drag or a pinch. On a “bar graph”:http://dev.sencha.com/deploy/touch-charts-beta/examples/Bar/ 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.
h3. Style via SASS
Much like Sencha Touch, all charts in Touch Charts are stylable 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”:http://dev.sencha.com/deploy/touch-charts-beta/examples/EnergyApp/ 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”:http://www.webkit.org/:
p{clear: both}. “(more-icon) View other examples”:http://dev.sencha.com/deploy/touch-charts-beta/examples/
If you’re visiting from a non-WebKit browser (such as Firefox or Internet Explorer), you can also “see this video”:http://vimeo.com/26651228 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”:/products/touch/charts/ and “download the beta”:/products/charts/download/. The download contains the full source for examples and documentation to get you started building Sencha Touch Charts.
p(button-group). “(button-link green small arrow inline)Download Now“:/products/touch/charts/download/
Really impressive. Nice work guys!
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.
WOW!!!!!
wish my app needed charts :)
??~ Canvas ?? ???? ???? ??? ????.
?? ???? Sencha ? ?????? ?????.
Sencha Touch 2.0 Preview ? ? ??? ?????, ? ? ?? Ext.JS ? ???? ?? ?? ??? ???.
?????.
Thank you for Sencha.
Huks…;;
Wow… Great using HTML5-Canvas. and some graphic support by hardware accelerated.
Thank you Sencha.
P.S. my Korean text is broken..
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.
@PlayBook Tester Performance is the number one goal for our next major release of Sencha Touch.
I’m glad to hear it :). I’m dying to use transitions in my apps :)
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!
Okay, now this IS pretty impressive, I must say.
@Jamie Avins, which is when?
I saw the video and it’s very cool :)
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
@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 ;)
@Eugene That would be telling…
@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.
@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… ;)
Looks awesome. :)
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?
Another nice step forward!
@Swarnendu — yes, the docs are available inside the download.
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…
@Rafael Roman Which Android devices are you testing?
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.
I know touch is targeting touch devices ,but can Sencha Touch response the mouse scroll event as Mac OS Lion does?
in one of the fastest..
Nexus One
and also tried on Motorola droid/milestone and it’s just horrible in terms of performance.
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 … :/
@Joeri Wauters Do you have a specific example of that?
@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.
@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
Nice work guys! It’s really impressive :)
@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 ?
@Joeri Wauters You can post code in the Touch Charts Beta forum (https://staging.sencha.com/forum/forumdisplay.php?85-Touch-Charts-Beta). Easier to keep a conversation going there as well.
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
This might sound stupid but with what kind of software do you make that app with?
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.
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
Nice work guys!
2 weeks and no answer from the Sencha team.what kind of support is this?