Channels ▼


Touch, Pan, and Pinch Functions for Interactive Data Developers

Sencha has announced the 1.0 release of Sencha Touch Charts, a data-focused add-on to its Sencha Touch tool for building web apps for mobile devices. The new release aims to provide developers with a method for integrating touch, pan, pinch, and explore functionality into new application builds.

Designed for use with complex datasets, Sencha Touch Charts is positioned as a means to "explore data in a fun and exhilarating way". Sencha insists that until now, this level of data interaction has only been possible with native technologies, so delivering this functionality within a mobile browser via HTML5 is an industry first.

Sencha Touch Charts will be of use for web apps that present business, financial, and scientific data, as simple gestures can be used to control data exploration. For example, a swipe will pan across a dataset, whereas a "reverse pinch" will zoom into detail. Interactions such as axis swaps, aggregation, filtering, and more are all enabled by similar gestures.

Sencha Touch Charts uses HTML5 Canvas technology, which is fully supported by the latest WebKit browsers that ship with Android, Apple iOS, BlackBerry OS6, and HP WebOS.

According to Sencha, "We launched the beta last month and we've received an overwhelming amount of positive feedback as people have explored Touch Charts and seen what's possible on the mobile web. With the help of the Sencha community we've been hard at work improving and adding to Touch Charts in a number of ways."

New enhancements include a default zoom and the ability to rotate the "pie" series of charts — an addition that has been reflected in the "radar" series of charts as well. Pie labels will now be hidden if they do not fit within a pie slice and pie charts can now use callouts to display labels.

"While the markers on the charts were great as labels, we had a request to allow images to be used. Based on that, we've added a new 'image' marker, which allows any image to be used as a chart marker," said Sencha on its developer blog web pages.

Sencha has also ramped up documentation and will now provide the SASS Styling Guide to help developers get started styling their charts. The company has also been fixing bugs since its first beta, ensuring corner-cases are handled as well as making performance better across all supported devices.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.