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

First try in SDK, building a bar chart with benchmark option in D3

Gaining experience with the SDK. I thought about addressing something that is being asked by customers quite often. A benchmark chart. Usually Dashboards of larger organizations show a lot of benchmark results. Often with the restriction that the other results are anonymous.

The idea is to have a bar chart where ‘your’ results are shown in a different color than the rest. Additionally the results are being sorted to have the highest result on the left. Until now I had to go back to BW or HANA to set up a way that I could separate them. But it is much easier to do this in Design Studio without the need to go back to a source system.

Using this kind of graph shows how your results are doing in comparison to others. Not only do you get a ranking, but you also have an indication how far ahead/behind you are in relation to the others.

the resulting graph looks like this :


As you can see the results of our entity are ranked third and is at some distance from second place, but also far ahead of third place.

To be able to use the graph to  set benchmarks at runtime i’ve introduced two methods to set and get the current benchmark.

You can set these properties  at design time in the properties view of the  component, but also in script so you can change them at runtime based on user interaction.


You can now set the benchmark using for example a global variable that holds the value of the department that is tied to the user looking at the dashboard

It is also possible to get the current benchmark from the graph :


Highlights of the code :

To achieve separate colors i have created two css classes :

.benchmarkbar_benchmark {
  fill: steelblue;
  fill-opacity: .9;
.benchmarkbar_other {
  fill: steelblue;
  fill-opacity: .6;

In the actual code to build the graph there is an evaulation of value in the x-axis to the benchmark property. If they are equal the css class .benchmarkbar_benchmark is used. Otherwise the class .benchmarkbar_other is added.

.attr("class", function(d) { if (benchmarkcompany == d.letter) {return BENCHMARKBAR;} else {return OTHERBAR;}})

note that BENCHMARKBAR and OTHERBAR are two string variables that hold the class names.

setting and getting the benchmark value is standard. This can be directly copied from the .setColor example of the coloredbox

this code was added in the component.js

var benchmarkcompany = null;
  this.benchmark = function(value) {
  if (value === undefined) {
  return benchmarkcompany;
  } else {
  benchmarkcompany = value;
  return this;

and this in the contribution.ztl

/* Returns the current Benchmarkee of the benchmark */
String getBenchmark() {*
return this.benchmark;
/* Sets the current Benchmarkee of the box */
void setBenchmark(/* the new benchmark */ String newBenchmark) {*
this.benchmark = newBenchmark;

Using D3

D3 is a very powerful JavaScript library that has been added to the SDK. if you look at sites such as you see many examples of what you can do. Also you will find tutorials on how to build these graphs.

the D3 library can be found in the SDK as wel as in the OPENUI5 / SAPUI5 library that resides on HANA. I think it is really worthwile to go through the tutorials.I especially recommend the tutorials on youtube by d3vienno, he uploaded 20 tutorials that help you to get started on the subject :

For people who want to see the entire code I’ve listed the code in all the files in a separate document

here :

Assigned Tags

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

      Great blog Jeroen, thanks for an insight in the D3/SDK dev you're doing!


      Author's profile photo Michael Howles
      Michael Howles

      Great post!  I stumbled across d3 a week or so ago when I heard DS had ties back to it.  Thanks for sharing the code, as well!