Widget Types

These widget types are available in the Dash Studio.

Time Series Widget

A Time Series widget is a two-dimensional time-based series of data points connected by a line. There can be multiple lines on one chart.

Widget Properties

You can select the following options under the Widget Properties panel to modify the visual appearance of the Time Series widget:

Table 1. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
Table 2. VISUALIZATION
PropertyDescription
Horizontal Axis Title Set the title of the horizontal axis on the widget. This is optional.
Vertical Axis Title Set the title of the vertical axis on the widget. This is optional.
Legend Set the legend.
Legend Placement Place the legend at the bottom or on the right-side of the widget.
Stacking

Use this option to stack up the numbers across multiple queries in the same widget.

  • None: Displays individual data bars. This is the default option.
  • Normal: Displays the sum of all the queries.
  • Percent: Displays the sum to 100%. When you hover, the breakdown is displayed.
Note: Under Chart Type, select Column to visualize the chart clearly.
Set Series Color

Use this option to assign colors to query lines. Once enabled, the color palette opens and the first color box is applicable to query A, second color box is applicable to query B, and so on.

You can define performance baselines in a widget by adding a Threshold value. You can add multiple thresholds to a widget, which enables you to set threshold values based on the severity.

Table 3. THRESHOLD
PropertyDescription
Label Set name of the threshold.
Value Set threshold value to be set.
Color Set color of the threshold line. By default, it is black in color.

See widget time range.

See time range comparisons.

Pie Widget

Pie widget displays single consolidated values for a series of metrics for a given time range as a pie visualization.

Dashboard

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Pie widget:

PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
PropertyDescription
Data Labels

Define the individual data points that you can turn on or off.

Label Format

Set the format of the label. You can select one of the following options:

  • Value and Name
  • Value only
Value Format

Set the format of the label value. You can select one of the following options:

  • Long
  • Short
  • Percent
Legend Set the legend, which describes the value of each pie slice of the widget.
Legend Placement Pace the legend on right side or bottom of the widget.
Center Value Set the unit value.
Center Value Format Set the format of the center unit value.
Center Value Unit:Set the unit for the center value. This is optional.

See widget time range.

See single click action.

Metric Number

A Metric Number chart highlights a single value/KPI and is typically created by:

  • A single measure which can be specified using the Data Panel.
  • Combining or aggregating multiple metrics.

The value display shows:

  • A single measure or metric value at any instant.
  • A comparison of two values (either two different metrics or a metric at different points of time).
  • An aggregation of metrics across many objects or a large interval of time.

If the trend of a value over time is concerning, you can enrich these charts with contextual information to better interpret the present value, or the change in value over a time period. These charts can display numbers and text, for example, date and time of an incident.

You can also display the metric value, or a combination of these values in various ways, such as selecting a single metric:

  • By name associated with a particular entity, or object that you want to learn more about.
  • Aggregated across all entities of a certain type, or a provided sub-list of entities.

  • Aggregated for a sub-list of entities which is dynamically determined.

The metric number helps you understand the metric value at the current point in time, and also the pattern of the metric value over a time interval.

Metric Number

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Metric Number widget:

Table 4. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
Table 5. VISUALIZATION
PropertyDescription
Show Metric Name Hide or show the name of the metric.
Unit Name Set the unit of widget value. This is optional.
Number Format

Set the formal of the widget value. You can select one of the following options:

  • Short
  • Long
  • Percent
Horizontal Alignment Set the text alignment to left, center, or right.

See widget time range.

See time range comparisons.

See single click action.

Gauge Widget

The Gauge widget enables you to present the metric data on a relative scale. The status is indicated by an arc, where the left end is the minimum value and the right end is the maximum value.

Following are the three types of Gauge widgets:

  • Status Gauge - The default Gauge widget is the status Gauge.
  • Target Gauge widget - The Gauge widget in the target mode is called the Target Gauge widget. The Target Gauge enables you to set a target value for the metrics. It is set on an arc with a triangular indicator that points to the target value. The threshold values are hidden on this type of widget.
  • Threshold widget - This widget displays the threshold values. It provides a visual alert through color changes.
