SAP Design Studio Tips and Tricks #1: Swapping charts into focus on-demand

In this series of blogs on SAP Design Studio, we will explore simple but powerful tips and tricks.

* * *

Dashboards often contain multiple views in a single pane. However typical dashboard users process one chart or table at a time except in cases where data needs to be compared. Under such circumstances, designers have the option to go for one of the two UI design patterns

• Show only one chart at a time, and toggle to other charts upon user interaction OR
• Distribute the screen space amongst the charts more or less equally based on the charts’ importance.

SAP Design Studio however makes a third approach possible. You could allocate a higher proportion of real estate to one chart (say, 75%), and render miniature versions of other charts on the right or at the bottom (see image). Typically these miniature charts would not have legends or series labels. You could then swap the main chart with other charts on-demand by leveraging a combination of scripting functions.

In SAP Dashboards (Xcelsius), you could achieve this only by having duplicate charts (where the chart types differ) and manipulating dynamic visibility. In SAP Design Studio, you can accomplish the above without requiring additional or duplicate charting components. The chart type, data source and presentation format can all be managed through scripting.

Note that the charts on the right in the example above are not thumbnails, but actual miniaturized charts. There is an additional benefit to this design – users can now observe how selections done to the main chart impact other visualizations (well, at least when the impact is major).

HOW WE ACHIEVED THIS:

The basic functionality can be achieved by the following components

• 2 Grid Containers
• 3 Panels
• 3 Charts
• 1 Global Variable
• 1 Button/Image/Text component

There are 3 Data Sources one for each chart, and additional non-functional components (e.g. Company Logo)

On the right side, one transparent panel is placed over each chart to enable the user drag and drop the charts into the main window. This also prevents the user from accidentally making a selection in the miniature charts.

The following code executes the swap. This has to be added to the OnClick() event of both the panels with some obvious minor changes. The conditional statement at the end that checks a global variable before logging (optional).

It goes without saying that the above framework can be extended to accommodate additional miniature charts. Additional functions can also be added to make this a comprehensive application.

Source: http://www.visualbis.com/blogs/design-studio/2013/08/19/sap-design-studio-tips-and-tricks-1/