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 RegularRectangles). 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:

1. 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.
2. DataCanvas – The DataCanvas contains all Axiis graph elements. This is analogous to Flex 4’s Graphic container for FXG elements, and Degrafa’s Surface container for drawing elements.
3. Layout – BaseLayout is the parent of all layouts and the most flexible.
4. drawingGeometries – We draw each column as a RegularRectangle and each label as a RasterText. Positioning and sizing is guided by the reference geometry created by the referenceRepeater. Column height is computed using the current value of the data from the Layout converted to screen coordinates by the LinearScale.
5. 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.
6. VAxis – Draw a vertical axis underneath our graph layer by using the backgroundGeometries layer of the DataCanvas. 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 entire DataCanvas 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):

Files

• AxiisSimpleColumn (download)

In this episode Simeon Bateman joins us at Adobe Max 2009 to chat about the highlights.

Resources:
- Simeon Bateman Blog

From the late 1800s until the 1950s, railroads dominated the transportation landscape.  Want to go from LA to Chicago?  Chances were you did that by train.  It was the preferred choice of the traveler–cost effective, comfortable, and enjoyable.  In short, the railroads enjoyed a near monopoly on passenger movement for nearly 100 years.

When the automobile began to dominate the landscape, railroads simply ignored the threat.  “We are vastly superior, have a lock on many markets, and offer an experience you can’t touch!”  Unfortunately, the American consumer disagreed with them and railroads entered a period of decline.  Cars became the preferred mode of transportation, changing the way cities were built and how people spent their leisure time.  By 1966, railroads only carried 2% of all intercity passenger traffic.  And by 1970, only one major railroad carried passengers at all.  The railroads shrank, cut routes, and closed down wondering what happened.  This is now a classic example in business texts, MBA courses and lectures:  railroads failed to understand they were in the transportation business, not the passenger business.  They didn’t realize their core strengths causing certain death when their market shifted.

Back in the early 90s, my first job out of college was technical support at a GUI toolkit company.  This company’s claim to fame was a platform portable library(written in C, later adding a C++ framework) where you could build a user interface on say Windows and then move it to Motif, Mac, OS/2 or a litany of other unfamiliar and obscure platforms, recompile and BOOM, your app ran there too.  At the time, it was a novel concept and one folks were paying a mighty fine premium to obtain.  Licenses ran about $2000 a piece, plus annual maintenance for support.  Writing these kind of applications required a level of GUI expertise that wasn’t commonly available to many developers of the era which gave rise to a Consulting and Training Group that charged hefty rates for their highly sought-after services.  Life was good:  the company sold several million dollars of support, product and services each year.  ISVs writing C and C++ applications gobbled up the software as voraciously as their CFOs would approve the purchase orders, creating a very large and lucrative market during that time.  They were kings of the hill.

Fast forward about 3 years.  Java and HTML appear on the scene.  Younger developers in the company are checking these new technologies out and sending emails to the executives saying how cool Java is and how HTML is taking over the world.  The executives didn’t care.  “HTML?  Bah, that’s for children.  Java?  A toy language at best…all it can do is make Duke dance in an applet window.  Ignore them.  We have the Enterprise to worry about.”  They missed the point.  They were in the business of providing a platform-portable GUI development solution.  They forgot that technology doesn’t factor into their mission statement.  They were focused on getting new customers in their existing market.  They insisted everyone would use C++ forever because it sucked less than HTML and Java, instead of seeing how the market had changed.  Just like the railroads.

A few years later, the company shrank from the 100+ employees in 1994 to less than 5 by the Millennium.  Developers left in droves because Java was the hot new language and C++ developers were in demand.  Professional services was sold to another company because management wanted to “focus on product sales, not services”.  The product sales dried up slowly and only a few stubborn customers who couldn’t get off their C/C++ platforms paid the outrageous maintenance fees charged by the remaining shell company.  Java became the defacto language for the enterprise.  HTML is the lowest common denominator of every web framework today.

Seth Godin nailed this in a short post:  When you have a hammer, everything looks like a nail.  But making sure you have the right tool for the right market is about how quickly and easily you can switch hammers.  Not hitting the same nail again and again.

The lesson here is clear:  Understand your strengths because your market isn’t static.  When the market changes, be prepared to adapt to it with those strengths. Otherwise, you’ll die thinking your strategy was right.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

In this episode Chet Haase joins us during the Adobe Max 2009 after party to discuss the highlights from the conference. Chet is a member of the Flex SDK team and Drunk on Software’s West Coast Correspondent.

Welcome to Lessons of Failure.  If you were looking for another blog about Dot Com Bazillionaires running around in limos post-IPO, well, sorry.  Try Google for someone else.  That’s not me.

I’ve spent the better part of two decades now as a professional computer geek (even longer as a rank amateur) and if there’s one thing I know about by now, it’s failure.  Everything from small fuse-popping, whoops-don’t-put-120V-on-an-electrolytic-capacitor failure, to Holy Sh*t! Dad-is-gonna-KILL-us-when-he-finds-out-about-this failure.

My background as a consultant gives me a unique perspective in the software industry.  Sort of like a bystander during an auto accident.  Or walking into the back of a bar mitzvah in a hotel.  You’re there, but at the same time, you’re also divested of the outcome to a certain degree.  Oh sure, you want success because it also happens to improve your chance of renewal at contract expiration time.  But when the company suddenly transforms into a smoking crater, you’re still standing on the side covered in a bit of soot, unlike your coworkers that are now atomized.  And hopefully a bit wiser, assuming you paid attention before the bomb went off.

Everyone knows the famous quote by George Santayana:

“Those who do not learn from history are doomed to repeat it”

And that’s what this blog is about…learning from failure.  Personal failure (like divorces).  Industry failure (like the dot-com bust).  Company failure (like Enron).  Learn or repeat.  Easy to say.  Hard to practice.

Having failed to learn a few times and, ahem, received a chance to repeat the mistake, this blog will explore failure on all those levels and more.  Fail fast, fail often, but for heaven’s sake, at least learn something.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.