Yahoo! Flash(R) Blog

Connect the Dots: Astra Line Charts

Our recent Astra 1.2 update included a few new styles on the LineChart component. They allow you to customize how the lines are drawn between markers on the LineChart, and I thought I’d throw together a couple quick examples to demonstrate how they work and what sort of interesting things you can do with them.

Working with Discontinuous Data

With previous versions of the line charts, if you had a data provider with null or otherwise invalid points, the line ended before the invalid point and restarted at the next valid point. In 1.2 a new style was added called connectDiscontinuousPoints. When this style is set to true (the default is false, matching the old behavior), a dashed line is drawn to “connect” the points surrounding invalid data. This is best illustrated in the example below:

The following source code customizes the chart above. The chart in this example is created by simply dragging it on stage in Flash CS3.

import com.yahoo.astra.fl.charts.series.LineSeries;

var line:LineSeries = new LineSeries();
//notice that the data provider has several null values
line.dataProvider = [14, 8, null, null, 18, 6, null, 12, 24];
//we want a continuous line, so we'll connect discontinuous points with a dashed line
line.setStyle("connectDiscontinuousPoints", true);

//pass the LineSeries to the chart
chart.dataProvider = [line];

//the labels on the x-axis
chart.categoryNames = [2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008];

Notice that the LineSeries dataProvider property contains several null values. In all cases, the dashed “discontinuous” line starts at the last valid point and continues to the next valid point.

Another style, discontinuousDashLength allows us to customize the appearance of the dashed line between discontinuous points by setting the length of each dash, in pixels. This value is easy to set:

line.setStyle("discontinuousDashLength", 10);

To view the complete example FLA, please download discontinuousdata.zip.

Use a Line Chart to create a Scatter Chart

A scatter chart uses two variables to display points on a graph. One variable determines the position on the horizontal axis and the other determines the position on the vertical axis. Both axes typically represent numeric values. The LineChart component in Astra 1.2 isn’t much different. In a LineChart, each point is connected by a line, but points are not connected on a scatter chart. Additionally, the default horizontal axis on a LineChart is a CategoryAxis, but we need numeric values. By making a couple simple alterations, we can turn a standard LineChart component into a scatter chart very easily:

The following source code is used to alter the LineChart above to make it more like a scatter chart. Again, I simply dragged a LineChart component on stage rather than instantiating it in ActionScript.

import com.yahoo.astra.fl.charts.*;
import com.yahoo.astra.fl.charts.series.*;
import flash.geom.Point;

var scatter:LineSeries = new LineSeries();
//some simple Point objects will populate the series, but any type will do
scatter.dataProvider = [new Point(10, 23), new Point(24, 46), new Point(82, 19), new Point(44, 45)];
//hide the lines
scatter.setStyle("connectPoints", false);

var scatter2:LineSeries = new LineSeries();
//some simple Point objects will populate the series, but any type will do
scatter2.dataProvider = [new Point(17, 67), new Point(55, 8), new Point(31, 14), new Point(5, 2), new Point(17, 50)];
//hide the lines
scatter2.setStyle("connectPoints", false);

//the horizontal axis should be a NumericAxis instead of the default CategoryAxis
var xAxis:NumericAxis = new NumericAxis();
chart.horizontalAxis = xAxis;

//pass the data to the chart and specify the fields that should be used for each axis
chart.dataProvider = [scatter, scatter2];
chart.horizontalField = "x";
chart.verticalField = "y";

//some simple styles to create the grid
chart.setStyle("showHorizontalAxisGridLines", true);
chart.setStyle("showHorizontalAxisTicks", true);

In the source code above, I create two LineSeries objects. For each series, I set the connectPoints style to false. Each data point within the series is of type flash.geom.Point, but any object will do as long as you specify the correct values on the chart’s horizontalField and verticalField properties.

The horizontalAxis gets replaced by a new NumericAxis object rather than the default CategoryAxis. I also customize the grid lines and ticks on the horizontal axis to match those of the vertical axis to display a grid.

One thing you might notice is that the mouse-over data tip displays the vertical axis value first, but many graphs typically read with the horizontal axis value first. This can be easily corrected by using a dataTipFunction to set custom data tip text.

To view the complete example FLA, please download scatterchart.zip.

Find conversations: bloglines | technorati

Share: on Yahoo! My Web | on del.icio.us | digg it! | reddit!