Skip to Content
Author's profile photo Manfred Schwarz

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 (


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 ( – 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

    DS_1.expandNode(JPD3HIER_1.getHierarchyDimensionKey(), JPD3HIER_1.getSelectedNodeKey());

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.

Designtime hints

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.

BIAL Interaction

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.

Best regards


Assigned Tags

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

      Manfred, I'm glad to have you on board!

      The version of today is containing already your contribution - everyone can try it out.

      Author's profile photo James Rapp
      James Rapp

      Hey Manfred,

      Great write-up and thanks again for your help. I had some problems with the script contributions marked:


      Sometimes they don't populate and throw an error. Just a heads up in case you run into something similar when you give it a try.

      Great component and an excellent example for the community to follow!

      Author's profile photo Manfred Schwarz
      Manfred Schwarz
      Blog Post Author

      Hi James,

      thank you for mentioning it. I also experienced troubles with the private functions and changed to normal ones.In my case it was not so important to hide the functions.

      Hopefully the component can be of use to somebody.

      Author's profile photo James Batchelor
      James Batchelor


      Nice extension.  I am playing with it in 1.5.   I am not able to get the Alerter KF to be used to color code the bubbles.

      It like the optional alerter one is ignored.  I set the alerterUsePercentage to false. 

      When I change the AlerterColor Value fields I can see the colors change at design time...but they reference the mandatory field..not the Opt. alerter field.

      any thoughts?


      Author's profile photo Manfred Schwarz
      Manfred Schwarz
      Blog Post Author

      Hi James,

      Due to heavy load i could not check the functionality of the component. i will have a look at the issue next week and get you updated.Best regards


      Author's profile photo Manfred Schwarz
      Manfred Schwarz
      Blog Post Author

      Hi James,

      I repaired the behaviour and Karol will update the components by the end of this week. Give it a try - if there is still the error please send me your data (as csv file) and also a screenshot or description with your settings.

      Sorry for the long delay !

      Best regards


      Author's profile photo Former Member
      Former Member

      Hi Manfred,

      i have recently tried to connect the Hierarchie chart with a DataSource, but it does not work. I cannot get it to display the data. Are there any known issues with this component and Design-Studio 1.6 Sp1 ?

      Author's profile photo Manfred Schwarz
      Manfred Schwarz
      Blog Post Author

      Hi Robert,

      Indeed there was a problem with the upgraded possibilities of the SDK Resultsets. The component was not prepared for the Total Lines 😉

      My Bad. Thanks to Mike Howles i upgraded my APS screen (you don't have to type the Keyfigures now - instead you have a beautiful combobix).

      Karol Kalisz will create a new version of the components with my repair in it.

      Also sorry for the delay !

      Best regards


      Author's profile photo Former Member
      Former Member

      Hi Guys,

      Please help.
      How to start wokring this component in DS 1.6 SP 3? Component is not getting values from data source (BEx query).

      Best Regards,

      Author's profile photo Former Member
      Former Member

      Hi  Arunas,

      Did this component work in DS 1.6 SP 3 ?

      if so, could you please help me .

      I'm using the stable version and can't get the D3 hierarchy component to work. As shown in the above explanation, when I select the component, I can't find the field to input 'hierarchy dim' in additional properties tab. Need some help.

      Below is a screenshot of my additional properties tab:




      Author's profile photo Manfred Schwarz
      Manfred Schwarz
      Blog Post Author

      Hi Monika,

      The Hierarchy Dim should get recognized automatically.

      You just have to make sure that an hierarchy is activated in your query !! Then it will/should show you the hierarchy elements in the canvas.

      If not please let me know.

      Best regards


      Author's profile photo Former Member
      Former Member

      Hi Manfred,

      Yes, my query does have the hierarchy activated.

      Author's profile photo Vijai Muniraj
      Vijai Muniraj

      I had the same issue and fixed it. Please reload the application by clicking on reload icon on top.