Creating a bullet graph in Design Studio.

[jeroenvandera]

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: http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf

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;
line-height:120%;}

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 (http://scn.sap.com/thread/3409979)

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_ACTUALS.setWidth(actuals);

CHRT_FIRSTSTAGE.setWidth(stage1);

CHRT_SECONDSTAGE.setLeftMargin(stage1);

CHRT_SECONDSTAGE.setWidth(stage2);

CHRT_THIRDSTAGE.setLeftMargin(stage1 + stage2 );

CHRT_THIRDSTAGE.setWidth(stage3);

(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