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 D3js.org 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 : http://www.youtube.com/user/d3Vienno
For people who want to see the entire code I’ve listed the code in all the files in a separate document
- SAP Managed Tags:
2 Comments
