LineChart with CheckBox Legend (Filter Series)

The following example shows a LineChart with a custom Legend that has CheckBoxes next to each LegendItem which allows you to filter the Chart to only show certain series (in this case lines).

I've created a custom class called CheckBoxLegend which extends Legend. It sets the legendItemClass to be the flex.utils.ui.charts.CheckBoxLegendItem class which extends the default LegendItem to add the CheckBox on the left side of the legend item.

Clicking on the legend item toggles the CheckBox and updates the Chart to show or hide the corresponding series. The series is hidden by setting the alpha value to 0.

Here is a snippet of how you use it in MXML:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:charts="flex.utils.ui.charts.*">

<mx:LineChart id="linechart" ... />
<charts:CheckBoxLegend dataProvider="{linechart}"
    color="#000000" direction="horizontal"/>

</mx:Application>

Here is the example, right click to view source:


Note that the minimum and maximum values of the vertical axis don't get updated when you uncheck one or more series. The Axis calculates these values but doesn't take into account the visibility of the Series. So I've added a new Update Vertical Axis Min/Max CheckBox that will go through all the y axis number values and calculate the minimum and maximum values for the visible series. I haven't tested this out on complicated datasets or different chart types, but hopefully it will be a good starting point.

Originally I played around with actually removing the series from the chart (instead of hiding it), but that caused more problems because when you remove a series the chart will automatically re-color any of the remaining series (unless you specified the stroke/color/fill styles) and the legend gets re-populated without the unchecked series. So it was easiest to just hide the series.

Elevation Map using USGS and Yahoo Maps

** January 2012 Update
Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)

This example combines two different services:

Flex Yahoo Maps - shows an interactive map component similar to Google Maps (Flex 3).

USGS Elevation Service - gets the elevation at a given Latitude and Longitude.

The Flex application below has the Yahoo Maps component on top and an AreaChart below which will show the elevation.
Click on the map to add a marker. When you click again in a different location another marker is added, and the elevation chart at the bottom will show the elevation profile for the two points. If you want a more fine-grained elevation profile you can use the drop-down menu above the elevation chart to adjust how frequently the elevation is looked up (every KM, every 500m, every 200m). Keep in mind that the more elevations you look up the slower it is.

You can also search for an address too using the search bar. The elevation at the search location will be displayed in the toolbar to the right of the search button. You can also show kilometer markers as well by checking the Show KM Markers checkbox in the top toolbar.

Feel free to use this code for your own purposes. All you have to do is sign up for a Yahoo Maps key here:
https://developer.apps.yahoo.com/wsregapp/
And then edit the ElevationMapFunctions.as file and put your key in the APPID constant.
Here is the Yahoo Maps API.

There are also a few custom markers included in the source code that you can use and/or modify for your own needs.

Use the mouse scroll wheel to zoom in or out (or use the +/- control on the map).

This is a very simple example and a lot more could be done with it. It's really just to show how to get elevation data from the USGS Web Service, and how to add markers to a Yahoo Map.


** November 2009 Update
I've updated the example to include another custom marker - the TitleMarker. This marker shows a label on the marker when it is collapsed. I've also added the option of Showing KM Markers which are displayed as TitleMarkers.
I also separated the Elevation code into separate packages, and added some operations to allow querying for multiple elevations in sequence. When an elevation is returned from the USGS web service it is cached in the ElevationService class to speed things up.

** January 2010 Update
I've restricted the number of elevations that can be looked up at one time to 30. This is to prevent someone trying to lookup the elevation every 200m between Canada and Europe. If you download the source code, and get your own yahoo maps application id then you can do what you like!

** January 2012 Update
Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)

Helper Classes in ActionScript

I've had a few people ask me recently if you can have multiple classes defined in the same file in ActionScript. This is something that Java developers are probably very familiar with.

Well the answer is yes, you can. They are called Helper Classes, but they are defined a little bit differently from how you might expect, and from how it is done in Java.

Here's a simple example of a helper class:

package helper {     public class MainClass     {         public function MainClass() {             var helperCls:HelperClass1 = new HelperClass1();         }     } }      import mx.controls.TextInput; class HelperClass1 extends TextInput  {     public function HelperClass1() {     } }

Notice that the helper class is defined outside of the package wrapper. And yes, multiple helper classes are allowed in the same file. One thing that surprised me was how the helper class has its own separate section for imports that are also outside of the package block.

Note that helper classes are only available to the main class, and cannot be accessed outside of that file. Even a subclass can't use helper classes belonging to its superclass.

Here is another website which has some more information on this topic:
Class syntax in ActionScript 3.0.

Image Splitter in AIR

I haven't played with Adobe AIR much, and thought I'd give it a try. I have a whole bunch of sprites - images that contain many different smaller images all side by side - that I wanted to split up into separate images. So I decided to use Adobe AIR to solve this simple problem. The WindowedApplication lets you choose an input image file and an output directory. The image is loaded into the window and then you can choose the column width and row height for how you want to split the image up. Alternatively you can specify the number of rows and columns. This will draw a gray grid on top of the input image showing you how the image will be split up. Click on the images on the right side of the page to see the full size image. The top screenshot shows the input image being split into 6 columns and 4 rows. The middle screenshot shows how the background color can be made transparent. And the bottom example shows the output images. You can also choose between using the JPEGEncoder or the PNGEncoder (PNG supports transparency). If you choose PNG then you can also optionally choose a color that you want to make transparent (e.g. the background color). You can click on the input image to choose the color you want transparent, or you can use the ColorPicker. There is a filename prefix textbox too for choosing how you want the output files named. After the prefix a number will be appended (e.g. mario1.png, mario2.png) for each output image. Output images will not overwrite existing images unless you check the Overwrite checkbox. Feel free to modify for you own use. Because it's an AIR application I've only attached screenshots. - DOWNLOAD SOURCE ZIP FILE - - VIEW SOURCE -

Input Image Transparent background Output Images

Tour de Flex and Flex Component Explorer

If you haven't already seen this awesome Flex website then check it out.

Tour de Flex

It has examples (including source code) of all the common Flex 3 components (DataGrid, Tree, Button, Canvas, etc) as well as a TON of other examples (269 at the last count) from various open source projects including Flex Yahoo Maps, advanced Data Visualizations (3D charts, gantt charts, calendar views, etc), Cloud APIs (searching Amazon, eBay, Flickr, etc) and much more.

There is also the original Adobe Flex 3 Component Explorer which contains examples of just the core Flex 3 components.

For examples on styling components check out the Flex 3 Style Explorer site. I also find this list of all the styles for each Flex component useful: Flex 3.0 CSS Properties List.