Best Practice: Switching between Chart and Table
Learn how to switch between a chart and a table using a toggle feature in an analytic
application.
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
-
Select the table widget in your canvas and click
Designer.
-
Go to the Styling panel and under
Actions, make sure that Show this
item at view time is selected.
-
Under Analytics Designer Properties, change the
name of the widget to Table.
-
Select the chart widget in your canvas and click
Designer.
-
Go to the Styling panel and under
Actions, deselect Show this item
at view time.
-
Under Analytics Designer Properties, change the
name of the widget to Chart.
-
Add the images you want the application user to click when toggling between
chart and table.
For example: and .
-
Click .
- Optional:
If you need to upload the images first, click Upload
Image and upload your images.
-
Select the chart image and click Insert.
-
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.
-
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 .
-
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.
-
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.
-
Select the table image and click .
-
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.
-
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.