Question

I’m new to Flex/AS3. I’ve attached an example line chart below. I want to know if this type of graph can be created using the standard line-series chart available in Flex (Flash Builder 4.6), or whether there’s something drawn below that is non-standard and would therefore require some rather involved customization. The key features are:

1. Different line styles and colors (dashed, dot-dash, solid, thick, thin, opacity)
2. Placement of units (y-axis “seconds” and x-axis “Hz”)
3. x-axis zoom/pan control bar below graph (move knobs in and out to set x-axis min and max plotted values)
4. Log x-axis scale, linear y-axis scale
5. Data Tip (or, some call it tool tip, not shown below)
6. SI units for x- and y-axis tick labels.

My guess is that everything should be pretty standard to accomplish using Adobe’s built-in charting (with the possible exception of item 6, see below). Is that a good assumption?

I’m particularly concerned about the x- and y-axis tick labels (item 6). For example, the x-axis tick marks as a number would be:

1, 10, 100, 1000, 10000, 100000, 1000000, 10000000

but they need to be replaced with SI units, where k=1000, and M=1000000, so the corresponding marks would be (replacing the numbers above with the strings below)

"1", "10", "100", "1k", "10k", "1M", "10M"

The same goes for the y-axis, where p represents 1e-12, and n represents 1e-9.

I can create an algorithm that accepts a number and outputs a string to do the SI unit conversion. But given that, is there a way to easily manage the tick mark labels to replace the default numbers with such strings? Any comments much appreciated.

Answer 1

You’ll have to use third party code to achieve exactly what you want, especially for zoom and pan.

Different line styles and colors (dashed, dot-dash, solid, thick, thin, opacity)

Thickness, color and opacity are built-in features. Dashed lines can be implemented using this link, for instance.

Placement of units (y-axis “seconds” and x-axis “Hz”)

You can display axis label, but it won’t be at the extremity of your axis by default.

x-axis zoom/pan control bar below graph (move knobs in and out to set x-axis min and max plotted values)

Well this is the tricky part. You can in deed play with your axes’ extrema, but you’ll encounter problem with lineseries as they won’t draw a line towards a point that is outside your axis range. My advice would be to slice your dataProvider instead, but you’ll need to fully control your axis too.

Log x-axis scale, linear y-axis scale

LogAxis is part of the flex Charting framework, so no problem here.

Data Tip (or, some call it tool tip, not shown below)

As Timofei Davydik writes, datatips are highly customizable.

SI units for x- and y-axis tick labels.

Custom label function can also be used to customize the way your data are shown.

Conclusion

If I were you, I’d rather choose another technology. Flex Chart framework is a bit old now, has not been significantly updated for a while and since the Flex SDK has been “abandoned” (or given to an open-source foundation, as they say), no further update will be done. For handling large sets of data with high performance, DyGraph (which is written in JavaScript) is a good solution, in my own opinion.