416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.
Dashboard v5.0

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Drill-Down, Hover Over, Pop-Up And Working With Parameters

Hide navigation
RSS
Modified on Tue, 17 Jun 2014 02:40 PM Categorized as Design, Level-Intermediate, Parameters
Click to return to: Documentation | Designing Dashboards


Overview

This article presents some examples of using dashboard parameters and setting up interactions for filtering, drill-down and hover-over.

Tip: These examples generally apply to performance dashboards. However, analytical dashboards can also have parameter controls. See Designing Analytical Dashboards for more details.

Interactions

Drill-down to the same dashboard

The following example shows how to implement drill-down functionality, which lets users click on a data point to see the next level of detail. In the example, a parameter is connected to a KPI filter with the following attributes:

  • The filter is defined on a standard dimension.
  • The standard dimension appears on the visualization axis.
  • The grain on the visualization axis is user-selectable (&ie; dashboard viewers can interactively change the dimension level displayed by the visualization axis).

The dashboard before drill-down (on Audio products).

The dashboard before drill-down (on Audio products).

The dashboard after drill-down.

The dashboard after drill-down.


To create the above dashboard:

  1. Create a KPI with the following attributes:
    • Name: Downloads By Product
    • Measure: Number of Downloads
    • Instant dimension: Product ID
    • Visualization axis: Product ID
    • Preferred visualization: Bar Chart
  2. Replace the Product ID instant dimension with an existing standard dimension called Product, which has two levels: Product Group and Product.
  3. Define a filter on the existing dimension with the following attributes:
    • Public: Yes
    • Allow the (All) member to be selected: Yes
    • Default Dimension Grain: Product Group
    • User selectable grain: Yes
    • Default value: (All)
      Defining a grain filter.
  4. Create a new dashboard.
  5. Drag your KPI to the design canvas. The KPI appears as a data visualization control (⪚ bar chart).
  6. Create a new dashboard Grain parameter and connect it to the KPI's grain filter. (A Grain parameter is required for true drill-down behavior. Regular parameters can only be used for filtering.)
    Connect parameter to grain filter.
  7. Click the menu button of the data visualization control.
    Menu button of DV control.
  8. From the menu, choose Set up Drill-Down. The Drill-Down Setup wizard is displayed.
    • In the first step of the wizard:
      • Select the This dashboard option.
      • Choose the type of cursor you want when the user hovers over a data point.
        Drill-Down Setup Wizard Step 1.
      • Click Next.
    • In the third step of the wizard:
      • Choose the grain filter as the input source value to be passed to the parameter in the target dashboard (which is the same as the source dashboard for this example). In the figure below, the grain filter item in the dropdown list is named Product Grain and Filter. In this case, the Product portion is the name of the dimension to be drilled into. If you are using a dataset instead of a KPI, and the dataset has multiple dimensions that can be drilled into, you will see a grain and filter item in the dropdown list for each such dimension.
        Drill-Down Setup Wizard Step 3.
    • Click Finish. The wizard closes and automatically generates a drill-down script for the data visualization control. You can view this script from the Properties grid for the control, via its Click Interactions property.
  9. Save and check in the changes to your dashboard.
  10. View your dashboard from the Design Explorer and test drill-down by clicking on a data point.

Note: Every time you run the drill-down setup wizard, a new On Click interaction script is added to the control.

Drill-down to another dashboard

This example shows how to link a source dashboard to a target dashboard via drill-down:

The source dashboard before drill-down (on Product ID = 2).

The source dashboard before drill-down (on Product ID = 2).

The target dashboard after drill-down.

