Sencha has launched Sencha Touch Charts, a beta version of a set of rich, interactive charting components built with HTML5 and optimized for mobile devices. Part of the Sencha Touch offering, this library enables developers to build interactive radar, bar, line, stacked, and pie charts that are optimized for Apple iOS, Android and BlackBerry devices.
Sencha Touch Charts utilize hardware acceleration on mobile devices for optimized performance and also support natural gestures making complex dataset visualization easier. These gestures include pinch-to-zoom, swipe-to-pan across data, and tap for deep dives.
The library uses HTML5 capabilities like the <canvas> element for drawing and CSS3 for styling, delivering a rich experience in today’s mobile web browsers. It’s built on top Sencha Touch, which is a mobile web app framework and is currently available as a free add-on for evaluation purposes.
In Sencha Touch Charts, the definition of the component and its interactions is made with JavaScript:
var chartPanel = new Ext.chart.Panel({
title: 'Pie Chart',
fullscreen: true,
dockedItems: [...],
items: {
cls: 'pie1',
theme: 'Demo',
store: store1,
shadow: false,
animate: true,
insetPadding: 20,
legend: {
position: {
portrait: 'bottom',
landscape: 'left'
}
},
interactions: [
{
type: 'reset',
confirm: true
},
{
type: 'rotate'
},
{
type: 'iteminfo',
gesture: 'taphold',
listeners: {...}
},
{
type: 'piegrouping',
//snapWhileDragging: true,
onSelectionChange: function(me, items) {
...
}
}
],
series: [...]
}
});
Styling is done with SASS/SCSS which compiles to CSS3:
...
chart[cls=piecombo1] {
padding: 20;
series {
label {
display: rotate;
contrast: true;
font: 14px Arial;
}
}
}
...
During the beta period there are a few issues to be resolved and changes that might happen:
- The Radar Axis does not currently display properly on BlackBerry
- Zooming too far into a chart on an iPad causes a display issue
- Default gestures for interactions are still under review and may change before release
- SASS syntax is still under review and may change before release
- and more
InfoQ has contacted a representative from Sencha to get more details about this new product:
InfoQ: You mentioned that in order to improve performance you had to implemented an HTML5 Canvas engine in the core drawing system. Would you like to give us a little more [technical] details about that?
Sencha: There are a few choices of drawing technologies available in an HTML5 browser, namely SVG and Canvas. We chose Canvas for mobile for two main reasons. First, SVG isn't supported on Android before Honeycomb. So, in order to support the millions of Android 2.x devices in the market, we couldn't use SVG. Second, Canvas has the best generalized performance across all the mobile devices (phones and tablets) based on our tests for drawing.
InfoQ: What is the connection between Sencha Touch Charts and the rest of your portfolio, like Sencha Touch or Ext JS 4?
Sencha: Sencha Touch Charts is a paid add-on to the free Sencha Touch. Sencha Touch is our mobile HTML5 framework, whereas Ext JS is our desktop framework. We've not yet announced a price - stay tuned!
InfoQ: A few years ago even simple cross-browser charts were not possible for the desktop. What HTML5 technologies have you found most helpful in this project?
Sencha: The biggest leap forward for charting and data visualization in general has been the improvement in the drawing systems within browsers. Traditionally, browsers have been good at text and laying out documents but with Canvas, SVG (and soon WebGL), the browser now has capabilities that one would formerly have had to rely on Flash or Silverlight. Since the browsers have these capabilities embedded, you can now rely on them instead of a plug-in.
InfoQ: What were the main challenges you had working with mobile browsers like mobile WebKit, compared with desktop browsers?
Sencha: Our biggest challenge working in mobile, as any mobile developer would tell you, is performance. We classify performance on two axes: first, the raw compute / CPU power. We do a lot of work to ensure that we don't overburden the CPU so that our charts can be as responsive as possible. Second, memory. Mobile devices have a limited amount of RAM, so again we do a lot of tinkering to ensure we play nice within the amount of memory the devices have.
InfoQ: What made you choose SASS syntax for styling over the SCSS syntax or plain CSS3?
Sencha: Sass and SCSS are the same. SCSS is simply the name of the new syntax in Sass v3. We use it over vanilla CSS3 since it adds a lot of meta-programming-like functionality to CSS. For example you can say your buttons are 20% lighter than your background color and use variables and functions to drive the entire styling of your app — rather than having to do it all by hand.
InfoQ: What about cross-browser interactive charting components?
Sencha: Touch Charts are interactive today across a variety of mobile browser platforms. You can pinch to zoom, pan, swipe, etc. across datasets of many different mobile OSs to explore data.
InfoQ: Since this is still in beta, when are you planning for the first actual release?
Sencha: The first release (v1) will happen within the month.
You can find more information on Sencha Touch, Mobile and ExtJS, right here on InfoQ!