Detach a data control from a frame


1. Overview

This article shows you how to detach a data visualization control from a frame component by using JavaScript.

2. Using a frame component

The way to use a frame component is to place an existing data visualization control (e.g., a chart) on top of the frame component.

For example, suppose you have the following dashboard with an existing metric set (chart) and a frame component:

Existing chart and frame component
Existing chart and frame component

Simply drag the chart and place it over the frame. Then reposition the chart and resize it as you like. In this case, there is no association between the chart and the frame. For example, if you reposition the frame, the chart will stay in the same place.

Place existing chart onto the frame
Place existing chart onto the frame

You can group the chart and the frame. This allows you to reposition both elements as a single unit.

2.1. Attaching a metric set to the frame

Until version 2.6, you could drag a metric set from the EXPLORE window directly to the frame.

The metric set would appear as a chart (for example) that fills up the content area of the frame. The chart is attached to the frame and will resize in concert with the frame.

3. Detach a data control from its frame

If you have a metric set (chart) that is attached to a frame, there is no way to detach it by using the UI. You need to run a script to do this.

As an example, add a button component to your dashboard. Go to the Properties window for the button, expand its Click interaction, and then add a script.

In the Script Editor, enter the following JavaScript code. The code basically gets the adapter (chart), detaches it, gives it a default width and height, and then adds it back to the view.

var containedAdapter = this.baseViewService.currentView.getAdapters()[0].getContainedAdapters()[0];
containedAdapter.width = 100;
containedAdapter.height = 100;

Add a script to detach the chart from the frame
Add a script to detach the chart from the frame

To run the script, switch to View mode and click the button. You should see the chart removed from the frame and positioned elsewhere on the canvas.

Chart is now detached from frame
Chart is now detached from frame

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