The target dashboard after drill-down.


  1. Create a KPI for the source dashboard with the following attributes:
    • Name: Downloads By Product
    • Measure: Number of Downloads
    • Instant dimension: Product ID
    • Visualization axis: Product ID
    • Preferred visualization: Bar Chart
  2. Create a KPI for the target dashboard with the following attributes:
    • Name: Downloads By Date
    • Measure: Number of Downloads
    • Instant dimension: Download Date
    • Instant dimension: Product ID
    • Visualization axis: Download Date
    • Preferred visualization: Line Chart
    • Filter on Product ID instant dimension:
      • Public: Yes
      • (All) and open ranges allowed for value selection: Yes
      • Allow single value selections: Yes
      • Default value: All values
  3. Create the source dashboard:
    • Drag the source KPI, Downloads By Product, to the design canvas. A bar chart appears.
    • Save and check in your changes.
  4. Create the target dashboard:
    • Drag the target KPI, Downloads By Date, to the design canvas. A line chart appears.
    • Create a parameter, TargetParam, and connect it to the KPI's filter.
    • Save and check in your changes.
  5. Edit the source dashboard again:
    • Click the menu button of the bar chart.
    • From the menu, choose Set up Drill-Down. The Drill-Down Setup wizard is displayed.
    • In the first step of the wizard:
      • Choose the Another dashboard option.
        Drill to another dashboard.
      • Click Next.
    • In the second step of the wizard:
      • Expand the project folder that contains the target dashboard.
      • Expand the Dashboards folder.
      • Select the target dashboard.
        Select target dashboard.
      • Click Next.
    • In the third step of the wizard, choose the input source and target parameter:
      • Click Add Parameter.
      • Choose the Input Source to be the Axis Label value.
      • Choose the Target Parameter.
        Input source and target parameter.
      • Click Finish. The wizard closes and automatically generates a drill-down script for the bar chart. You can view this script from the Properties grid for the chart, via its Click Interactions property. An example script is shown below.
  6. Save and check in the changes to the source dashboard.
  7. View the source dashboard from the Design Explorer and test it by clicking on a data point.

The target dashboard is displayed and shows the data corresponding to the data point (&ie; Product ID) that was clicked.

Sample drill-down script for the bar chart:

// Ensure the clicked data point was found. It's possible it won't be, // if something went wrong. if (e.DataPoint != null) { // Create a new parameter info collection. This is what is used to pass // parameters from one dashboard to another. It's similar to how a // querystring works. ParameterInfoCollection parms = new ParameterInfoCollection(); // Set up the target parameter. ParameterInfo param; param = new ParameterInfo(); param.ParameterName = "TargetParam"; param.GrainLevel = e.GrainLevel; { DashboardFilterValueData filterData = new DashboardFilterValueData(); filterData.SingleValue = e.GetDataPointAxisValue(); param.FilterValues.Add(filterData); } parms.Add(param); // Use the services to navigate to the target dashboard, giving it the // parameterinfocollection so that it can set the values. services.NavigateToDashboard("0e46fad1-6318-49a7-904f-4e61a70b7a4e", parms); }

Note: Every time you run the drill-down setup wizard, a new On Click interaction script is added to the control.

Note: If your chart (or other data control) has multiple data descriptors (⪚ KPIs/datasets), the generated drill-down script will only apply to the first data descriptor. If you want to drill-down from the other data descriptors, you will need to write a custom drill-down script. This limitation also applies if you are using hover-over instead of drill-down.

Drill-down to another URL

