Design Studio Extension: Bullet Chart

One of the most popular graphs that is currently still missing from the standard Design Studio set is the bullet chart. The bullet chart was defined by Stephen Few and is meant to enable comparison between multiple values at a glance. For creating the bullet chart  I used his design document. A link to that document you can find below. In the past I already made a light version but now I made a new one and added it to the SCN SDK Community.

Currently the component is still a prototype, but after integrating the component more with the others it will be added to the databound extension.

The component is very flexible. You are able to customize it based on your layout.

On the one hand it can be made for an IPhone:

The component is enabled to scroll up/down and based on the scroll individual graphs will

fade or show based on their position in relation to the screen.

Each graph is also “clickable” you can pass an unique ID for each graph which will allow you to drill down to show more detail on that particular graph if you want to.

But you will also be able to set the number of columns and make it suitable for a wide screen :

Her I used a lot of data to show how many Graphs you can render. This

example is the population per country between

1990 and 1999 for Europe and east Asia.

In this example you also see a tooltip appearing over the graph. You can turn this on and off in the properties.

Additionally here you see an X axis. This was turned of at the previous screenshot to save screen room. For the X axis you can set the number of ticks

Properties

The component already has a lot of properties that determine how the bullet graphs will look on screen.

The most important properties are the properties that determine what values the individual parts of the graph hold. 

for the values you define the column. In this example you see that I chose different years. For the label, sublabel and unique key you take the columns.

For clarity I added the datasource in the attachment so that you can see how these values relate to the datasource.

Other properties are to show/hide parts of the graph such as tooltip, alert and the X axis. For the alert you can determine when the alert should show. This could be based on the comparison or any of the thresholds. Additionally you can determine if a higher result or lower result should trigger a warning.

The trigger is based on the comparison of the expected realization outcome. If this value is omitted then it will use the current realization for comparison.

A special mention deserves the minimum and maximum height of the graph. taking different values allows the graphs to grow and shrink based on the room per graph in the component. If you set the minimum equal to the maximum the size of each graph is fixed vertically and you have to scroll to see all graphs.

This is a first prototype version of the SDK. My next step is to integrate it more and make it easier to use. Additionally I expect there are plenty of bugs that need to be fixed 😉

Please try it out and let me know what you think.

The component is added to the SDK community :

More information you can find here on how to install etc. : SCN Design Studio SDK Development Community

Help pages on the SDK components you can find here : Component List – SCN Design Studio Community

and finally if you want to look at the source code : sdkpackage/src/org.scn.community.prototypes/res/BulletChart at master · org-scn-design-studio-community/sdkpackage · Git…

link to Stephen Few’s  design document : http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf the component is including the optional features based on the image on page 5.