May 1, 2006
Flash Lite 2.0 Styleable Bar Chart Component
Adding to our previous work, I've created styleable bar chart class for Flash Lite 2.0, with properties for bar colors, background colors, highlights, shadows, data tips, labels, chart height, chart size, chart placement, whether its horizontal or vertical, and other fun stuff. Again, all you need to do is figure out how to get the array of data onto the phone (whether it be loadVars, or whatever). Once it's on, all you need to do is assign the data to the chart class and tell the chart to draw itself.
Some of the things you can produce via styling it are as follows:
Download it here
Posted by Peter Baird at 8:58 AM | Comments (5)
April 6, 2006
Pie chart class
Inspired by Peter Baird's line chart class, here's a pie chart class in Actioncript 2.0. It's designed for FlashLite, small screen UIs, keyboard interaction. The pie chart is constructed using a data array that specifies, for each pie wedge, the size, colour and a wedge label.
The zip below contains the pie chart class and a fla showing an example of how to use attachMovie to create the chart.
It's possible to move focus around the pie wedges - the fla passes 4 way navigation events to the pie chart. The focussed wedge is withdrawn from the pie and can have a different graphical treatment applied to it - by default, the focussed wedge isn't dimmed, all other wedges are dimmed.
The example fla uses a property object to pass parameters to the pie chart when it's instantiated. The property object includes the data used to populate the chart, but also a number of other settings used to customise the look of the pie chart:
- vKeepPieCircular_boo = determines whether the pie chart is circular or whether it fills the available space by going elliptical.
- vDropShadow_boo = determines whether the pie has a drop shadow.
-vDimming_boo = determines whether non-selected wedges are dimmed, or whether all wedges are shown the same.
- vPieChartTitleAlignment_str = the title of the chart can be positioned at the top or bottom of the chart.
All the options are described in the fla, so feel free to experiment.
Posted by Clive Whitear at 7:53 AM | Comments (3)
February 28, 2006
Styleable Line Chart Component for FlashLite 2.0
Building off of the FlashLite Stock app in the previous post, I put together an actionscript class that, given an array of data, will draw a line chart. It's specifically geared towards FlashLite 2.0, in both its display on a small screen, as well as using key control rather than mouse for display of point labels.
A chart can be added to your FlashLite app with just a little code, as shown, where "myData" as an array of numbers of any length:
import com.adobe.charts.lineChart;
var myLineChart:lineChart = new lineChart();
myLineChart.chartData = myData;
myLineChart.drawChart();
... and, ta-da, you've got a chart in your app. However, you can also completely stylize the line chart, including height, width, x position, y position, all sorts of colors and alpha values, line thicknesses, as well as the ability to choose whether or not to show labels, toolTips (point values that can be navigated with the left and right keys), and crosshairs (also navigable with the left and right keys). Setting those values results in different charts as shown below.
I'm including a sample fla that uses the class, and shows all the available style properties that can be customized.
Click here to download the .as class, along with a sample .fla
Posted by Peter Baird at 7:40 PM | Comments (6)
January 26, 2006
FlashLite 2.0 app: Stock Charts using the Drawing API
FlashLite 2.0 offers quite a bit in terms of better mobile application development. Trying out the new features, I've created the following application which provides stock quotes for any stock the user enters and charts the historic prices of that stock, which you're free to download and try out either on your PC or your FlashLite 2.0 enabled phone. Some of the great things about FlashLite 2.0 that I appreciated include the following:
- Speed of development: Being able to use ActionScript 2.0 for this project cut my development time to being able to complete this in under 10 hours.
- Drawing API: I love the drawing API and it's great to use it in mobile development. Particularly in this app, I'm able to download under 3K of data points in order to plot charts over the past year, 6 months, 3 months, and 5 days with great speed. The screenshot to right itself is over 16K (larger than the actual app). Image what four separate charts as images would be in size.
- UI Expressiveness: Although it's not a uniquely FlashLite 2.0 thing over FlashLite 1.1, nothing beats Flash for great expressiveness and great UIs.
So, without further ado, to download the swf, which will run on both your PC or your FlashLite 2.0 enabled mobile device ... CLICK HERE.
Posted by Peter Baird at 11:55 AM | Comments (9)