Skip to Content
Author's profile photo Jeroen van der A

Creating a bullet graph using the 1.2 SDK beta

As you may have seen in my last blog  (Creating a bullet graph in Design Studio.)I wanted to use bullet graphs in my dashboard. In the first version I used panels, text components etc to put them together. For demo purposes this is fine, but for production you just want to drag in a graph, bind it to data and not program each number into the components yourself.

As I am part of the SDK beta program and the book about Design Studio I co-wrote (Getting Started with SAP BusinessObjects Design Studio)

is being printed I finally have time to give the SDK a go. My experience is very limited but I managed to build a nice version :

The Final result of my first SDK try is this :

00 - example bullet graph.png

image 1: bullet graph

As you can see the three bars, the actual and the comparison are all there.  Instead of building this graph from individual components now you can drag the graph in from the component menu as shown below:

01 menu_with Bullet Graph.png

image 2:component menu with the bullet graph component

After  you drag it onto the canvas, you are able to see the properties of the custom component on the right. As you can see I already have a number properties in place to change the colors and bind the query data to the graph. Actually using those properties to change the behavior still needs some work though.

02  Dragging to canvas.png

image 3: custom component with properties

Finally the graph can be resized at will. The Graph is built using SVG (read more here) which scales up and down very nicely. You basically create your own canvas and when you resize the canvas will be related to the window available for the graph.

Next steps:

My next steps will be to invoke a css sheet so you can change the looks by adding CSS classes. Expand the bullet into a panel that lists a number  of bullet graphs. That way you do not need a query for each bullet graph, but use a single query where a bullet graph is put in the panel for each row in the datasource.


In the same weekend I said   “Hello World” in Eclipse I was able to manage the above. I am quite satisfied with the result. After initial problems to get to know Eclipse I was able to build something quite fast which shows that once the SDK is GA you can do anything you could possibly think of.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Laurens Geraedts
      Laurens Geraedts


      Author's profile photo Former Member
      Former Member

      Hi Jeroen,

      do you intend to share the source of the component with the community, or is it a business secret? 😉



      Author's profile photo Madireddy Rahul Reddy
      Madireddy Rahul Reddy

      Thanks Joroen,

      Is there anyway you can share some of the tips that can help me get started on custom speedometer component in Design Studio 1.2?

      Author's profile photo Jeroen van der A
      Jeroen van der A
      Blog Post Author


      Yesterday the SDK became GA, i'll replicate my beta work in that environment and post a blog about it (probably in a week or 2)


      Author's profile photo Former Member
      Former Member

      Where can I find the SDK for this?

      Author's profile photo Former Member
      Former Member

      Is there a location where we can download the source files / code?

      Author's profile photo Former Member
      Former Member

      Thanks Jeroen for sharing the idea. Can please you share your source files/code?