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

Creating a bullet graph in Design Studio.

If Design Studio is one thing, then you can call it flexible. Anything you do not have you can build it yourself. Personally I like the bullet graph as it was defined by Stephen few.

This graph is designed to replace meters and gauges and delivers much more information in the same amount of space. Like meters and gauges a bullet graph is meant to display one keyfigure and and complimentary measures to enrich the meaning by allowing you comparisons to for example the year before or a budget or target.


Source Stephen Few:

Let’s see how far we can get building this bullet graph in Design Studio. The answer is this far :


as you can see it has all the elements of the bullet graph. Comparison fill colors, a quantitative scale, an actuals bar and finally a symbol marker that encodes the comparative measure. To give you an impression about the size of the graph. The label texts are 8px in size meaning that you could (If you wanted) put a large amount of graphs into your dashboard.

Building the bullet graph

First let me show you the overview of the components :


As you can see we use a lot of panel components to build the graph. There is a panel for each part including the scales, the background, the actuals and the comparison value. In the panel components for the actuals and the scale we have text components with numbers to enable the user to make sense of the graph.

For the CSS I used the following classes :

.firststage { background-color: #999999 ; }
.secondstage { background-color: #bbbbbb ; }
.thirdstage { background-color: #dddddd ;}
.actuals { background-color: #000000}
.comparison { background-color: #000000; }
.smalltext  { font-size: 8 px;

font-family: Geometric, Futura, Helvetica, Gotham, serif;
font-color: #666;

in the css style property of the actuals bar and the scale components I’ve added extra css to make them thinner (the minimum setting of a panel component is 10 width and height)

using height: 5px; for the actual bar and

width: 2px;
height: 3px;

for the scales I reduced the size of these components. I did it in the style as setting these in the class didn’t work. You need to work out the subclass of the panel component as David Gyurasz already showed in answer to another question about these kind of issues (

In the application startup we set up the values. In this example I’ve based them on hardcoded numbers  but you can easily replace them with numbers from a datasource using the .getdata method.

Mind though that you need to relate the size of the number to the width of the graph. In my case as the graph itself is 250px wide I divide the value of 315 by 2 to the actuals bar will be 168px wide, well within the range of the graph size. This recoding is based on the IF THEN statement I put in to check the size of the actuals measure. Off course this is only an example and you need to expand it for other sizes. Alternatively you can recode them in your query if that is easier for you.

var actualsnumber = 315;

if (actualsnumber > 200  || (actualsnumber < 450)) {
       actuals = 315 / 2;

comparison = 235;
stage1 = 80;
stage2 = 40;
stage3 = 30;

var stage1local = 40.0;

CHRT_THIRDSTAGE.setLeftMargin(stage1 + stage2 );

(replace actualsnumber with DS_1.getdata and so on)

There you have it. A bullet graph in design studio. The next step for me will be learning the SDK so this can be a standard component. That will make usage a lot easier. Additionally when a graph can pick up a single line of a data source as mentioned in some discussions for 1.2 then you could build a series of bullet graphs into your dashboard based on the SDK component and one datasource

Assigned Tags

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

      Looking forward to it....

      Author's profile photo Former Member
      Former Member

      any chance you can send me the source files?

      Author's profile photo Thomas Nielsen
      Thomas Nielsen

      It is an intriguing post, but there is a tremendous lack of details if the goal was to be able to let the reader make a bullet chart in Design Studio.

      You get the appetite for this can be done, but you rather quickly get stuck to the lack of setting of the various panel settings, and also there is a lot of CSS missing in order to end up with the result as shown

      Author's profile photo Karol Kalisz
      Karol Kalisz

      HI Thomas,

      this is quite old post - creating bullet chart with panels and its CSS / width settings. I think it is not required any more to create bullet chart as this procedure describes.

      In the meantime you should consider using scorecard component, see my reply in the thread Thermometer graphics on design studio.


      Author's profile photo Thomas Nielsen
      Thomas Nielsen

      Hi Karol

      You are right, that this post is old, and there is a bullet chart type in the latest Design Studio (1.6 as time of this comment). I also enjoyed the thread you are referring to.

      But, nevertheless, this post do still bring something interesting to the table (or dashboard - if you prefer 🙂 ). Not all users/clients/customers upgrade right away to the latest of the greatest, and in my particular case, the client is still running 1.5 🙁

      As always the "cost" of an upgrade need to be planned carefully, especially in large organisations, and basically this came down to, how much time will it take to build a bullet chart manually, in contrast to, what it will cost to upgrade to get the new features.

      But thanks for input


      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Thomas,

      I can understand the upgrade topic on customer side. Since many releases it is possible to "paint" custom component using the standard panels and some CSS. you can refer also to my posts:

      "Painting" with Design Studio via CSS3

      How to "paint" a Thermometer Component

      from clearness in the application and also performance and maintenance it is better to use standard or extension components, eg from the free scn community SCN Design Studio SDK Development Community instead of painting with panels.


      Author's profile photo Thomas Nielsen
      Thomas Nielsen

      Hi Karol

      Once again thanks for the links. I actually ended up doing some kind of my own CSS painting for the client in this case, but it is nice to see other examples.

      Regarding extensions, then I can only refer how some customers behave, and that is, if it is not in the package from SAP, then they will not install them. So that means no free extensions from the SCN Design Studio SDK Development Community, even though some of them are pretty cool. 😉

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

      Hi Thomas,

      at the time it was meant as an example that it is possible and a guideline how to go about it.

      You're still working with 1.4 or previous?

      Author's profile photo Thomas Nielsen
      Thomas Nielsen

      Hi Jeroen

      Currently it is version 1.5 SP 0 😯 , so I tend to get a bit frustrated when I know what is in 1.6 😀

      Anyway, the post is not bad per say, and with Karol Kalisz posts on painting with CSS, do give a rather good impression on what is possible.

      So if the purpose was only to show what is possible, but not explicit telling how it is accomplished, then it was spot on. Personally I just like to explain things in more details so reader will be able to reproduce the outcome,

      But in the end, the post was inspirational to the solution I ended up with, which in the end was not a bullet chart like yours 😉


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

      Well if it inspired you to create new things I'm happy with the result of this blog 🙂