This example shows how to link a dashboard to a target URL that requires parameters via drill-down. This can be done by passing the paramteres to the URL query string (e.g. http://www.yahoo.com/login.aspx?username=John)

The source dashboard before drill-down (Toshiba stock symbol = TOSBF.PK).

The source dashboard before drill-down (Toshiba stock symbol = TOSBF.PK).


The target URL (Toshiba Stock page) after drill-down. Notice the symbol of the stock was passed as a parameter to the URL.

The target URL (Toshiba Stock page) after drill-down. Notice the symbol
of the stock was passed as a parameter to the URL.


  1. Create a Data set for the dashboard with the following attributes:
    • Name: Semiconductors Industry Market Share
    • Columns: Symbol,CompanyName,Market Share
    • Preferred visualization: Data Grid
    • Filter on Symbol:
      • Public: Yes
      • (All) and open ranges allowed for value selection: Yes
      • Allow single value selections: Yes
      • Default value: All values
  2. Create the dashboard:
    • Drag the target KPI, Semiconductors Industry Market Share, to the design canvas. A data grid appears.
    • Save and check in your changes.
  3. Edit the source dashboard again:
    • Click the menu button of the data grid.
    • From the menu, choose Set up Drill-Down. The Drill-Down Setup wizard is displayed.
    • In the first step of the wizard:
      • Choose the URL option.
        Drill to URL.
      • Click Next.
    • In the next step of the wizard, choose the input source, matching target parameter and the target URL:
      • Click Add Parameter.
      • Choose the Input Source to be the Axis Label value.
      • Type in the Target Parameter.
      • Type in the URL.
        Input source, target parameter and URL.
      • Click Finish. The wizard closes and automatically generates a drill-down script for the data grid. You can view this script from the Properties grid for the data grid, via its Click Interactions property.
  4. Save and check in the changes to the dashboard.
  5. View the dashboard from the Design Explorer and test it by clicking on one of the rows in the data grid.

The URL is displayed and shows the data corresponding to the row that was clicked.

Note: Every time you run the drill-down setup wizard, a new On Click interaction script is added to the control.

Hover-over to the same dashboard

To create a hover-over dashboard (which appears when you hover over a data point) instead of a drill-down:

A hover-over dashboard.

A hover-over dashboard.


  1. Set up a KPI with a grain filter and connect it to a dashboard parameter exactly as shown in the previous example.
  2. Click the menu button of the data visualization control.
    Menu button of DV control.
  3. From the menu, choose Set up Hover-Over. The Hover-Over Setup wizard is displayed.
    • In the first step of the wizard:
      • Select the This dashboard option.
      • Choose the type of cursor you want when the user hovers over a data point.
      • Set the width and height of the popup window.
        Hover-Over Setup Wizard Step 1.
      • Click Next.
    • In the third step of the wizard:
      • Choose the grain filter as the input source value to be passed to the parameter in the target dashboard (which is the same as the source dashboard for this example).
    • Click Finish. The wizard closes and automatically generates a hover-over script for the data visualization control. You can view this script from the Properties grid for the control, via its Hover Interactions property.
  4. Save and check in the changes to your dashboard.
  5. View your dashboard from the Design Explorer and test it by hovering over a data point.

Note: Every time you run the hover-over setup wizard, a new On Hover interaction script is added to the control.

Note: The hover-over dashboard's Re-Size Mode property is ignored when the hover-over is displayed. Instead, the hover-over dashboard is always scaled to fit exactly inside the requested width/height of the popup window while maintaining the original aspect ratio.

Tip: The hover-over dashboard is displayed without any frame or border decoration. If you want to see a border, add it to the hover-over dashboard itself.

Creating a popup dashboard

To create a popup dashboard (which appears when you click a data point) instead of a drill-down:

A popup dashboard.

A popup dashboard.


  1. Set up a KPI with a grain filter and connect it to a dashboard parameter exactly as shown in the drilldown example.
  2. Click the menu button of the data visualization control.
    Menu button of DV control.
  3. From the menu, choose Set up Popup. The Popup Setup wizard is displayed.
    • In the first step of the wizard:
      • Select the This dashboard option.
      • Choose the type of cursor you want when the user hovers over a data point.
      • Set the width and height of the popup window.
        Popup Setup Wizard Step 1.
      • Click Next.
    • In the third step of the wizard:
      • Choose the grain filter as the input source value to be passed to the parameter in the target dashboard (which is the same as the source dashboard for this example).
        Choose parameters to pass to dashboard.
    • Click Finish. The wizard closes and automatically generates a popup script for the data visualization control. You can view this script from the Properties grid for the control, via its Click Interactions property.
  4. Save and check in the changes to your dashboard.
  5. View your dashboard from the Design Explorer and test it by clicking on a data point.

Working with parameters

Stored procedure parameters

This example shows how to control a stored procedure parameter from your dashboard. A stored procedure parameter is like a filter. If you change the value of such a parameter, the data results returned by the stored procedure will be different. In this particular example, the possible values for the stored procedure parameter come from a look-up (virtual) table, which saves you from having to enter the values manually.

A dashboard with a dropdown that controls a stored procedure parameter.

A dashboard with a dropdown that controls a stored procedure parameter.


  1. Create a data connector for a data source that contains the following stored procedure (e.g. from the Microsoft Northwind sample database):
    • Stored procedure name: SalesByCategory
    • Stored procedure parameters: CategoryName, OrdYear
    • Stored procedure returns these columns: ProductName, TotalPurchase
  2. Create a standard virtual table, Categories, which provides the IDs and names of all possible product categories.
  3. Create a virtual table that is based on the SalesByCategory stored procedure:
    • Virtual table name: SalesByCategoryVT
    • Virtual table columns: ProductName, TotalPurchase
    • Go to the Preview tab and set up the CategoryName stored procedure parameter:
      • Type of stored procedure parameter: Standard Parameter
      • Public: Yes
      • Look-up table: Choose the virtual table, Categories, which provides the IDs and names of all possible product categories.
        Select look-up table.
      • Default value: Seafood
    • Set up the OrdYear stored procedure parameter:
      • Type of stored procedure parameter: Standard Parameter
      • Public: No
      • Default value: 1996
        Preview of virtual table.
  4. Create a KPI based on the virtual table:
    • KPI name: Sales By Category
    • Measure: TotalPurchase
    • Instant dimension: ProductName
    • Visualization axis: ProductName
    • Go to the Preview tab and set up the external child structure filter, CategoryName:
      • Public: Yes
        KPI Preview.
  5. Create a new dashboard:
    • Drag the Sales By Category KPI to the design canvas.
    • Create a new dashboard parameter and connect it to the KPI's CategoryName filter. In the last step of the wizard, select the option, Load names and values dynamically from the external virtual table.
      Load values from external virtual table.
    • Drag the dashboard parameter to the design canvas. The parameter appears as a dropdown list control.
    • Save, then preview the completed dashboard.

You have created a dashboard with a dropdown list that controls a stored procedure parameter.

A dashboard with a dropdown list that controls a stored procedure parameter.

A dashboard with a dropdown list that controls a stored procedure parameter.


Note: If you didn't choose the option to load names and values dynamically, you would have to enter the possible filter values manually via the Dashboard Parameter Editor wizard after dragging the dashboard parameter to the design canvas.

Stored procedure with date-time parameters

This example shows how to control two stored procedure parameters, which define the start and end of a date range:

A dashboard with two parameters for specifying a date range.

A dashboard with two parameters for specifying a date range.


  1. Create a data connector for a data source that contains the following stored procedure:
    • Stored procedure name: SalesByYear
    • Stored procedure parameters: Beginning_Date, Ending_Date
    • Stored procedure returns these columns: ShippedDate, OrderID, Subtotal, Year
  2. Create a virtual table that is based on the SalesByYear stored procedure:
    • Virtual table name: SalesByYearVT
    • Virtual table columns: ShippedDate, OrderID, Subtotal, Year
    • Go to the Preview tab and set up the Beginning_Date stored procedure parameter:
      • Public: Yes
      • Default value: 01/01/1996
    • Set up the Ending_Date stored procedure parameter:
      • Public: Yes
      • Default value: 31/12/1996
        Preview of virtual table.
  3. Create a KPI based on the virtual table:
    • KPI name: Sales By Date
    • Measure: Subtotal
    • Instant dimension: ShippedDate
    • Visualization axis: ShippedDate
    • Preferred visualization: Line Chart
    • Go to the Preview tab and set up the external child structure filter, Beginning_Date:
      • Public: Yes
    • Set up the external child structure filter, Ending_Date:
      • Public: Yes
        Set up external filters.
  4. Create a new dashboard:
    • Drag the Sales By Date KPI to the design canvas.
    • Create a new dashboard parameter and connect it to the KPI's Beginning_Date filter.
    • Drag the dashboard parameter to the design canvas. The parameter appears as a date-time input control.
    • Create a second dashboard parameter and connect it to the KPI's Ending_Date filter.
    • Drag the dashboard parameter to the design canvas. The parameter appears as a date-time input control.
    • Save, then preview the completed dashboard.

You have created a dashboard that lets the user control two stored procedure date-time parameters, which specify a date range.

Navigate to a dashboard

This example shows how to navigate to another dashboard on a button click. You can also apply this example to other general controls such as Ellipse, Frame, Horizontal Line, Hyperlink, Image, Label, Rectangle and Vertical Line.

  1. Create a new dashboard.
  2. Drag a button control from the toolbox to the dashboard canvas.
  3. Select the button control and click its menu button in the top-right corner (or do a right-click over the control). From the menu, point to Interactions, then choose Set up Drill-Down.
    Access button Interactions menu.
  4. In the first step of the Drill-Down Setup wizard, select Another dashboard, then click Next.
  5. In the second step of the wizard, select a target dashboard to navigate to.
  6. Since no parameters are involved, click Finish.

A one-line Click interaction script is automatically generated for the button control:

services.NavigateToDashboard("7bcebd59-d425-4f29-9ea4-73033d50d515");

Tip: You can use this technique to implement “tabs” that take you to other dashboards when clicked.

Token menu appearance

Most parameter control types support the following properties which let you customize the appearance of the token menu and/or the token menu button:

  • Token Menu Font Size - Use this to change the font size of token menu text.
  • Token Menu Font Brush - Use this to change the color of the token menu text.
  • Token Menu Background - Use this to change the background color of the token menu.
  • Token Button Background - Use this to change the background color of the token menu button.
  • Token Button Border - Use this to change the border color of the token menu button.

Token menu appearance properties.

Token menu appearance properties.


Token menu and button for a date-picker/calendar control.

Token menu and button for a date-picker/calendar control.


Virtual cube query parameters

Virtual cube query parameters are used to filter an OLAP cube's content before the KPI/dataset data is retrieved by the (performance) dashboard.

To set up a dashboard parameter based on a virtual cube query parameter, you must first define the query parameter at the virtual cube level. An example is a CountryFilter query parameter as shown in the figure below.

Define a virtual cube query parameter.

Define a virtual cube query parameter.


When you create a KPI or dataset based on the virtual cube, the query parameter will be exposed as an external filter as shown in this figure below from the KPI Preview tab. You must configure this external filter and make it Public in order to connect it to a dashboard parameter when designing your dashboard.

KPI Preview shows the query parameter as an external filter.

KPI Preview shows the query parameter as an external filter.


At the dashboard level, create a new dashboard parameter and choose the Virtual Cube Filter option.

Set Up a Dashboard Parameter - Virtual Cube Filter option.

Set Up a Dashboard Parameter - Virtual Cube Filter option.


In the second step of the parameter wizard, select the external filter from the KPI.

Set Up a Dashboard Parameter - Step 2.

Set Up a Dashboard Parameter - Step 2.


In the third step of the parameter wizard, select the parameter control type. In the figure below, the Hierarchy control is selected automatically.

Set Up a Dashboard Parameter - Step 3.

Set Up a Dashboard Parameter - Step 3.


The newly created parameter appears in the Parameters toolbox.

Parameters toolbox.

Parameters toolbox.


Drag the parameter to the dashboard, and then preview the dashboard. In the example figure below, the parameter appears as a dropdown list.

Hierarchy control in dropdown mode.

Hierarchy control in dropdown mode.


Select All versus All values

The Select All option is available for multiselect parameter controls like the Check Box List. This option lets you choose all items that the parameter control has been configured with, which may be a subset of all available filter values.

Select All option for Check Box List.

Select All option for Check Box List.


The All values option is available from the token menu of a parameter control, and can also be set as the default value. This option is the same as choosing all possible filter values.

All values option for Check Box List.

All values option for Check Box List.


Related topics


Click to return to: Documentation | Designing Dashboards

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2014 Dundas Data Visualization, Inc.