Best Practice: Switch between Chart and Table

Learn how to switch between a chart and a table using a toggle feature in an analytic application of SAP Analytics Cloud, analytics designer.

Prerequisites

  • You've already added a table and a chart widget to your canvas and placed them on top of each other.

  • To follow this sample use case, use the model BestRun_Advanced as data source.

Context

To switch between chart and table, you add to the application one image that represents a chart and another that represents a table. Then you write scripts for each of the images so that when the user clicks on the chart image, the chart appears and the table is hidden, and vice-versa.

The default setting for running the application is to have the table visible and the chart invisible.

Procedure

  1. Select the table widget in your canvas and click Designer.
    1. Go to the Styling panel and under Actions, make sure that Show this item at view time is selected.
    2. Under Analytics Designer Properties, change the name of the widget to Table.
  2. Select the chart widget in your canvas and click Designer.
    1. Go to the Styling panel and under Actions, deselect Show this item at view time.
    2. Under Analytics Designer Properties, change the name of the widget to Chart.
  3. Add the images you want the application user to click when toggling between chart and table.

    For example: and .

    1. Click Start of the navigation path (Add...) Next navigation step ImageEnd of the navigation path.
    2. Optional: If you need to upload the images first, click Upload Image and upload your images.
    3. Select the chart image and click Insert.
    4. Repeat the above steps for the table image, and place the table image directly on top of the chart image.

      When the application user clicks on the chart image, the table image appears in the same place.

  4. To enable the switch between table and chart, you need to edit the names and then the scripts of both images. Change the name of the table image to Switch_to_Table_display, and the name of the chart image to Switch_to_Chart_display.

    You do this on the Styling panel under Analytics Designer Properties, or on the Layout panel under Start of the navigation pathCanvas Next navigation step Image_1 Next navigation step  More Next navigation step RenameEnd of the navigation path.

  5. To edit the chart image's script, select the chart image and click .

    The script editor opens the onClick script of this image. Here, you'll write a script that makes it possible to switch from the chart to the table.

  6. Enter this script:
    Sample Code
    Chart.setVisible(true); 
Table.setVisible(false); 
Switch_to_Table_display.setVisible(true); 
Switch_to_Chart_display.setVisible(false);

    This script makes the chart visible and the table invisible and it sets the visibility of the table image to true and the visibility of the chart image to false. You have configured the application in a way that, when the chart is visible, the table image is visible indicating that the user can switch back to the table.

  7. Select the table image and click .
  8. Enter this script in the script editor:
    Sample Code
    Chart.setVisible(false); 
Table.setVisible(true); 
Switch_to_Table_display.setVisible(false); 
Switch_to_Chart_display.setVisible(true);

    This script makes the table visible and the chart invisible and it sets the visibility of the chart image to true and the visibility of the table image to false. You have configured the application in a way that, when the table is visible, the chart image is visible indicating that the user can switch back to the chart.

  9. Save the application and click Run Analytic Application.

Results

When you run the application, it looks like this:

The table is displayed, because you've set it to default.

When you click on the chart image, the chart appears instead of the table and the image changes its look to a table icon:

When you click on the table image, the table appears instead of the chart and the image changes its look to a chart icon, as shown in the above screenshot showing the default view when you first run the application.