It is a well-established best practice for dashboards and analytical applications to have consistent colors across components and views to identify specific measures (eg. Sales Amount is always Blue, Sales Quantity is always Gray) or specific dimension values (eg. Laptop Sales = Green, Desktop Sales = Yellow). However, when filtering and interactive drill-downs are involved, it may not be as straightforward to consistently and intuitively associate colors to specific measures.

At times, we get unique requirements like to assign dynamic colors for each measure during runtime. These kinds of complex scenarios are attained by using the Charts component from Visual BI’s Extensions for SAP BusinessObjects Design Studio (VBX). All you need to have is a better understanding of a particular API used in BIAL scripting-

DSXSetOnDemandScript(propName, propValue)

OnDemandScript:

It is an API that allows us to change the value of all properties of the chart during Runtime which are all available in Design time. For example, I want to change a property called plotbackgroundcolor during Runtime and it doesn’t have a predefined API. In that case, onDemandScript helps.

Example:

Let’s say we have 3 charts

Using Consistent Colors Across Visualizations in SAP Design Studio - 1

Primary Chart – Funnel chart that controls the secondary charts. This chart shows value among CRM Phases.

Secondary Charts – Bar Charts that show value by ‘Region’ and by ‘Channel’. They show data with color of the selected CRM Phase on the funnel chart.

Now the unique requirement is this-  If a member of Primary chart is selected, then color of selected member will be sent to the secondary charts. We don’t have predefined API for this. So here, OnDemandScript comes handy. For example, if the member ‘Lead’ is selected in the Primary Chart which is in color (#8CBCB9), the Bar Charts will show the Lead values with same colour (#8CBCB9)

Using Consistent Colors Across Visualizations in SAP Design Studio - 2

How do we achieve this?

We need the property of series color to change color of the secondary charts during runtime using  OnDemandScript. In order to get the property we have to look at content.biapp – which can be found after exporting the application.

To export the application, go to File -> Export. You’ll get this popup window-

Using Consistent Colors Across Visualizations in SAP Design Studio - 3

Click next. Enter a save location and file name.

Using Consistent Colors Across Visualizations in SAP Design Studio - 4

Click finish to get the ZIP(.zip) file. This will get you to content.biapp.

Using Consistent Colors Across Visualizations in SAP Design Studio - 5

Open the file using a text editor. The file contains all properties of the application which are arranged by component name.

Since I’ve used a single measure for all the charts, the property name is same for all except Maps.  Get the Property name and measure ID of the secondary charts.

Using Consistent Colors Across Visualizations in SAP Design Studio - 6

For every selection on the Funnel chart, the Bar charts will show the corresponding values with the color of the selected slice. Add the following code in ‘On Select’ of the Funnel Chart.

Using Consistent Colors Across Visualizations in SAP Design Studio - 7

Here, the variable ‘Key’ is the selected member’s key value. You may also use the member’s text instead of its key.

VBX_CSLSMAG_REG.DSXSetOnDemandScript("measurecolorpair",
"{\"4VGQHPLMQO3BBFMI7ZCFZMQ4C\":{\"color\":\"#8CBCB9\"}}");

Here, ‘Measurecolorpair’ is the property and {\”4VGQHPLMQO3BBFMI7ZCFZMQ4C\”:{\”color\”:\”#8CBCB9\”}} is the value. “\” is escape character.

This is possible in Design studio’s native charts by using CSS (nth – Child), but it doesn’t work dynamically since CSS is static. As an example, consider solving the same using CSS. We would have to write CSS for every bar element. ‘By Region’ (1st Bar) Chart has 5 bars, so we would have to write four CSS blocks for the 5 children. If the values are fixed, it will work fine. But, if number of values change dynamically, everything gets messed up and we should write CSS again to deal with the same.

OnDemandScript solves these problems in a much simpler way.

Using Consistent Colors Across Visualizations in SAP Design Studio

Want to know more? Click here to get in touch.

5600 Tennyson Pkwy
Suite 120
Plano TX 75024.

+1 888-227-2794

+1 972-232-2233

+1 888-227-7192

solutions@visualbi.com