How to Drilldown from a Chart in Design Studio

February 2, 2015 by: David Lai

A chart component allows for visualization of data. The data is bounded to the chart by referencing a data source alias. Any component that is able to filter the data source will also change the chart accordingly. Ultimately, users would be able to change the data displayed moving from one level of detail to the next. However, with Design Studio, it can also allow for user interaction within the same chart by allowing users to drilldown on dimensions by clicking on the corresponding data on the chart. The dimensions have to be hierarchal in nature. In Design Studio, we can easily control the selected drilldown item on charts through a script.

More options for user interactivity is always welcomed especially when a chart can provide more specific detailed information required for business decisions and data analysis with a simple click. To be able to select the required data by drilling down from the chart saves time and is more efficient and intuitive for analysis purposes.

Following the next step by step of instructions would help accomplish this task.

Step 1:

Select the chart with which you want to trigger the drilldown. We are using a chart named CHART1 which is bounded to DS_1 in this example. The example bar graph below will be the chart we will be using to drilldown on.

step 1

Step 2:

Open the Script Editor for the chart.

step 2

Step 3:

Write the following code into the Script Editor changing the DIMENSION to the name of the dimension you want to drilldown on and DS_N to the data source that is bounded to components you want to see the drilldown dimension displayed.

DS_N.setFilter(DIMENSION, CHART1.getSelectedMember(DIMENSION));

For example, if you changed DS_N to DS_1, the drilldown would be displayed on the same chart, CHART1. This is because CHART1 is bounded to the data source DS_1.

DS_1.setFilter(DIMENSION, CHART1.getSelectedMember(DIMENSION));

Similarly, any other components bounded to DS_1 would display the drilldown as well. To illustrate this point, we have a crosstab component which is also bounded to DS_1 displayed below. The information displayed is synonymous with the information displayed on the chart. This makes sense because they are both bounded to DS_1.

step 3

Step 4:

Select the part of the chart you want to drilldown on, more specifically that particular dimension of the chart. In this example, we select the Hitch Rack – 4-Bike bar as shown below.

step 4

Once clicked, CHART1 would change to display the Hitch Rack – 4-Bike dimension. The drilldown from the chart are displayed below.

step 4b

Note that this also changes the crosstab displayed in Step 3. The drilldown is reflected on the crosstab below.

step 4c

Again, this happened because they were bounded to the same data source, DS_1 that we were drilling down on when we selected the Hitch Rack – 4-Bike bar on the chart in Step 4.

If DS_N was changed to another data source (i.e. DS_2), all components bound to DS_2 would change to reflect the dimension that was selected from CHART1. This could enable multiple drilldowns as you can then script the components again, for example clicking on another chart bounded to that data source (i.e. DS_2)  that was already filtered by a chart selection from DS_1, to filter another data source (i.e. DS_3) and their components bounded to it. This process can be repeated using Step 1 through 4 changing the data sources and their corresponding dimensions.

A chart displays data graphically often showing trends or irregularities. In conclusion, allowing users to drilldown from a chart adds greater insight into more precise information quickly.


2 Responses to “How to Drilldown from a Chart in Design Studio”
  1. karthik says:

    Hi David,

    It is good post.
    I have a specific requirement,please see the below details for the following requirement.
    I have a situation here wherein i am trying to get hierarchy in the chart.

    The hierarchy is already set in HANA and i have enabled the Heirarchy in the Edit Data Source window for the particular Data source.

    My Requirement:-

    Based on the Hierarchy in the chart it should drill down to the other level and so on..
    Currently i have 4 Levels ex:- Plant—>Block —->FuncLoc—>Equipment.
    Attaching My intial view would show Total cost for the Plant on monthly basis.
    Once i click on the bar it should take me to the block level(2nd level) and so on till equipment level.

    Thanks and Regards
    Karthik Kumar C V

  2. srinivas says:

    Hi This is srinivas your post is very good but i have doubt suppose i want 3 levels of drill down then i have to take 3 charts and apply the following code to first and second chart is it correct. i have taken 3 charts and applied the following code then its working, but instead of 3 charts i have to take one chart and apply the drill down is it possible.if it is possible what is the code i have to write

Leave a Reply

× two = 8