Skip to Content
Author's profile photo Former Member

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.

Design Studio - Swapping charts into focus on demand

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).


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.

Object Panel

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).

Coding Panel

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.


Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Dirk Mayrock
      Dirk Mayrock


      very nice idea...!

      What is the SwapBuffer = 1 doing in the first line of the code?



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hey Dirk,

      "SwapBuffer" is a global variable that is used to implement the step-back functionality - it allows users to also click on the main chart to swap it back to it's original position. However, we have not shown this additional functionality in the video to keep the concept simple.

      Author's profile photo Former Member
      Former Member

      Nice Document, Please keep it up.



      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thank You Sushant !

      Author's profile photo Former Member
      Former Member

      Very nice and useful.

      I have done the same test and the swap works perfectly, however I am facing a problem.

      Once the swap is made, all the filters are gone. The dimensions selected for the

      Datasource just disappear and all the measures are shown with the aggregated values.

      Does anyone know why?

      Regards and thanks in advance.


      Author's profile photo Eshwar Prasanna
      Eshwar Prasanna

      Hi Francisco,

      The problem you are facing could be due to the fact that the swapping functionality is implemented by merely swapping the query used in the data sources on the target window chart and the chart which you click on.

      In order to be able to implement the same filters as well, you could try and use the "<data source>.getFilterExt" or "<data source>.getFilterText" to obtain the filters set on the source window's chart into a buffer variable, and the "<data source>.setFilter" or "<data source>.setFilterExt" to set this same filter on the target chart's data source.



      Author's profile photo Former Member
      Former Member

      Dear Eshwar,

      First of all, thanks a lot for help.

      I have tried your advise, however it did not work for me.

      Anyone has a new approach? I would really appreciate it.

      Thanks in advance and Regards,


      Author's profile photo Stefan Stefansson
      Stefan Stefansson


      Hi, what was the reply to this?


      Author's profile photo Former Member
      Former Member


      Could someone help me? I tried to put a panel over the chart, but I'm unable to click on the panel. Seems like the chart is on top of the panel.....Even though I've tried to change the sequencing of the objects.



      Author's profile photo Eshwar Prasanna
      Eshwar Prasanna

      Hi Joyce,

      Can you provide a screenshot of your outline view? I may be able to help you out with this.


      Eshwar Prasanna

      Author's profile photo Former Member
      Former Member

      Hi, Thanks for the offer, I figured it out already though. The chart must be a "child" of the panel....

      Author's profile photo Mithun Kumar Kesireddy
      Mithun Kumar Kesireddy

      Nice document!!

      I'm trying to make this work on a UNX. and it says DSL Connection cannot be done using assignDataSource. I tried using the setDataSource and still gives me error. Can you please tell me what I'm missing here

      DS_1.setDataSource("cuid:AeuDqlVbCVlPu20jjSV_OKs", DataSourceType.QUERY, DS2_DataSourceName);

      I tried with UNX name and the source name too, no luck.

      My version is 1.6 SP01 and 4.1 SP6 P4