Axiis is an advanced data visualization framework built on top of Degrafa. And when I say advanced, I mean really advanced. I found my way to Axiis because I wanted the maximum amount of visual control that I could get. Axiis is designed to support any kind of visualization you could possibly imagine, but I don’t really care about that part of the framework. Instead, I just want to take your average boring graph and make it way cool.
Lately, I’ve been working on a project at work that places a real premium on cool. This post has nothing to do with that project, of course. It’s all about the quest for cool and my personal journey with Axiis.
Simple Ass Column Chart
In the beginning, I had a simple data set and just wanted create a basic column chart. I tried to follow the Intro and Tutorial, but I must admit I got a little lost the first time through. Hopefully, this will be an even easier introduction to the Axiis framework.
Here is our data in MXML:
<mx:XML id="myXML"> <columns> <col label="A" val="10" /> <col label="B" val="9" /> <col label="C" val="7" /> <col label="D" val="5.5" /> <col label="E" val="6" /> <col label="F" val="3" /> <col label="G" val="4" /> <col label="H" val="2.5" /> </columns> </mx:XML>
We want to render this data to the screen as a bunch of columns (aka RegularRectangle
s). So, the next thing that we need to do is process our data and feed it into an Axiis Layout
. A Layout
is the main element in any Axiis chart; it takes incoming data and renders it to the display.
Here we process our data and set our Layout
‘s dataProvider
:
private function complete():void { var ds:DataSet = new DataSet(); ds.processXmlString(myXML.toXMLString()); myLayout.dataProvider = ds.data.object.columns.col; dc.invalidateDisplayList(); }
And here is the basic shell of our entire application:
<?xml version="1.0" encoding="utf-8"?> <mx:Application ...> ... <axiis:LinearScale id="vScale" /> <axiis:DataCanvas id="dc"> <axiis:layouts> <axiis:BaseLayout id="myLayout"> <axiis:drawingGeometries> <degrafa:RegularRectangle id="myBar"... /> <degrafa:RasterText id="myBarLabel" ... /> </axiis:drawingGeometries> <axiis:referenceRepeater> <axiis:GeometryRepeater> <axiis:geometry> <degrafa:RegularRectangle ... /> </axiis:geometry> <axiis:modifiers> <axiis:PropertyModifier ... /> </axiis:modifiers> </axiis:GeometryRepeater> </axiis:referenceRepeater> </axiis:BaseLayout> </axiis:layouts> <axiis:backgroundGeometries> <axiis:VAxis ... /> </axiis:backgroundGeometries> </axiis:DataCanvas> </mx:Application>
Stepping through the code element by element, we see:
- LinearScale – We use a
LinearScale
to convert from data values to screen values (aka pixels). So a data value of 5.5 might translate into 11 pixels, 42 pixels, or 55 pixels depending on the scale. - DataCanvas – The
DataCanvas
contains all Axiis graph elements. This is analogous to Flex 4′sGraphic
container for FXG elements, and Degrafa’sSurface
container for drawing elements. - Layout –
BaseLayout
is the parent of all layouts and the most flexible. - drawingGeometries – We draw each column as a
RegularRectangle
and each label as aRasterText
. Positioning and sizing is guided by the reference geometry created by thereferenceRepeater
. Column height is computed using the current value of the data from theLayout
converted to screen coordinates by theLinearScale
. - referenceRepeater – The reference geometry and repeated property combine to create a visualization for the data. So, repeating rectangles horizontally gives a column chart, repeating rectangles vertically gives a bar chart, repeating line segments horizontally given a line chart, etc.
- VAxis – Draw a vertical axis underneath our graph layer by using the
backgroundGeometries
layer of theDataCanvas
. I like to use a negative x value to shift the axis left to get it out from underneath the chart (and compensate by shifting the entireDataCanvas
right with a positive x value).
That’s it for the high-level stuff, the dirty little details are in the code. A little trial-and-error went a long way to teach me what the hell each of the various parameters actually did. The Intro and Tutorial article does a good job covering some of the details and tricks like the vertical flip trick, and I also recommend Tom’s session from AdobeMAX.
User Interaction Coolness
Last, we’ll add a little dash of coolness to our application with a simple rollover effect on our columns. Using an Axiis State
, we modify a few properties of our drawingGeometries
on the mouseOver
event to create a rollover effect.
The State
code:
<axiis:BaseLayout id="myLayout" ...> ... <axiis:states> <axiis:State enterStateEvent="mouseOver" exitStateEvent="mouseOut" targets="{[barFill,barStroke,myBarLabel]}" properties="{['alpha','weight','fontWeight']}" values="{[1,2,'bold']}"/> </axiis:states> </axiis:BaseLayout>
Cool Colors
Using Degrafa geometry to build our chart gives us total control of the shape and design, but if we really want something cool, we need to use color. For our column chart, we’ll use an Axiis LayoutAutoPalette
element to create a smooth color gradient for each bar.
Here is the code:
<axiis:LayoutAutoPalette id="myPalette" layout="{myLayout}" colorFrom="0xFF99FF" colorTo="0x6699FF"/> <degrafa:SolidFill id="barFill" color="{myPalette.currentColor}" />
The LayoutAutoPalette
interpolates from a starting color to an ending color for each data value in the Layout
. We then feed the palette’s current color into a standard Degrafa SolidFill
. Lastly, the fill is applied to the RegularRectangle
in the drawingGeometries
section of our Layout
to create a pretty gradient of bars from left to right. Note that color is not proportional to the data value, but Axiis certainly provides the functionality to make a column chart with bars colored by height.
The Result
Here it is, rollover effect and all (view source enabled):
Michael
1.7.2011
I still don’t get it. I am new to flex/axiis and I am using Eclipse, but I can’t compile the program. I don’t know how to compile the mxml code. What is needed, etc.
You are right, the tutorials are cryptic. Thanks for this page.
yury euceda
9.26.2012
Hello!
You mention above that it’s possible to assign colors according to the height of the columns. What i need is to assign color according a range of values, for example: if value of column is less than 40 then color must be red, if value of column is between 41 and 60 a orange color and at the end if value of column is greater than 60 then the color must be green. I do need some help, do u know how to achieve this?