Custom grids and axes in flare

As I mentioned in my last post, I have begun a project using the Flare Data Visualization Toolkit, and I intend to document things I learn along the way. one of the first things I investigated, after familiarizing myself with the basics was how customizable the grids and axes for visualizations cocould be. it took me longer than I expected to figure things out, but now that I have I wocould say the grids and axes in flare are highly customizable, and shoshould be capable of accommodating just about any needs you may have.

This post is mostly code and images, but in case you want to jump around here is a table of contents.

• Background info
• Base code and a basic grid
  

  Controlling grid Bounds

• Customizing grids and axes
• Useful methods

Background info

Before we dive in to the examples, I need to cover a tiny bit of background information and establish some constants we'll be using. first, all of the examples will be using this simple Data source:

[As]
// Source data
Private var arr: array = [
{X: 2, Y: 2 },
{X: 4, Y: 4 },
{X: 6, Y: 6}
];
[/As]

As you can see, its just an array containing 3 elements who each haveXAndYProperty. next, we'll look at a bare bones plot chart built with flare. the following is essential the bare minimum of code required to create a visualization in flare. the default visualization is a plot chart using circular shape renderers, which is fine for our purposes here. we'll be using this code as a basis for the code added/demonstrated through the rest of the post, but I won't be repeating it all every time. lastly, remember that flare visualizations are really just sprites, which means they cannot be added directly to flex containers, only to displayobjectcontainers, which is also sprite's super class. uicomponent, and therefore most every flex component, are in fact descendants of Sprite, meaning you can add sprites to uicomponents. for more information on Flash Player's core display classes, see this page.

Base code and a basic grid

[As]
// Visualization (flare's core element)
// Use flare's data class to convert
// Our array into a format it can use
Vis = new visualization (data. fromarray (ARR ));

// Fill the uicomponent that will be our parent
// This is a flex app, So assume UIC looks like this
//
VIS. bounds = new rectangle (0, 0, UIC. Width, UIC. Height );

// Create an axis layout (Cartesian chart)
// Instruct the layout/grid to use the X and Y Properties
// Of our data elements for plotid
VaR axislayout: axislayout = new axislayout ("data. X", "data. Y ");
// Add it to the Visualization's operators collection
// (Operators will be discussed in a future post)
VIS. Operators. Add (axislayout );

// Update the VIS
// (Make it process and apply any pending changes)
VIS. Update ();

// Add it to the display list as a child of our uicomponent
UIC. addchild (VIS );
[/As]

This code produces the following visualization:

As you can see, the grid bounds are dynamically created based on the data being shown. This wocould be very convenient if that is what we wanted, but in my case it was not.

Controlling grid Bounds

 

If we 'd like the chart's minimum values to always be zero, we can useZerobasedProperty ofXScaleAnd/orYscaleProperties of ourAxislayout. The following code will cause both the X and Y axis to begin at zero.

[As]
Axislayout. XScale. zerobased = true;
Axislayout. yscale. zerobased = true;
[/As]

To control the maximum values of our chart we can usePreferredmaxProperty.

[As]
Axislayout. XScale. preferredmax = 10;
Axislayout. yscale. preferredmax = 10;
[/As]

Note that there isPreferredminProperty as well, but it (Oddly) is ignored when set to zero. you can use it to set the lower bounds of your axes to any value other than zero. adding the two snippets above has specified that our chart axes shoshould begin at zero and end at 10, regardless of the data being shown. the resulting chart looks like this:

Customizing grids and axes

To really start customizing your chart, you'll want to useXyaxesProperty of flare's visualization class.XyaxesIs of Type cartesianaxes and contains several convenient properties, as well as providing accessXaxisAndYaxisProperties that represent exactly what their names say, and are both of Type Axis.

Maybe you want to eliminate the default grid pattern in favor of a simple bottom and left border.

[As]
// Define tively only hides top and right borders
VIS. xyaxes. showborder = false;
// Show Bottom Border
VIS. xyaxes. showxline = true;
// Show left border
VIS. xyaxes. showyline = true;
// Hide vertical grid lines (along X axis)
VIS. xyaxes. xaxis. showlines = false;
// Hide horizontal grid lines (along Y axis)
VIS. xyaxes. yaxis. showlines = false;
[/As]

TheXaxisAndYaxisElements also provide some useful properties that we can use to further customize our chart.

[As]
VIS. xyaxes. showborder = false;
VIS. xyaxes. showxline = true;
VIS. xyaxes. showyline = true;

// Distance beyond left edge of Axis
VIS. xyaxes. yaxis. linecapx1 = 20;
// Distance beyond right edge of Axis
VIS. xyaxes. yaxis. linecapx2 =-(VIS. xyaxes. layoutbounds. width );
// Distance to move labels
VIS. xyaxes. yaxis. labeloffsetx =-25;

// Distance beyond bottom edge of Axis
VIS. xyaxes. xaxis. linecapy1 = 15;
// Distance beyond top edge of Axis
VIS. xyaxes. xaxis. linecapy2 =-(VIS. xyaxes. layoutbounds. Height );
// Distance to move labels
VIS. xyaxes. xaxis. labeloffsety = 20;
[/As]

This code produces the following chart:

Useful methods

There is alsoAxisscaleProperty on the axis class (ourXaxisAndYaxisElements). axisscale is typed as scale, but will be usually be a scalebinding instance as scale is essential an abstract class. Scale (or rather its subclasses) provide two very useful methods,Interpolate (value: Object): NumberAndLookup (F: Number): Object. The Interpolate Method will return a number representing where on the scale the passed in value falls. in our example where our range is 0 to 10, 5 wowould return. 5, 8 wocould return. 8, etc. the lookup method essential tially does the opposite, accepting a number and returning the corresponding value on the scale, meaning. 5 wocould return 5 in our example, 2 wocould return 20, and so on. these methods can be extremely helpful if you need to do custom drawing on your chart, and are the kind of value translation methods that seem to be missing from the flex charts.

Conclusion

This is obviusly not an exhaustive list of mizmizations possible with flare, But it hopefully gives you an idea of the kinds of things you can do out of the box. I haven't decided which topic to cover next, so if there are specific questions or features people wowould like to see let me know in the comments.