Skip to Content

The Scorecard component has been introduced in Design Studio version 1.6. It indeed has a lot of functionality like microcharts, conditional formatting(on bw) etc as a standalone component. For configuration of scorecard component, refer Karol’s posts

Design Studio 1.6 – View on Scorecard Component

Design Studio 1.6 – Advanced Selection in Scorecard

In real-time scenario, one may need interaction between the scorecard and another component say a chart. It may be required that a chart data will be filtered based on the dimension selected in the scorecard. However, I could not find any direct function to do this. I achieved this through a workaround which I am going to describe below.

I have used Karol’s sample dashboard and data for this demo. I have taken a Scorecard and an Infochart as below

the Scorecard is sourced from DS_1 and Infochart from DS_2. The row scope in the Scorecard is defined up to Product Group

From what I have seen from my experiments is that you can interact with other components only on the basis of the dimension defined in the row scope, in this case Product Group. So I want to filter the Infochart based on the Product Group I select in the Scorecard.

The Scorecard has 2 methods for showing selected items

1) getSelection()

2) getSelectedColumnId()


The getSelectedColumnId() gives the column id of the column on which you click(COLUMN_!, COLUMN_2 etc). Hence it is of not much use in this case. The getSelection() has a return type of ResultSetSelectionByString, which is basically an array.

Hence, first we need to store this array in a variable

var prodgrp = SCORECARD_1.getSelection();

Next, I am calling a for loop(though the purpose of for loop is different, we have no other way in this case) to access the selected values and using the same to set filter on the Infochart(based on DS_2)

prodgrp.forEach(function(value, key) {

  DS_2.setFilter(“PRODUCT_GROUP”, value[0]);

});

and this work fine

The for loop seems to be the only way to access the selected values within the array returned by getSelection() method. It would have been much simpler if there was a method like getSelectedMember(), however that is absent for Scorecard

Another strange thing I noticed was that this method works in the same way(filtering on the dimension selected in row scope) no matter whether you set the selction type as Single, Multi or even None

You can download this example below

SCORECARD_INTERACTION.zip – Google Drive

I anyone has found any simpler way to do the same please let me know

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

  1. Liliana Gil

    Hi Riddhiman, thanks for sharing! I’ve a customer requirement for “highlihting” the entire selected row, instead of only the small cell at the begining. Do you know if is it possible?

    Thanks!

    Liliana

    (0) 
  2. Preethi M

    Hi Riddhiman,

    Nice and useful post.

    I have a requirement of selecting multiple values in scorecard and need to get the selected values in Listbox component.

    Can you please suggest any script to get multi selected values from scorecard.

    Thanks,

    Preethi

    (0) 
    1. Riddhiman Basu Post author

      I think multiple selection returning multiple records is not possible in this version of scorecard. 🙁 The process I have described gives only the dimension up to which the row scope is defined

      (0) 
  3. Amardip Selmokar

    Hi All,

    We have scenario,that we are having scorecard with KPI name and on selection of KPI it changes data in chart.

    But we need to have by default first row selection in scorecard,on tab or dropdown selection like as Xcelsius i.e. row are selectable.

    I am doing so using some script,but is there any direct option for the same.

     

     

    (0) 

Leave a Reply