Note: Gauge widget currently supports only the following data binding options:ADQL QueryApplicationsThousandEyes

Widget Properties

You can select these options under the Widget Properties panel to modify the visual appearance of the Gauge widget:

Table 6. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces at the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
Table 7. VISUALIZATION
PropertyDescription
Metric Name Hide or display the name of the metric.
Value Hide or display the value of the metric.
Value Format

Set the format of the value. You can select one of the following options:

  • Long
  • Short
  • Percent.
Min and Max Values Hide or display the maximum and minimum value to be displayed on the widget.
Set Value Range Set the maximum and minimum value to a desired input.
Target Enable this option to turns the status Gauge into a Target Gauge widget. You can set it to None, Fixed, orPercentage.
Note: If Target option is enabled, all the threshold values on the widget are hidden.
Table 8. THRESHOLD
PropertyDescription
Reverse Threshold Order Reverse the color order for threshold values. By default, the color order is green for normal, yellow for warning, and red for critical but when you enable this toggle button the order changes to red for normal, yellow for warning, and green for critical.
All Threshold Values Display all threshold values on the widget and theTargetoption gets disabled automatically.
Threshold Starting Values (%) Set the threshold range between 0 to 100% where:
  • Normalrange is between 0 and the defined normal threshold value.
  • Warningrange is between the normal threshold value and warning threshold value
  • Criticalis when it exceeds the warning threshold value
Note: If threshold option is enabled, Target option is hidden from the panel.

See widget time range.

See single click action.

Health Widget

A Health Widget provides different visualizations of the health information of one or more entities for a specified time range. Use this widget to create and view health information of one, or more entities at a time, for Applications, Business Transactions, Tiers, Nodes, and Health Rules. By default, the Health widget displays health information as a ratio pie. The ratio pie visualization provides an additional option of displaying a metric value at the center of the donut pie.

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Health widget:

Table 9. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
Table 10. VISUALIZATION
PropertyDescription
Display as
Data Labels

Hide or show the individual data points that you can turn on or off.

Label Format

Set the format of the label. You can select one of the following options:

  • Count Only
  • Count and Type
Center Value Format Set the format of the center unit value.
Center Value Unit:Set the unit for the center value. This is optional.

See widget time range.

View Health Information

From a Data Panel, you can select the data type whose health information you want to display on the Health widget.

For example, suppose you want to know the health status of the ECommerce application.

  1. Choose a value from the Show me data for dropdown based on the data type you want to display. For this example, select Health Rules.
  2. The subsequent input fields displayed in the Data Panel are specific to the data type selected in the previous step. Click the Application dropdown and select the application for which you want to drill down the data.
  3. From the next dropdown, select a specific Named Health Rule from the popover list or select All Health Rules. For example, if you select All Health Rules, the Health widget displays as: Health Widget Example After you specify valid inputs for all fields, the widget will update on the canvas and display the results. To view the center value, click Add Center Query. When you display the health of the health rules, in the View mode, you can click on different slices of the donut pie to get more information about the health rules. You can then click on each health rule to drill down further.

Datagrid Widget

The Datagrid widget provides a quick view of the list of entities associated with all the events on the Dash Studio. You can use this widget to present a collection of data in a tabular format. It improves the troubleshooting capabilities by reducing the number of drill-downs required to perform and navigate to other panels.

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Datagrid widget:

Table 11. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.
Table 12. VISUALIZATION
PropertyDescription
Column sorting Sort items in the widget columns.
Column resizing

Adjust or resize the width of the widget columns based on the content contained in the viewport of the Datagrid.

Allow Data Export

Enable this toggle to enable the download option in the view mode of the Datagrid widget. The download option downloads the Datagrid widget data in the .csv

