Skip to Content

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

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.

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.

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

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

    1. Aakanksha Rajan 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.

      (0) 
  1. Francisco Rodriguez

    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.

    Francis

    (0) 
    1. 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.

      Regards,

      Eshwar

      (0) 
      1. Francisco Rodriguez

        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,

        Francisco

        (0) 
  2. Joyce Tong

    Hi,

    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.

    Regards,

    Joyce

    (0) 
  3. 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

    Thanks!

    MK

    (0) 

Leave a Reply