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

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/