Creating Bullet Graphs in Flex with IBM ILOG Elixir Gauges (1)
Comments (2) Visits (3995)
While discussing with Damien data visualization components not yet available in Flex / Spark, we encountered the Bullet Graph component which is basically trying to mix some of the bar graph and horizontal gauge concepts to take the best of both worlds and convey data information in a more efficient way. The component was first described by Stephen Few in its Information Dashboard Design book. You'll find more information on the bullet graph on its Wikipedia page or in its specification.
Studying bullet graph in a bit more details we realized we actually already had the component in Flex and more precisely in IBM ILOG Elixir. Indeed our gauges are based on the Flex Spark framework and thus are entirely skinnable. That means one can define an IBM ILOG Elixir horizontal gauge and make sure its skin is matching the specifications of a bullet graph. That's how came the idea of creating a series of three short blog posts explaining how to create a bullet graph using ILOG Elixir. You are reading the first post of this series, the next two ones should come quickly in the following days so keep an eye on the blog.
In the end, what we want to achieve is something that looks like this example of bullet graph available on Wikipedia (with explanations in red):
The first step in order to achieve this is to use the ILOG Elixir gauge wizard integrated into Flash Builder in order to create a Flex gauge component that contains all the core properties available on a bullet graph:
For that you need to launch Flash Builder 4 and create a Flex application project. You can right click the project to add IBM ILOG Elixir libraries to the library path. Once this is done, one more right click and you choose the "New > IBM ILOG Elixir Gauge" menu as shown below:
After that, a wizard appears on your screen. The first page asks for the name of the gauge, in our case we will call it BulletGraph. Then when you press "Next", a second page appears that you will need to fill with the core information of a bullet graph:
In the bullet graph use-case the gauge contains a single linear scale that we define in the topmost part of the page. On the bottom part we define the other core properties of the bullet graph. This includes the performance measure or value of the bullet graph that will be displayed in "Bar" mode per specification. This also includes the comparative measure or target that will be displayed in "Marker" mode and the two qualitative ranges that are represented by the grayed area on the bullet graph.
Once we have set these properties we press the "Finish" button and this generates two more files in our application:
These two files are key part of every component that relies on Flex Spark architecture. Each Spark component both have a core component and a skin in charge of its rendering. Among the numerous advantages of this architecture the main one is that it easily allows to switch the rendering of a given component by a different one. That's what we will leverage in the next blog post by replacing the default skin rendering by a rendering that matches the bullet graph specification.
But for now let's keep the default rendering. In order to see the BulletGraph component we need to fill the main.mxml application file with some code instantiating it. We also link the BulletGraph with its skin using the skinClass attribute and we specify its title, target and value in order for them to be displayed as specified in the Wikipedia image bullet graph we want to mimic.
<?xml version="1.0" encoding="utf-8"?>
We get the following rendering:
As you can see even if all the core properties we are interested in are present, this is still not really looking like a bullet graph thus the additional skinning work we will do in the next blog post!