Creating Bullet Graphs in Flex with IBM ILOG Elixir Gauges (2)
In a previous post I have introduced the bullet graph concept from Stephen Few and described how one can create a core component in Flex for bullet graph using the IBM ILOG Elixir gauges. This second article is about creating a custom Spark skin for the component that would comply with the bullet graph specifications in terms of rendering.
As we have seen in the previous post, the default skin generated in the Bull
As you can see it is quite far from a bullet graph so we will need to change several parts of the skin in order to get the correct rendering.
First we need to remove from the skin every parts that are not required by the guidelines. For that, you need to open the Bull
Once you have done that you have a cleaner skin to start with. The next step is to modify some of the simple skin coloring as follows:
But this is not enough, there is now some sizing and positioning to modify. The default width of the gauge is too small for a bullet graph; in order to fix that you can add a minWidth attribute to the scale part with a value of 300. This will make sure the scale of the bullet graph is at least 300 pixels wide. Another little positioning trick is that by default in ILOG Elixir gauges the value bar is starting just before the first tick while the tracks (ranges) are starting right on the minimum value of the scale. So in order to better align them together I have changed the left attribute of the value to left="1".
Also as you can see on the rendering at the top of this post the target marker is an arrow that is above the scale. For a bullet graph we want this marker to be a vertical bar and that vertical bar to be at the same vertical position than the other elements. For that we need to modify two things:
We now have the following result:
Finally in a bullet graph the ticks of the scale are displayed below the value rendering while for now we have them at the same vertical position. In order to change that we need to change the top value of ticks and scale labels. To make sure we have enough room for other modifications to come in the next blog post we shift the ticks & labels by 30 pixels by setting top="30" on the ticks and top="38" on the labels. We also reduce the ticks size from height="9" to height="6" which gives the following result:
As you can see we are a lot closer to a real bullet graph but we still have a little bit of work to do to get a perfect match with the guidelines. For example we need to have a different height for the qualitative ranges (higher) than for the bar representing the value and they both need to be correctly centered in the 30 pixel area we have reserved for that above the ticks and labels. This will be done in next and final post on this subject.
Meanwhile if you want to give it a try yourself and see how a Spark skin can easily be modified to match the rendering specification of a component you can download the Flash Builder project (blo