Search Search for objects in the widget.
Grid footer Hide or display the footer content.
Row height Adjust the height of the rows.
Filter panel Display a list of filters.

See widget time range.

View List of Events

To view a list of events for a given data source, select the Datagrid widget icon from the widget palette:

  1. Under Datapanel, click Show me data for and selectEvents.
  2. Click the subsequent dropdown and select the data source for which you want to see the list of events.Applications is selected in this example.

    Note: The subsequent inputs shown in the Data panel are specific to the data type selected from the previous step.
  3. Click Application and select one from the list of options. You can also enter the name of the application manually.

    Once you specify valid inputs for all the required fields, the widget is updated on the canvas and displays the results. Click the Filter Panel icon on the top-right corner of the Datagrid widget to see the available filters to apply. You can filter based on event types and health rules.

    Note: To view information such as summary, details, actions executed, and comments about the selected event, double-click the specific row of the widget. Based on your analysis of the event information, you can start a war room, delete the event, archive it, or test the action.You can also resize the widget in vertical and horizontal directions by dragging the edges.

Label Widget

A Label Widget is a simple text string that enables you to add text on the dashboard canvas.

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Label widget:

Table 13. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Table 14. VISUALIZATION
PropertyDescription
Font Color Specify the color of the text inside the widget.
Font Size Specify the size of the text within the widget.
Horizontal Alignment Define horizontal alignment of the text in the widget.
Vertical Alignment Define vertical alignment of the text in the widget.

See single click action.

Image Widget

You can use the Image Widget to add images to a new dashboard.

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Image widget:

Table 15. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the the default option as it is or customize it.
Padding Add extra spaces between top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Table 16. VISUALIZATION
PropertyDescription
Image Scale

Set the image size.

You can select one of the following options:

  • Scale to Fit
  • Original Size
  • Stretch

Iframe Widget

The Iframe widget allows you to embed data in your dashboards from another dashboard or website. This helps you to manage dashboards when you have multiple operators who focus on particular dashboards and you want to roll them all up into a primary dashboard.

To enable the Iframe widget:

  1. Log in to the Controller UI as an administrator.
  2. Select Settings >Administration.
  3. Select Integration > Dash Studio Iframe.
  4. Toggle the Enable iframe widgets.
  5. Under Accepted Domains, either select Any domain orSpecific domains. When you select Specific domains and specify the domains, only those domains are supported on the dashboard.

    Warning: The controller's domain will be automatically accepted, in addition to the domains specified on the admin page.
  6. Click Save.
Note: You must refresh the browser or re-login to the Controller for the changes to take effect.

Configure the Iframe widget:

  1. Navigate to Dashboards & Reports > Dash Studio, and then create a dashboard.
  2. Select the Iframe widget and specify the URL under Data.

    Note: The sandbox option is selected by default. Advanced HTML features, such as forms and Javascript, do not work unless the URL is in the same domain as the dashboard. If you want to show these features, turn off sandbox.
    Note: You can click View Accepted Domains to view the list of domains that your system administrator has enabled.

    You can also embed the Geo Dashboard map within the Iframe. To display the map widget within the Iframe:

    1. Navigate to Browser App Dashboard > Geo Dashboard or Mobile App Dashboard > Geo Dashboard.

    2. Copy the URL of the map widget.

    3. Paste the URL under Data.

  3. Click Embed.

Widget Properties

You can select these options under the Widget Properties panel to modify the appearance of the Iframe widget:

Table 17. CARD
PropertyDescription
Background Color Set the background color of the widget. You can either leave the default option as it is or customize it.
Padding Add extra spaces between the top and bottom of the text within the widget. The default value is 1.
Border Set the border around the widget.
Shadow Set a shadow around the widget.
Title Define a title for the widget.
Title Alignment Align the title of the widget.
Title Color Set the color of the widget title.
Subtitle Define a subtitle for the widget.