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 haveX
AndY
Property. 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 useZerobased
Property ofXScale
And/orYscale
Properties 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 usePreferredmax
Property.
[As]
Axislayout. XScale. preferredmax = 10;
Axislayout. yscale. preferredmax = 10;
[/As]
Note that there isPreferredmin
Property 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 useXyaxes
Property of flare's visualization class.Xyaxes
Is of Type cartesianaxes and contains several convenient properties, as well as providing accessXaxis
AndYaxis
Properties 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]
TheXaxis
AndYaxis
Elements 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 alsoAxisscale
Property on the axis class (ourXaxis
AndYaxis
Elements). 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): Number
AndLookup (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.