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

6 Responses to Styleable Line Chart Component for FlashLite 2.0

  1. Alessandro says:

    Ciao Peter,

    really cool component!

    Alessandro

  2. 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

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

  4. Peter Baird says:

    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.

  5. Rob Toole says:

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