Archius ChartsPLUS™ is an add-on software product that greatly enhances the visualization capabilities of SAP BusinessObjects Design Studio, while reducing the overall time required to develop dashboards. With the addition of more than 60 chart types and the ability to modify nearly 250 different chart properties, developers can design state of the art visualizations to meet almost any business need. Developers are also provided with an API library that can be used for further extending charting capabilities and more importantly the ability to modify chart properties during runtime.

Gauges are a very common form of visualization, in this blog we look at how we can make gauges with dynamic functionality to control the values and color range limits.

See below some of the use cases where this feature can be used:

1) Re-use the same gauge for multiple KPI’s based on a user selection

2) Assign the color range thresholds based on the filter criteria for the current query. Example: Use a different threshold value for North America vs. Europe Example of Gauges: chartsplus-designstudio-gauges-design-Color range variable threshhold

Scripting in Design Studio to change Values and Color Ranges in ChartsPLUS Gauges during run time of the application: Add a ChartsPLUS component to the analysis application and in the additional properties click on Select Chart icon and then select the Angular gauge from Gauges.

chartsplus-designstudio-gauges-design-Selecting Angular Gauge

Now click on Data tab in the additional properties, select Dummy data Tab and enable Use Dummy Data Check box, and select Local Data from the dropdown for the Dummy Dataset property. Using the LocalData option we can set the DataSource value to the gauge via BIAL script on the application start up and the value can also be changes during runtime using BIAL script.

chartsplus-designstudio-gauges-design-Selecting Local Data

Now click on Labels & Values button and click on Number Formatting tab and set the Decimal property to 0.

chartsplus-designstudio-gauges-design-Gauge formatting

Now click on Button component from the Basic components of the components view and drag and drop in to the application below ChartsPLUS component. In the properties view of Button_1 component click on Text attribute and rename it to “Achievement” under display properties. Similarly add another Button component and place it beside Achievement button and rename it to “Customer Satisfaction Rate %”.

To the script editor of Achievement Button add the following script.

var val = DS_1.getData(“006EI3G4T7S1KKPZ6JHRZ1OW2”,{“006EI3G4T7S1KKPZ6JHRZ15XE”: “006EI3G4T7S1KKPZ6JHRZ1OW2”}).value;

var strVal = Convert.floatToString(val);

CHARTSPLUS_1.setProperty(“localDataKPI”, strVal);

Now to set up Color ranges to the gauge add the following script which enables to create three color ranges.

var colorRange = “{\”color\”:[“+

“{\”minValue\” : 0, \”maxValue\”: 2000, \”code\” : \”#FE7E37\”}” + // Range 1 “,

{\”minValue\” : 2000, \”maxValue\”: 5000, \”code\” : \”#049DE0\”}” + // Range 2 “,

{\”minValue\” : 5000, \”maxValue\”: 9000, \”code\” : \”#00C354\”}” + // Range 3 “]}”;

CHARTSPLUS_1.setProperty(“colorRange”, colorRange);

CHARTSPLUS_1.setChartTitle(“Achievement”);

chartsplus-designstudio-gauges-design-Script

Now click OK.

Now copy the above same script of Achievement button to the On Startup property of the application, which enables to show the Achievement data in the gauge on start up of the analysis application.

Now to the Customer Satisfaction Rate % button (Button_2) add the below script which enable to change the Data set to the Gauge and also the color ranges.

var val = DS_1.getData(“006EI3G4T7S1KKQ2MV3FWS4SI”, {“006EI3G4T7S1KKPZ6JHRZ15XE”: “006EI3G4T7S1KKQ2MV3FWS4SI”}).value;

var strVal = Convert.floatToString(val);

CHARTSPLUS_1.setProperty(“localDataKPI”, strVal);

var colorRange = “{\”color\”:[“+

“{\”minValue\” : 0, \”maxValue\”: 60, \”code\” : \”#CB1918\”}” + // Range 1 “,

{\”minValue\” : 60, \”maxValue\”: 90, \”code\” : \”#FF7E38\”}” + // Range 2 “,

{\”minValue\” : 90, \”maxValue\”: 100, \”code\” : \”#00C254\”}” + // Range 3 “]}”;

CHARTSPLUS_1.setProperty(“colorRange”, colorRange);

Also add the below script to change the title of the application on clicking Customer Satisfaction Rate % Button.

CHARTSPLUS_1.setChartTitle(“Customer Satisfaction Rate %”);

chartsplus-designstudio-gauges-design-Scripting

Now click OK.

Now save the application and execute the application locally or on BI Platform. On startup of the application click on Actual Sales button you observe 3 different color ranges and the values are set from 0 to 900K on the gauge. The needle in the gauge displays Achievement for the selected data as 500.

 

chartsplus-designstudio-gauges-design-Var color

Now click on Achievement button which enables to change the color ranges of the gauge and also the values from 0 to 100 during the run time of the application. The needle in the gauge displays the Customer Satisfaction Rate percentage for the selected data as 86.

chartsplus-designstudio-gauges-design- Var KPI

ChartsPLUS provides most of the Chart properties to be available for use at runtime using BIAL to create more dynamic visualizations.