Sencha Inc. | HTML5 Apps

Learning Sencha Touch Charts

Published Aug 01, 2011 | Jamie Avins | Tutorial | Easy
Last Updated Mar 14, 2012

This Tutorial is most relevant to Sencha Touch, 1.x.

We’re excited to share with you the beta release of Sencha Touch Charts, a new add-on to Sencha Touch that lets you build interactive HTML5 charts in your Sencha Touch apps. When we released the new drawing packing in Ext JS 4 we heard a ton of great feedback, so we took the core drawing and charting system from Ext JS 4 and applied it to Sencha Touch, and added a whole new layer of mobile specific features.

HTML5: Canvas

When we started to think mobile for Charts, we had a few key requirements. Specifically, it had to work on all platforms Sencha Touch supported, including Android 2+, iOS, and BlackBerry OS6. Second, it had to be mobile friendly and feel native. We wanted to come as close to a native experience in HTML5 as possible.

On the desktop Ext JS 4 charts use either VML or SVG as the underlying browser drawing API. Above the raw browser API, Ext JS presents a higher level, cross platform API in the Ext.draw package. In the mobile space, VML is obviously not present (since it’s IE specific) and SVG is inconsistently available (Android didn’t provide SVG capability until 3.x). So in order to get a 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 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 had to take into consideration that mobile means two device types -- phones and tablets -- and two orientations -- portrait and landscape. Touch Charts has different layouts for the charts legend depending on device and orientation. In the case where there’s limited screen real estate, the legend is hidden under a call out so users can focus on the data. And when there’s enough screen real estate (on a tablet, for example) legends are shown in-line. In both cases, legends are fully configurable. Legend Views for Touch Charts extend from DataView so they’re full Sencha Touch components.

Sencha Touch Charts Architecture
By utilizing HTML5 Canvas on mobile devices, Sencha Touch Charts draws faster and more efficiently than its desktop counterparts.

Animated and Interactive

The best part of building on a modern browser for mobile is the ability to add gestures and interactions. The interactions are completely configurable, so on any chart you and change or modify 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. We’ve also added interaction on axes so users can explore the data.

Anybody who has experience in HTML5 know that each mobile implementation of WebKit and the browser is sightly different. One key issue that we came across when building Touch Charts is the lack of consistent multi-touch browser events in different browsers. This posed a problem when trying to pinch-to-zoom on an axis, so Touch Charts provides a compatibility mode with older HTML5 browsers that enables the user to toggle between zoom and pan modes. On more capable browsers we simply use the native touch events.

In Touch Charts, you add interactions by adding configurations to the interactions array. For example if you want to add the pan/zoom to the left axis of your bar chart, you'd write something like the following:

interactions: [{
    type: 'panzoom',
    axes: {
        left: {}
    }
}]

You can mix and match interactions where appropriate as well. For instance if you want your pie chart to use the rotate interaction and have an info panel popup on a taphold gesture:

interactions: [{
    type: 'pierotate'
}, {
    type: 'iteminfo',
    gesture: 'taphold',
    listeners: {
        show: function(interaction, item, panel) {
            var storeItem = item.storeItem;
            panel.update([
                '<ul>',
                    '<li><b>Month: </b>' + storeItem.get('name') + '</li>',
                    '<li><b>Value: </b> ' + storeItem.get('data1') + '</li>',
                '</ul>'
            ].join(''));
        }
    }
}]

From our experience, you need to be careful not to add too many interactions to a single chart or it becomes difficult to distinguish among gestures (as well as presenting a confusing array of choices for your users.)

Sencha Touch Charts, styled with SASS Sencha Touch Charts, styled with SASS Sencha Touch Charts, styled with SASS

Styled via SASS

Much like Sencha Touch, all charts in Touch Charts are stylable using SASS. Changing the look and feel of an chart, such as by adding a gradient, a shadow, fonts and colors are all controlled by variables inside the scss files included with Touch Charts. The Energy App demo that comes with Touch Charts, for example, is a great example of an application that takes advantage of SASS and is styled to a darker theme, and adds directional gradients to the line graphs. With a change in just a few variables it’s incredibly quick to style any chart in Touch Charts.

