In my previous blog post, Retrieving Selections from a Chart, we discovered how to retrieve the selected dimension values from a chart. This works well if we then want to use the selected dimension values as filters on some other widget in the story or some other action that requires a dimension value.
We did not discuss how to retrieve the selected measure values from a chart, and we will discuss how to do this in this blog post. Suppose that we have a chart, as shown below:
We want to make up to four selections and display the selected measure values in input controls. Our front end will look like the following:
The chart (Chart_1) allows us to select values by clicking on chart elements. The # Selected (Selection_M1) field will contain the number of selections that were made. The following four fields (Selection_2 through Selection_M4) will contain the selected measure values.
Once we have placed our controls on the canvas, we will need to develop the code to manage the selections for Chart_1. To start this, we click on the fx button to the right of the Chart_1 object in the canvas list, and then select onSelect, as shown below:
Selecting onSelect will place us in the onSelect module for the Chart_1 object.
When selections in a chart or table are made, they can be retrieved in a Selection array object. Each selection made will be an element in the Selections array. To retrieve the selections, the following code can be used:
To retrieve the selections in a chart or table, we use the getSelections method of the object, as shown in //1.
Since the selections are returned in an array, then we can use the length property to determine how many selections are made, as shown in //2.
To set the value of an input control, we use the setValue method of the object. Our variable iSelCount contains an integer that represents the number of selections. We want to place this value in the input control named Selection_M1, but we cannot directly place an integer into an input control. Therefore, we use the toString method of the integer variable to convert the integer into a string.
Now that we have the selections array that contains the selections made in the chart. Let's have a look at our selections array in the console of Chrome. To do this, we are going to examine each array element by looping through the array with the following code:
I made two selections on the chart and the console displayed the following:
There are two outputs - one for each selection. In this output, we can see the name of measure object, which is # carts. We can also see the value of the selected dimensions, which are POSTAGE and PARTY BUNTING. However, there is no entry for the measure values that have been selected.
To get the measure values, we need to use a different method to retrieve the values using the selection object. This code will look like the following:
When we examine the console, we see the following:
The result set object seems to have two elements, one of which is our measure identified by @MeasureDimension. However, to the @MeasureDimension element there are different members: id, description, rawValue, and formattedValue. We want to access the rawvalue, so we will use the following code:rsltSelection[0]["@MeasureDimension"].rawValue to access the element.
Now, we are ready to populate our input controls with selected measures from the chart. Below is the complete code.
In the complete code there are two loops - an i loop and a j loop, The i loop assigns the selected values to the input controls. The j loop removes values from the input controls if they are deselected.
Now that we can retrieve selected measure values from charts and tables, we can build complex dashboards that allow us to further analyze values displayed in tables and charts. In my next blog, I plan to create an application that will predict the next item that a buyer may add to their shopping cart.
We did not discuss how to retrieve the selected measure values from a chart, and we will discuss how to do this in this blog post. Suppose that we have a chart, as shown below:
We want to make up to four selections and display the selected measure values in input controls. Our front end will look like the following:
The chart (Chart_1) allows us to select values by clicking on chart elements. The # Selected (Selection_M1) field will contain the number of selections that were made. The following four fields (Selection_2 through Selection_M4) will contain the selected measure values.
Once we have placed our controls on the canvas, we will need to develop the code to manage the selections for Chart_1. To start this, we click on the fx button to the right of the Chart_1 object in the canvas list, and then select onSelect, as shown below:
Selecting onSelect will place us in the onSelect module for the Chart_1 object.
When selections in a chart or table are made, they can be retrieved in a Selection array object. Each selection made will be an element in the Selections array. To retrieve the selections, the following code can be used:
//1 Get the selections and assign them to selection object
var selArray = Chart_1.getSelections();
//2 Get the number of selections (array elements)
var iSelCount = Chart_1.getSelections().length;
//3 Display the number of selections in the Selection_M1 input control
Selection_M1.setValue(iSelCount.toString());
To retrieve the selections in a chart or table, we use the getSelections method of the object, as shown in //1.
Since the selections are returned in an array, then we can use the length property to determine how many selections are made, as shown in //2.
To set the value of an input control, we use the setValue method of the object. Our variable iSelCount contains an integer that represents the number of selections. We want to place this value in the input control named Selection_M1, but we cannot directly place an integer into an input control. Therefore, we use the toString method of the integer variable to convert the integer into a string.
Now that we have the selections array that contains the selections made in the chart. Let's have a look at our selections array in the console of Chrome. To do this, we are going to examine each array element by looping through the array with the following code:
var i = 0;
for (i=0; i<iSelCount; i++)
{
// Output selection object to the console in Google Chrome
// To view the console press the F12 key after running the application
// Then select the console menu tab
console.log(selArray[i]);
}
I made two selections on the chart and the console displayed the following:
There are two outputs - one for each selection. In this output, we can see the name of measure object, which is # carts. We can also see the value of the selected dimensions, which are POSTAGE and PARTY BUNTING. However, there is no entry for the measure values that have been selected.
To get the measure values, we need to use a different method to retrieve the values using the selection object. This code will look like the following:
var i = 0;
for (i=0; i<iSelCount; i++)
{
// Get the Result Set for the selection
var rsltSelection = Chart_1.getDataSource().getResultSet(selArray[i]);
//Have a look at the reset set object
console.log(rsltSelection[0]);
}
When we examine the console, we see the following:
The result set object seems to have two elements, one of which is our measure identified by @MeasureDimension. However, to the @MeasureDimension element there are different members: id, description, rawValue, and formattedValue. We want to access the rawvalue, so we will use the following code:rsltSelection[0]["@MeasureDimension"].rawValue to access the element.
Now, we are ready to populate our input controls with selected measures from the chart. Below is the complete code.
// Get the selections and assign them to selection object
var selArray = Chart_1.getSelections();
// Get the number of selections (array elements)
var iSelCount = Chart_1.getSelections().length;
// Display the number of selections in the Selection_M1 input control
Selection_M1.setValue(iSelCount.toString());
var i = 0;
for (i=0; i<iSelCount; i++)
{
// Get the Result Set for the selection
var rsltSelection = Chart_1.getDataSource().getResultSet(selArray[i]);
if (i===0){
Selection_M2.setValue(rsltSelection[0]["@MeasureDimension"].rawValue);}
else if (i===1){
Selection_M3.setValue(rsltSelection[0]["@MeasureDimension"].rawValue);}
else if (i===2){
Selection_M4.setValue(rsltSelection[0]["@MeasureDimension"].rawValue);}
else if (i===3){
Selection_M5.setValue(rsltSelection[0]["@MeasureDimension"].rawValue);}
}
var j=0;
for (j=i; j<4; j++)
{
if (j===0){
Selection_M2.setValue(' ');
} else if (j===1){
Selection_M3.setValue(' ');
}else if (j===2){
Selection_M4.setValue(' ');
}else if (j===3){
Selection_M5.setValue(' ');
}
}In the complete code there are two loops - an i loop and a j loop, The i loop assigns the selected values to the input controls. The j loop removes values from the input controls if they are deselected.
Now that we can retrieve selected measure values from charts and tables, we can build complex dashboards that allow us to further analyze values displayed in tables and charts. In my next blog, I plan to create an application that will predict the next item that a buyer may add to their shopping cart.
- SAP Managed Tags:
