This blog explains how you can you the "Lasso selection" feature and Chart API getSelectedMembers available in Design Studio 1.4 which allows us to select multiple series members from a Chart. The Lasso selection allows you to select an area of the charts and the chart selection can be used to filtering the data set, passing the selection to other application, zooming in on the chart etc.
Demo video below (details on implementing this is give below).
We look at 3 different scenarios which this feature can be used for:
1) Scenario 1: Filter another component within the application based on the chart selection.
2) Scenario 2: Pass the filter selection to AOLAP application
3) Scenario 3: Zoom in on an chart selecting certain section
Scenario 1: Selecting Multi series/ filtering based on the On Select Event of the Chart
1) Add Data Source DS_YEAR with Year and select the required Measures.
2) Add Data Source DS_MONTH with Month and Measures. Make sure the filter object (in this case the Year Dimension selected in data source DS_YEAR) is available in this Data Source (does not have to included in the rows or columns).
3) Add a Chart to the Layout and assign Data Source DS_YEAR.
Change the Chart Type to Column
Check the "Selection Mode" for the Chart under the "Additional Properties" panel and set to "Inclusive". This setting will let you select multiple series on the Chart.
To filter the Customer Dimension Selected from Chart on Data Source DS_MONTH add the code below to the "On Select" event (highlighted above) of the Chart.
This will pass the dimension list selected from the chart to the DataSource filter command. When a user click o a new series the filter command will be triggered and all the dimensions selected so far far will be used to filter the datasource.
DS_MONTH.setFilter("0CALYEAR", CHART_1.getSelectedMembers("0CALYEAR"));4) Add a Cross-tab to the layout and assign Data source DS_MONTH
5) Execute the application and select a Data Series from the Chart and the Cross-tab will be filtered to the selected Data series, you can select multiple series by clicking on the Plot area or the legend or using the Lasso feature by selecting multiple series by holding the mouse button . In the example below 3 series will be selected (2012, 2013, 2014).
The selected chart series can be cleared by clicking on out side of the series area or by providing a button or icon with the code below.
CHART_1.clearSelection();
Scenario 2: Multi series selection to pass the values to an Open Document URL
You can manually read the selected series value and pass the parameters to another application or an Open Document URL, you can read the selected series values into an Dimension Arrayand loop thru the array to form the URL with all the selected values.
Add a button or icon to the application layout.
In the example below you an Open Document URL is formed based on the selection from the Chart. The syntax below is for passing the selected month values to an Open Document URL for AOLAP document. In the example below ZCALYRM is the technical name of the variable in the BW BEx query.
Please note the that based on the type of document (WebI, Crystal etc.) the syntax will changes, please refer to Koen Hesters blog for more details on the exact syntax. Link
//Dimension array with the selected series values
var dimarray = CHART_1.getSelectedMembers("0CALMONTH");
var dimval = "";
//OpendDoc URL with the target report CUID and variable value
var URL = "/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&iDocID=AfecEhC69V1Gl4w23y8JTUQ&lsMZCALYRM=";
//Adding the selected chart series memebers seperated by ; to the OpenDoc URL
dimarray.forEach(function(element, index) { dimval = element.externalKey; URL = URL + dimval + ",";
});
//Opening the OpenDoc URL in a new window.
APPLICATION.openNewWindow(URL);This is a great feature which can definitely help with the usability of Design Studio applications.
Scenario 3: Zoom in based on Lasso selection
If you have too many data points on the chart and want to zoom in on a particular section of the chart you could use the lasso selection to select the series and set the filter to the datasource which is used by the chart.
In the example select a Bubble Chart. Add a DataSource with Sold to Party and 3 measures (Sales, Margin and Margin%).
Add the following code to the On Select event of the Chart.
DS_CUST.setFilter("0D_NW_SOLD", CHART_2.getSelectedMembers("0D_NW_SOLD"));Selecting the dataseries using the Lasso selection.
Zoomed in chart based on the data selection, you can notice that the axis min and max values also will adjust based on the filters applied.
Limitations: Lasso feature did not work on IE 11 (checked in IE compatibility mode also) and iPad Mobile app and Safari browser.
The Lasso selection is a great feature in Design Studio which helps with the usability of Design Studio applications.