Use button to show and hide chart with scripting

Contents[Hide]

1. Overview

This article shows you how to program a button component to show and hide a chart.

For example, you have two charts, but want to display one before doing the other. Then add a button to your dashboard to allow users to display one dashboard, and hid the other one.

The basic idea is to add a script to handle the hidden option if the chart is visible or not.

2. Create a chart

For this example, we create a simple line chart.

Chart Example
Chart Example

3. Designing the Dashboard

To start, check on the Properties dialog, and look for the Script Name of the chart you wish to show and hide.

Script Name of the Metric Set
Script Name of the Metric Set

Next, click the dashbord canvas (to de-select any items), go to the toolbar, and click Components. From the dropdown toolbar, locate the Button component and click it.

Add button in the canvas
Add button in the canvas

A button component is added to the dashboard canvas.

4. Add a script

Select the button on the canvas, and click the Properties tab.

Under Main > ACTIONS > Click, click the plus sign button to add the script to handle this action.

Add script for button
Add script for button

Click the newly added script 1 to open the Script Editor.

Add the JavaScript code into the Script Editor:

// Change the Chart to Hide or Show
if (chart1.hidden == true){
chart1.hidden = false;}
else{
chart1.hidden = true;}

Script Editor for button
Script Editor for button

If you're performing the steps in this article, ensure that the chart's Script Name is replaced on the script.

Click Build in the Script Editor.

In the canvas, go to Main > ACTIONS > Loading, and click the plus sign to add another script to handle this action.

Add script for the canvas
Add script for the canvas

Click the newly added script 2 to open the Script Editor.

Add a one-line code into the script editor, so that it would display the metric set when it gets loaded:

chart1.hidden = false;

Script Editor for canvas
Script Editor for canvas

Click Build in the Script Editor.

5. Testing - Using the button

Switch to View mode, and then use the button to show and hide the metric set.

Chart showing
Chart showing

Chart hiding
Chart hiding

6. Show/Hide Layers

Option 1 - Using Layer index number:

this.baseViewService.currentView.layerAdapters[0].hidden = true;

Option 2 - Using Layer name:

var myView = this.baseViewService.currentView;
var myLayer = myView.layerAdapters.toEnumerable().first(function (la) {
    return la.name === "Layer1";
});
myLayer.hidden = true;

7. See also

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri