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