« FlashLite 2.0 app: Stock Charts using the Drawing API | Main | Flex 2 Style Explorer (beta) available »

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.

flashLiteLineCharts.gif

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 February 28, 2006 07:40 PM

Comments

Ciao Peter,

really cool component!

Alessandro

Posted by: Alessandro at February 28, 2006 08:29 PM

Peter, this is fanatastic work.

I love the cross hair. Do you have any tips on how I could get the line charts to animate?

Jermaine

Posted by: Jermaine Anderson at March 1, 2006 02:00 AM

Hi,
Really nice Class. Pretty useful! Thanks for sharing.

Posted by: Luciano Ayres at March 1, 2006 07:46 PM

I don't have any tips on animating line charts, unfortunately. Theoretically as this class is written, you could continually reassign the array as it changed and have it redraw itself. ...But that would be somewhat unrealistic on a mobile device as it would be quite processor intensive. (Already there's a slight delay drawing the chart ... if you've tried the Stock App on the mobile device, you'll notice as you switch timeframes it redraws the chart, and there's a delay each time it redraws.

Posted by: Peter Baird at March 6, 2006 12:53 PM

Great stuff Peter... now we just need to attach some live data..

Posted by: Rob Toole at March 20, 2006 10:05 AM

so great!

Posted by: mill at December 7, 2006 07:32 PM

Post a comment




Remember Me?



(you may use HTML tags for style)

Powered by Movable Type