- SAP Managed Tags
Introduction
This blog discuss about how to dynamically change the dimensions and measures in widgets in SAP Analytics Cloud using scripting APIs. The scripting APIs in SAP Analytics Cloud can be used to provide custom interactivity an navigation to end users. The goal is to allow the user to dynamically change the dimension or measure of a chart(widget) at run time.
How it works?
Here we are creating a chart widget which shows Sales of an organisation according various dimensions and measures. We create checkbox to select the dimensions and dropdown to select the measure. Scripts are written for the chart widget, checkbox and dropdown, to dynamically change the measures and dimensions in run time. Finally when we run the application we can change the dimensions and measures. For example, we can select the measure as Sales in dropdown and dimension as State in checkbox. Then the chart will display the Sales according to States. Then you can change the dimension to City to see the Sales according to City. Likewise, you can change the measure value also.
Example:
Follow the below steps to dynamically assign measure and dimension to widgets.
To create a new Analytic Application.
Select File -> Create -> Analytic Application
When creating an analytic application, you will get a page with designer interface containing the main canvas. The styling of the canvas can be done here.
Select ‘Insert’ option in the toolbar and add a chart.
You will be prompted to choose a data source. Select the data model.
Now the chart is placed in the canvas and an entry is made for the chart widget in the outline view in the left panel. But now the chart is empty so we have to start assigning dimensions and measures for the chart from the Builder panel in the right side. If the Builder panel is not available make sure that the ‘Designer’ option is in enabled mode on the top right side of the page.
Choose the chart structure. Here we select a column chart which shows Sales by Country. So add the dimension as Country and measure as Sales. Then add a checkbox group and dropdown from the ‘+’ symbol in the insert section.The configuration for these checkbox and dropdown have to be done to change dynamically.
The configuration of checkbox/dropdown can be done either by hard coding the values in the Builder panel or by populating the widgets using scripting. Here, we will use both the methods. Hard coding the values for checkbox and populating the dropdown by scripting.
In the Builder panel of the checkbox group, add the dimensions ‘Country’ and ‘Representatives’ and mark ‘Country’ as the default selection.
Now for the dropdown widget population, add the below script in ‘onInitialization()’ event of the main canvas. This script will fetch all the measures and populate them in the dropdown.
Goto layout panel on the left -> Canvas -> Edit Scripts -> onInitialization. Write the below script :
var measure_list = Chart_1.getDataSource().getMeasures();
for ( var i=0; i < measure_list.length; i++){
Dropdown_1.addItem ( measure_list[i].id, measure_list[i].description );
}
Dropdown_1.setSelectedKey(“[Account].[parentId].&[Sales]”);
Now save an Run the application by clicking the ‘Run Analytic Application’ button on the top right of the page. Now we can find that the selector widgets are populated with measures. But still we have not added the script measure/ dimension selection to be reflected in the chart.
Create two global variables as ‘chart_dimension’ and ‘chart_measure’. The global variable ‘chart_dimension’ is a string array that can store selections from the checkbox group and ‘chart_measure’ is a string variable that stores the selected measure from the dropdown list. So give the type of global variables as string for both. Remember to assign the technical name of the measure ‘Sales’ as a default value to global variable chart_measure :
Default value : ‘[Account].[parentId].&[Sales]’
6. Configuration of the Checkbox group for interaction
Click the checkbox group from left - Edit Scripts - ‘onSelect’.
On the ‘onSelect()’ event of the checkbox add the below script. This script allows the user to select one or more dimensions to be shown on the chart. Remember that we have to initially clear all the existing dimensions from the chart before processing the chosen values in the checkbox group.
if ( chart_dimension.length > 0 ) {
for ( var i=0; i < chart_dimension.length; i++ ) {
Chart_1.removeDimension ( chart_dim[i], Feed.CategoryAxis );
}
}
chart_dimension = ArrayUtils.create(Type.string);
var dimension_list = CheckboxGroup_1.getSelectedKeys();
for ( var j=0; j < dimension_list.length; j++ ) {
Chart_1.addDimension ( dimension_list[j], Feed.CategoryAxis );
chart_dimension.push( dimension_list[j]);
}
7. Configuration of the Dropdown for interaction
Add the below script to the ‘onSelect()’ event of the dropdown. This permits the user to change the measures dynamically. The procedure is similar to the above, with the removal of existing measures occurring first continued by the addition of selected measures from the dropdown.
Chart_1.removeMeasure ( chart_measure, Feed.ValueAxis );
chart_measure = Dropdown_1.getSelectedKey();
Chart_1.addMeasure ( chart_measure, Feed.ValueAxis );
8. Now save and run the applications. You will be able to dynamically change the measures and dimensions as below:
On selecting Dimension: Country and Measure: Sales, it displays the Sales per Country for Actual.
On selecting Dimension: Country and changing Measure: Units, it dynamically displays the Units per Country for Actual.
On selecting Dimensions : Country and Representatives and changing Measure: Sales, it dynamically displays the Sales per Country, Representatives for Actual.
Conclusion
The above explained method helps the users to easily validate their data by changing the dimensions and measures dynamically in a widget. Instead of adding multiple charts for various dimensions and measures, in a single chart itself the designer can add and keep the dimensions and measures using scripts and so the user can dynamically change it and validate the data.
This blog discuss about how to dynamically change the dimensions and measures in widgets in SAP Analytics Cloud using scripting APIs. The scripting APIs in SAP Analytics Cloud can be used to provide custom interactivity an navigation to end users. The goal is to allow the user to dynamically change the dimension or measure of a chart(widget) at run time.
How it works?
Here we are creating a chart widget which shows Sales of an organisation according various dimensions and measures. We create checkbox to select the dimensions and dropdown to select the measure. Scripts are written for the chart widget, checkbox and dropdown, to dynamically change the measures and dimensions in run time. Finally when we run the application we can change the dimensions and measures. For example, we can select the measure as Sales in dropdown and dimension as State in checkbox. Then the chart will display the Sales according to States. Then you can change the dimension to City to see the Sales according to City. Likewise, you can change the measure value also.
Example:
Follow the below steps to dynamically assign measure and dimension to widgets.
- Create An Analytic Application
To create a new Analytic Application.
Select File -> Create -> Analytic Application
When creating an analytic application, you will get a page with designer interface containing the main canvas. The styling of the canvas can be done here.
- Add a chart and assign a data source
Select ‘Insert’ option in the toolbar and add a chart.
You will be prompted to choose a data source. Select the data model.
- Configure data assignment
Now the chart is placed in the canvas and an entry is made for the chart widget in the outline view in the left panel. But now the chart is empty so we have to start assigning dimensions and measures for the chart from the Builder panel in the right side. If the Builder panel is not available make sure that the ‘Designer’ option is in enabled mode on the top right side of the page.
Choose the chart structure. Here we select a column chart which shows Sales by Country. So add the dimension as Country and measure as Sales. Then add a checkbox group and dropdown from the ‘+’ symbol in the insert section.The configuration for these checkbox and dropdown have to be done to change dynamically.
- Configuration of Selector Widgets
The configuration of checkbox/dropdown can be done either by hard coding the values in the Builder panel or by populating the widgets using scripting. Here, we will use both the methods. Hard coding the values for checkbox and populating the dropdown by scripting.
In the Builder panel of the checkbox group, add the dimensions ‘Country’ and ‘Representatives’ and mark ‘Country’ as the default selection.
Now for the dropdown widget population, add the below script in ‘onInitialization()’ event of the main canvas. This script will fetch all the measures and populate them in the dropdown.
Goto layout panel on the left -> Canvas -> Edit Scripts -> onInitialization. Write the below script :
var measure_list = Chart_1.getDataSource().getMeasures();
for ( var i=0; i < measure_list.length; i++){
Dropdown_1.addItem ( measure_list[i].id, measure_list[i].description );
}
Dropdown_1.setSelectedKey(“[Account].[parentId].&[Sales]”);
Now save an Run the application by clicking the ‘Run Analytic Application’ button on the top right of the page. Now we can find that the selector widgets are populated with measures. But still we have not added the script measure/ dimension selection to be reflected in the chart.
- Create Global Variables
Create two global variables as ‘chart_dimension’ and ‘chart_measure’. The global variable ‘chart_dimension’ is a string array that can store selections from the checkbox group and ‘chart_measure’ is a string variable that stores the selected measure from the dropdown list. So give the type of global variables as string for both. Remember to assign the technical name of the measure ‘Sales’ as a default value to global variable chart_measure :
Default value : ‘[Account].[parentId].&[Sales]’
6. Configuration of the Checkbox group for interaction
Click the checkbox group from left - Edit Scripts - ‘onSelect’.
On the ‘onSelect()’ event of the checkbox add the below script. This script allows the user to select one or more dimensions to be shown on the chart. Remember that we have to initially clear all the existing dimensions from the chart before processing the chosen values in the checkbox group.
if ( chart_dimension.length > 0 ) {
for ( var i=0; i < chart_dimension.length; i++ ) {
Chart_1.removeDimension ( chart_dim[i], Feed.CategoryAxis );
}
}
chart_dimension = ArrayUtils.create(Type.string);
var dimension_list = CheckboxGroup_1.getSelectedKeys();
for ( var j=0; j < dimension_list.length; j++ ) {
Chart_1.addDimension ( dimension_list[j], Feed.CategoryAxis );
chart_dimension.push( dimension_list[j]);
}
7. Configuration of the Dropdown for interaction
Add the below script to the ‘onSelect()’ event of the dropdown. This permits the user to change the measures dynamically. The procedure is similar to the above, with the removal of existing measures occurring first continued by the addition of selected measures from the dropdown.
Chart_1.removeMeasure ( chart_measure, Feed.ValueAxis );
chart_measure = Dropdown_1.getSelectedKey();
Chart_1.addMeasure ( chart_measure, Feed.ValueAxis );
8. Now save and run the applications. You will be able to dynamically change the measures and dimensions as below:
On selecting Dimension: Country and Measure: Sales, it displays the Sales per Country for Actual.
On selecting Dimension: Country and changing Measure: Units, it dynamically displays the Units per Country for Actual.
On selecting Dimensions : Country and Representatives and changing Measure: Sales, it dynamically displays the Sales per Country, Representatives for Actual.
Conclusion
The above explained method helps the users to easily validate their data by changing the dimensions and measures dynamically in a widget. Instead of adding multiple charts for various dimensions and measures, in a single chart itself the designer can add and keep the dimensions and measures using scripts and so the user can dynamically change it and validate the data.
10 Comments
Bluesky| User | Count |
|---|---|
| 13 | |
| 9 | |
| 7 | |
| 6 | |
| 6 | |
| 6 | |
| 5 | |
| 5 | |
| 5 | |
| 4 |
