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.

screenshotIphone.jpg

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.

/wp-content/uploads/2015/05/wide_screen_full_714076.jpg

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.

/wp-content/uploads/2015/05/properties_714107.jpg

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.

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Karol Kalisz

    Hi Jeroen,

    very nice to see another contribution!

    I just updated the “preview” release to make it also accessible for others.

    just be aware, the chart is still in “prototypes” and will be probably moved to “databound” soon.

    Also, the correct one is the w/o “Gen Prototype” in description!

    Karol

    (0) 
  2. Daniel Swarez

    Hi Jaroen,

    Is it possible to wrap the label text? Rather it moving the chart to the right when the text grows in length?

    Great charts by the way!

    Thanks.

    (0) 
  3. pooja hooda

    Hi Patrick,

    I had faced the same issue of not being able to see the data from custom datasource. But luckily I found the solution.

    Solution: Use the external Key for the key figure instead of technical name. Then you will see the data.

    (0) 
  4. pooja hooda

    Hi Jeroen,

    I used the Bullet Chart and it is amazing. But I am not able to see the x-axis numbers during runtime even though I have checked the checkbox related to X-axis numbers. I can see the numbers in my design but not at runtime.

    Any idea how this could be resolved?

    (0) 
  5. Jeff White

    I am unable to get the graph to see my data. I am using an IDT UNX universe as the source. Not sure if this is the same issue addressed by pooja hooda above. I have 7 key figures: Curr Val, Target, Stack 1 Value, Stack 2 Value, Stack 3 Value, Stack 4 Value, and Stack 5 Value. I have configured the chart this way.

    Capture.PNG

    Here is the resulting chart.

    /wp-content/uploads/2016/07/capture2_999386.png

    Any clue what I’m doing wrong?

    Jeff

    (0) 
  6. pooja hooda

    Hi Jeff,

    I had resolved the issue which I was facing by using the technical key of the key figures instead of using the descriptions.

    (0) 
  7. Martin Ujcek

    Hi, I have problem with axes swapping.

    I am working with DS 1.6 SP3 and I want to build vertically oriented bullet chart. I have found, that there is an option called Swap Axes, but after I ticked it nothing happened either I ran it on platform. Does this component have troubles with new version or is there another way to do this?

    Any suggestions will be helpful.

    Thanks,
    Martin.

    (0) 

Leave a Reply