D3 Hierarchy component
It is all
about hierarchies, at least in BEx queries. Did you ever had the wish/need to visualize your hierarchy in a tree like diagram?
Design Studio is able to present interactive hierarchies inside a crosstab.
but the visual representation is not that impressive. I saw a stunning visualization on
the d3js example page (http://www.brightpointinc.com/interactive/budget/index.html?source=d3js)
and thought about the possibility in combination with Design Studio.
Therefore I created a component called “D3 Hierarchy”. Purpose is to visualize the size of the single hierarchy elements. The source (as well as a usable .zipfile) is hosted in the SCN Design Studio SDK development community git repository (http://scn.sap.com/community/businessobjects-design-studio/blog/2014/12/10/scn-design-studio-sdk-development-community – thanks to Karol and Mike for their engagement here!)
That is the actual look of the component. In this blog entry I would like to describe the possibilities of this component.
The component is in the following area of the SCN DS community zip
The component is a databound component – therefore you have to assign a datasource to it. The datasource has to have a dimension with a hierarchy and of course Measures.
How to use it
As soon as you drag the component on the canvas and selecting it you can see all of the properties. In the View “Additional Properties” there are right now 3
Here you can select which dimension should be used for the Hierarchy and which item of the keyfigure dimension should get used for the bubble size. The third dropdown can be used to maintain the coloring of the bubbles.
You may wonder about the Hierarchy Dimension selection (with only two dimensions allowed it would not be necessary, but i had in mind to also use datasources with more dimensions. The hard thing about that was the creation of a running total. Due to this fact I implemented two events – which allow a synchronization with other datasources – and forgot the dropdownbox as a working piece of code
After picking the correct values in the Aditional Properties Sheet the component should present your hierarchy data already. It is using the format of the measure (incl. the keyfigure currency). By clicking the [+] and [-] areas you will expand or collapse hierarchy nodes. Nodes without children don’T have these areas.
Due to the fact that there is not one perfect hierarchy representation i’ve integrated some properties to control the look of the component.
I list all properties and try to explain why and how.
I start with the events of the component. I started the component with DS 1.3 and there I had no chance to access the Datasource inside my SDK. Therefore i needed a workaround to interact with the datasource. I created two events (“on Hierarchy expand” and “on Hierarchy collapse”). These events are fired and i was able to use BIAL scripts inside my application.
With this method I had to call the Datasource BIAL commando like
for expanding (and the same for collapsing). With this way I was also able to expand and collapse as many other datasources as I like. I just had to include this BIAL script and change the DS name. To avoid chosing and typing a datasource I created two BIAL functions for my component that return the selected hierarchy dimension, as well as the ID of the selected node.
During my work I saw that James Rapp was also working on the visualization of a hierarchy chart. I learned from him that with Design Studio 1.4 it is possible to access the components datasource. Since then it is not necessary to fill those two events (but the feature to synchronize datasources is still available)
The third event (“on Click”) returns the id of the selected node. This id can be used to filter other datasources or just to display the text which hierarchy node was selected on the canvas.
If you selected a keyfigure for the bubble alerter some of the properties are used to color the single nodes. You may ask why it is necessary to select another key figure. My ycelsius experience helped me and remembered me to be flexible. If you need the alerters based on the size – just pick it again). If you don’t want a colored hierarchy don’t select a second keyfigure. If your sales hierarchy should show the revenue, but the colors should represent the profit – here you have the chance
With the properties “alertColorRed”, „alertColorYellow” and “alertColorGreen” you can define the colors that are used for good (green), OK (yellow) and bad (red) values. You have two numbers properties that you can fill either during design time or during runtime with BIAL functionality (I come to that point later).
These two values gives you 3 possible areas in the example every value above 80 is green, between 80 and 35 is yellow and below 35 is red.
With the property “alerterUsePercentage” you can choose if the alerters are either calculated by the ratio of the single node compared to the total sum (alerterUsePercentage = true) or if it uses the numbervalues of the nodes.
With the property alerterHighValuesAreGood you can quickly switch the good and the bad color.
With the property “whichTextShown” you can choose if the text or the value of a node should get displayed. There are 4 different options in this textfield (value, value_text, text_value, text or value). Ideally this property should also be a dropdownbox in the advanced property sheet, but you always need room for improvement.
The property “showText” can hide the text at all.
With “BubbleSizeMaxSize” and “BubbleSizeBorderSize” you can adjust the appearance of the single nodes. Please see below the effect of these two parameters
You can also shift the whole hierarchy on the x-axis by changing the “BubbleRootXTranslation” property.
Of course there is also a tooltip for the enduser (you won’t see it in Design Studio Editor itself)
The tooltip gives you information about the actual chosen node. The maximum of the keyfigure as well as the total sum is included. Also the ratio (actual node value / sum of all nodes) and which hierarchy level the node is located in.
There are some borders that i had to set (not more than two dimensions, a border of more than 15 pixel won’t make sense to me or mixed alerter values). Therefore the component gives a little feedback to the enduser
Hierarchies are different
During the design time i used two different hierarchies and wondered sometimes why one of them looked strange to me. Until I realized that the strange one has only 1 node on the first level. Please have a look at the left side on the next picture. Therefore I decided to add an property “showRootBubble” and filled the value of the Root Bubble with the sum of all nodes.
Now it is possible to remove the strange look with a property.
I mentioned already the BIAL methods. With those you can use Basis Design Studio components and change some of the properties during runtime by the enduser.
One example with the setkfBubbleSize function is the ability to pick the keyfigure values with a dropwonbox during runtime and the values of the hierarchy are changing immediate.
I hope you will enjoy this interactive graphical hierarchy approach.
If you have comments, wishes or questions feel free to contact me.