chart {
  colors:   linear-gradient(45, rgb(212, 40, 40), rgb(117, 14, 14))
            linear-gradient(45, rgb(180, 216, 42), rgb(94, 114, 13))
            linear-gradient(45, rgb(43, 221, 115), rgb(14, 117, 56))
            linear-gradient(45, rgb(45, 117, 226), rgb(14, 56, 117))
            linear-gradient(45, rgb(187, 45, 222), rgb(85, 10, 103));
 
  background: linear-gradient(45, #444, #111);
 
  series {
    stroke-width: 2;
 
    &:nth-child(1) {
      fill: linear-gradient(0, rgb(212, 40, 40), rgb(117, 14, 14));
    }
    &:nth-child(2) {
      fill: linear-gradient(0, rgb(180, 216, 42), rgb(94, 114, 13));
    }
    &:nth-child(3) {
      fill: linear-gradient(0, rgb(43, 221, 115), rgb(14, 117, 56));
    }
    &:nth-child(4) {
      fill: linear-gradient(0, rgb(45, 117, 226), rgb(14, 56, 117));
    }
    &:nth-child(5) {
      fill: linear-gradient(0, rgb(187, 45, 222), rgb(85, 10, 103));
    }
  }
 
  axis {
    stroke: #555;
    fill: #555;
 
    label {
      fill: #eee;
    }
 
    title {
      fill: #eee;
    }
  }
}

Let Us Know Your Feedback

We are quite excited by the promise of Touch Charts. We hope you will download the beta and let us have your feedback on features and performance. We are continuing to work to polish features and improve performance before we ship.

Share this post:
Leave a reply

Written by Jamie Avins
As an engineering manager at Sencha, Jamie Avins manages a wide range projects including Sencha Touch. He is an expert in a diverse range of both client and server technologies that includes 20 years of real world experience in the industry.
Follow Jamie on Twitter

12 Comments

Matthew Stephens

3 years ago

This looks amazing. Are there any demos available online? I’ll be giving it a try regardless. Thanks.

Jamie Avins Sencha Employee

3 years ago

You can get to the demos from our Touch Charts Page: http://www.sencha.com/products/touch/charts

A direct link: http://dev.sencha.com/deploy/touch-charts-beta/examples/

We should have an updated release shortly as well.

Alexa

3 years ago

I’m disappointed with many of the Sencha Touch tutorials.  Unlike traditional tutorials that actually provide a real tutorial with step-by-step instructions along with an explanation, Sencha basically presents a basic overview. 

Given the diverse backgrounds of developers, wouldn’t offering better tutorials be beneficial, especially to new developers? 

I’d expect a tutorial to follow this process:

Subject Overview

Explanation.

Instruction

Review

James Pearce Sencha Employee

3 years ago

@Alexa, thanks for the feedback. We do have further articles planned for the Touch Charts library which will certainly go into additional detail. Stay tuned!

xwei

3 years ago

it looks great, i would like to feel the demos first.

xpengfee

3 years ago

It’s very good!Try it now!

tux

3 years ago

Hi ,
    cheers to this release . no docs on how to use both sencha touch and touch charts or integration i have tested some example on safari browser…but not able to test it on iPad or iphone simulator. why so don’t know but overall looking good…

Michael Kenneth

3 years ago

Very delicious design and behind it is as professional as it looks. As a developer I see lots of oppertunities in this framework - thanks for the presentation

tux

3 years ago

I am able to run it for ios simulator ....working well….thanks again

Jamie Avins Sencha Employee

3 years ago

@tux Great to hear.

John

3 years ago

Folks,

Can you please point me at diagrams of the Sencha architecture (functional block diagrams or equivalent). I’m trying to understand sencha io sync. What functions reside server side, what client side and how does the data synchronisation work?

Any view on the best cloud platform as a service to run Sencha on?

Thanks in advance

John

arjun

2 years ago

Can we change the color or buttons in legend along with graph

Leave a comment:

Commenting is not available in this channel entry.