Accessibility

Mobile and Devices Developer Center

 

Mobile charting with Flash Lite 2


Peter Baird

Peter Baird

Adobe Consulting

Clive Whitear

Clive Whitear

Adobe Consulting

Table of Contents

Created:
10 July 2006
User Level:
All

We are becoming more and more connected with the proliferation of mobile devices and their increasing capabilities. With the first mobile phones we were connected to our friends and families by voice, and then by text and media via SMS/MMS, and then to our e-mail communications with popular mobile devices such as the BlackBerry and the Treo. Now the final frontier of data connectivity is becoming a reality. We can access stock quotes, weather forecasts, movie times, and all sorts of data from our mobile devices.

Still, many providers charge you for the amount of data you download to your device. Connection speeds for data on a mobile device, while improving, are therefore still an important consideration for many customers.

Flash Lite 2 for mobile devices provides you with some interesting opportunities. Not only can you access data, but you can interpret the data that's brought down to the device—specifically through charting in this case.

Why chart on a mobile device? There are any number of reasons. One example is shown in the Flash Lite Stocks application. Getting today's stock quotes are one thing but comparing trends for that stock over various periods of time is much more valuable. Other intriguing uses for charts on a mobile device are really only limited to your imagination.

The bigger question remains: Why chart on a mobile device? That is, why use the mobile device to render the chart rather than downloading a chart image that was rendered on the server? Consider the following scenario using the same Flash Lite Stocks application. A single image for one of those charts, in PNG format with the same colors and style, is 16K. Now consider that you've got four different charts in that application, and you're up to a 64K download to render the charts. It's not a huge deal in the web browser world but it's significant for a mobile device. By contrast, the Flash Lite Stocks application downloads a 3K stream of data, from which the application then draws all four charts. Because you now have all the information in raw data form, you can do so much more with it on the device, such as using dataTips to indicate what the value at a certain point is, calculating the date to find averages, highs, lows, and so forth.

Charting Components for Flash Lite 2 is a set of freely available components for creating charts optimized for a mobile device running Flash Lite 2. In this article we will explore these components, including importing data, displaying the data, and styling these charts.

Requirements

To complete this tutorial, you will need to install the following software and files:

Adobe Flash Lite 2

Buy

Adobe Flash Lite 2 Update for Flash Professional 8

Download

Flash Professional 8

Flash Lite 2.0 enabled device with a data plan

Charting Components for Flash Lite 2:

Installing Charting Components for Flash Lite 2

Adobe Consulting has done the heavy lifting for you and created Flash Lite 2 Charting Components. To get started, you'll need to do the following:

  1. Download the charting components.
  2. Place all the files in your project folder. (Included with the component files are some sample FLA files, which you can use to get an idea of what properties are available.)
  3. Create a new Flash document (or use an existing one).
  4. Make sure your classpath is set to recognize the files. To do this, select Edit > Preferences > ActionScript > ActionScript 2.0 Settings and click + in the ActionScript 2.0 Settings dialog box. Enter a new classpath. To allow all files, use a single period as your classpath.
  5. For the Pie Chart component, you should be good to go. For the line and bar charts, you've got one more step—and that is to import the classes. On the first frame of your FLA (or the frame where you want the classes imported) enter either import com.adobe.charts.lineChart; or import com.adobe.charts.barChart; depending on which chart you'd like to use.

About the authors

Peter Baird and Clive Whitear are both senior user-experience consultants with the rapidly growing Adobe Consulting group. Adobe Consulting works with strategic partners in designing and developing compelling Rich Internet Applications, Mobile Experiences, and Intelligent Forms that adhere to best practices.

As a user-experience consultant, Peter Baird has been involved in all stages of design and development in several large-scale Flex applications, and is also responsible for the popular Flex Style Explorer. Prior to joining Adobe, Peter was a freelance web and Rich Internet Application designer and developer, and holds a Master of Arts in Interactive Digital Media from Ravensbourne College of Design and Communications, University of Sussex, in London, UK, a Post Graduate Certificate in Graphic Design from Massachusetts College of Art, and a Bachelor of Arts from Boston University.

Prior to joining Adobe, Clive Whitear worked for Mobile Innovation, Symbian and Psion Software designing and prototyping mobile applications and services. Before working in the mobile field, Clive worked for Philips Business Communications in The Netherlands as a technical author/trainer. Clive holds an HND from Lanchester Polytechnic, Coventry, UK.