Gauge Visualization

Anatomy

Learn about the individual parts of gauge chart.

180 degree gauge chart

1. Range limits: Max value of any given range segment; can be shown or hidden
2. Range arc segment: Division of the arc that represents different values of the same metric; can be configured to show 1 to 5 segments
3. Score/value arc: Graphical representation of the range score/value
4. Score/value arc background: Graphical representation of full possible range
5. Score value: Numerical representation of range score/value
6. Metric label: Metric value of score or achievement value, such as poor, good, excellent
7. Gauge needle: Range score/value position on arch; can be shown or hidden
8. Range labels: Explanation of any given range segment; can be shown or hidden

240 degree gauge chart

1. Range limits: Max value of any given range segment; can be shown or hidden
2. Range arc segment: Division of the arc that represents different values of the same metric; can be configured to show 1 to 5 segments
3. Score/value arc: Graphical representation of the range score/value
4. Score/value arc background: Graphical representation of full possible range
5. Score value: Numerical representation of range score/value
6. Metric label: Metric value of score or achievement value, such as poor, good, excellent
7. Gauge needle: Range score/value position on arch; can be shown or hidden
8. Range labels: Explanation of any given range segment; can be shown or hidden

Subcomponents

See the usage guidelines for button iconic

See the usage guidelines for heading

See the usage guidelines for text link

See the usage guidelines for loader

Usage

Gauge chart shows where a single value lies across a range from minimum to maximum expected values. Set colored data ranges to help users understand progress.

Configurations

Learn how to customize gauge chart by configuring the available properties.

Data source

You can select between 3 different data sources for your visualization: system data tables, preconfigured Performance Analytics indicators, and User Experience Analytics. If you are changing your data source, the option list provides suggestions based on previous selections and items that match your search.

Tables

You can select any table from the system to use in your visualization and filter that data. When you apply a table as the data source, a preview list appears showing all available records in that table.

A condition builder above the list enables you to set filter conditions on the data before using it in your visualization. This is useful for limiting the data shown in the chart to only the data you need.

Indicators

Indicators are preconfigured business metrics that assess performance across attributes such as cost, quality, technical risk, investments, user satisfaction, and business value. Indicators are configured in the Performance Analytics application and reflect common measurements that users need. If breakdowns are defined for an indicator, you can apply filter conditions on those values.

User Experience Analytics

Use User Experience Analytics to understand usage and adoption of your web and mobile applications.

Data properties

Data properties selects and organizes the data you want your users to see from the source. Configuration options in UI Builder depend on whether you select table data or indicators. Some configurations for indicator data sources require that the indicator have breakdowns.

Component header

The component header displays in the top left and contains the title and a description that appears when the user hovers over the information icon. You can show or hide a bordering box around the chart. By default, the title in the header wraps, but you can disable this.

Show/hide header

After you create the header you can hide it with the controls provided. By default, the header is configured to show, but the content is empty.

Header separator

You can hide the separator line below the header that appears by default.

Wrap title

If the title is long, an ellipsis displays to truncate it by default. If you want the title to wrap to a second line, you can toggle this on.

Chart border

A bordering box appears around the chart by default, but you can hide this.

Data updates

You can configure your chart to update automatically in real time or on a defined refresh schedule.

Follow filters

You can configure a data visualization to allow the use of individual chart filters and allow a chart to use the filters set on that workspace page. Filters set on the data source always run on the component. The “Follow filters” property, which is set to “true” by default, applies any filters set on the workspace page in addition to those set on the data source. Setting the “Follow filters” option to “false” prevents any filter input from the workspace page.

Filter icon

The filter icon and the number of filters impacting the visualization are shown in the top-right corner of the chart by default. If you don’t select a filter to apply to a visualization, the icon does not show. You can hide the filter icon and number of filters applied.

Data drilldown

By default, a user can click anywhere on gauge chart, and drill down directly into the data. This enables users to view data such as records and record lists from data tables or KPI data from indicators. You can disable this by clicking the “Enable drilldown” toggle.

Presentation properties

The presentation properties control the physical appearance of the chart. Use these properties to control how your users consume the data. Select the chevron icon to expand the section and display the properties in each category.

Gauge arc angle

You can configure the gauge chart to be a “180 degree” or “240 degree” arc angle. “180 degree” is the default.

Value label size

The value label is the smallest size by default, but you can change it to a medium or large size.

Gauge radius

You can configure the ratio of the inner radius to the outer radius of the gauge chart using decimals. The default is 0.7 and the values can be from 0.7 to 0-.95.

Gauge height

Gauge chart size is configured using a height setting expressed in pixels. You can configure any size you want for your visualization. Select the size, based on the amount of data in your chart, the range of values, and the resolution of the data that you want to show. The default chart size is 250 pixels.

Ranges

You can configure the gauge chart minimum and maximum range values, or create custom ranges to apply to a gauge chart.

Minimum

You can configure the start value of the gauge scale. The default is 0 (zero).

Maximum

You can configure the end value of the gauge scale. If you don’t enter a “Max value,” it’s defined automatically. By default, the limit value of each range shows on the chart, but you can toggle this off.

Custom

You can configure up to 5 ranges.

Number

To configure the number of ranges for the gauge chart from 2 to 5.

Color scheme

You can configure the color direction. Choose from “Green to red,” “Red to green,” or define a custom color for each range.

Label

You can specify a custom label name for each range.

Less than or equal to value

You can assign the max value for each range. Note that the minimum possible value prefills for each subsequent range, but you can increase it. By default, the range limit value appears on the chart. You can toggle this off.

Labels

By default, labels don’t show for the score, but the label for the range limit does and you can toggle this off.

Score

Defines what should be shown in the secondary label above the score value. Default is none. You can change the “Score label” to show a metric label for total values, or a range label for ranges such as average.

Range

When you select “Range label”, by default the label appears as the primary below the secondary range value. This emphasizes the range label over the exact value of the score.
If you configure custom ranges, you can toggle the range limit labels on. By default, these labels don’t appear.

Design recommendations

Learn how to apply gauge chart in your design.

Behavior

Learn how gauge chart behaves when the display changes or a user interacts with the component.

Chart positioning

The gauge chart is always centered within the container and retains a fixed height/width ratio. The height and width of the chart is responsive to the data visualization container size.
Gauge chart can’t be manually adjusted.

Responsive behaviors

The gauge chart is responsive based on the width and height of the container

Interactions

When the enable drilldown property is active, users can select data points in a pivot table to open individual records. You can deactivate this property and use the UI Builder “Events” tab to set the redirctions on click to any other page.

Truncation

When text in gauge chart exceeds the width of the container or content area, the text truncates with an ellipsis, and a tooltip shows the full content on hover.

Usability

Gauge chart complies with all internationalization and accessibility requirements.

Internationalization

When this component is used in a platform configured for a right-to-left (RTL) language, all elements flip and the text aligns to the right.

Accessibility

Learn how to access the actionable elements of gauge chart through keyboard interactions and screen readers.

Keyboard interactions

Users can access the chart navigator with these keyboard keys:

• Tab: Moves focus forward from the whole chart area through any truncated labels
• Shift + tab: Moves focus backward from any truncated labels to the whole chart area
• Enter or space bar: Triggers an action associated with an interactive element when in focus, such as refreshing the data or triggering chevrons to open and close.

Screen readers

When you apply ARIA labels to a component, screen readers announce the controls and content of pivot table in the prescribed tab order.