Working with gauges

Contents[Hide]

1. Overview

A gauge is typically used to visualize single-valued metrics, such as the total revenue for the year-to-date. In other words, a gauge displays one or more measures from a single row, and is not designed to display multiple rows of data.

Available gauge types include linear and radial (or circular) gauges.

2. Elements of a gauge

The figure below shows the main elements of a gauge visualization.

Elements of a radial gauge
Elements of a radial gauge

3. Types of gauges

3.1. Linear Gauge

A linear gauge is characterized by a linear scale which can be horizontal or vertical in orientation.

A linear gauge with a horizontal scale
A linear gauge with a horizontal scale

3.2. Bullet Graph

A bullet graph is a variation on a linear gauge that displays an actual value and a target value. It may also show ranges that identify whether the actual or current value is good or bad. Bullet graphs convey meaningful information in a compact space, making them ideal for dashboards that need to display a number of single-valued metrics, such as the current year-to-date sales revenue.

A bullet graph showing the actual and target values with ranges
A bullet graph showing the actual and target values with ranges

3.3. Radial Gauge

A radial gauge has a pivot point around which its pointers rotate, plus a radial scale. By default, the radial scale forms a complete 360-degree circle but you can easily change it to display as an arc by adjusting its start and sweep angles.

A semicircular radial gauge
A semicircular radial gauge

3.4. Pie Gauge

A pie gauge is a variation on a radial gauge that displays a metric as a percentage of the length of a circular scale, like a pie or donut chart with a single slice.

A pie gauge with a data label in the center
A pie gauge with a data label in the center

4. Adding a gauge

The following is a brief walkthrough that shows you how to add a gauge to your dashboard.

First, create a new dashboard from the main menu and use the Blank template.

Go to the toolbar, click Data Visualization, scroll to the right, and click Radial Gauge.

Add a gauge from the toolbar
Add a gauge from the toolbar

This adds an empty radial gauge control to the canvas with its Data Binding Panel open. Click the (X) to close the panel.

Go to the Explore window and locate a measure column you want to visualize. Drag the measure onto the empty gauge.

Drag OrderQty measure to the empty gauge
Drag OrderQty measure to the empty gauge

A basic radial gauge is displayed which includes a pointer (of type needle), a scale with labels, and major tick marks.

Right click on the radial gauge, click Re-visualize, and then select Linear Gauge.

Re-visualize as a linear gauge
Re-visualize as a linear gauge

The control turns into a linear gauge. Depending on the dimensions of the control, the scale of the linear gauge will be oriented horizontally or vertically. This is because the gauge scale's Orientation property is set to Auto by default.

Linear gauge with scale oriented vertically
Linear gauge with scale oriented vertically

5. Scale

You can access the properties of a gauge scale from the Main \ COMMON section of the Properties window.

Scale properties
Scale properties

5.1. Start and Sweep Angle

By default, the scale of a radial gauge forms a nearly 360 degree circle. You can change the start and sweep angles of the gauge's scale to have the gauge display as an arc (i.e., a partial circle).

Start and Sweep Angle properties for a scale
Start and Sweep Angle properties for a scale

The gauge's Start Angle property specifies the angle at which to start drawing the scale. This is an angle in degrees between 0 and 360, which is measured clockwise from the 6 o'clock position. For example, to produce the semicircular radial gauge shown at the beginning of this article, set the start angle to 90 degrees.

The Sweep Angle property is an angle in degrees representing the length of the arc. For example, to produce the semicircular radial gauge shown at the beginning of this article, set the sweep angle to 180 degrees.

Tip
If the sweep angle is below 270 degrees, you may want to position and size the scale to take up as much space as possible within the bounds of the gauge control. For example, set Center X and Center Y to adjust the scale's position by its center. Then set Radius to adjust the size of the scale.

5.2. Minimum and Maximum

The scale's minimum and maximum values are determined automatically based on the gauge's underlying data. However, you can override this by setting the gauge scale's Minimum and/or Maximum properties manually.

Minimum and Maximum properties for a scale
Minimum and Maximum properties for a scale

5.3. Round Minimum & Maximum

If the Minimum and Maximum properties are not set on a gauge scale, and the Round Minimum & Maximum property is turned on, then rounded values for the scale minimum and maximum will be calculated automatically. 

For pie gauges, which do not display any scale labels, the Round Minimum & Maximum property is turned off by default because rounding can be misleading. Instead of using rounding, you can do one of the following for a pie gauge:

  • Set up states which are displayed as ranges on the gauge
  • Add a second measure which will be displayed as a second pointer (e.g., a target)
  • Set the Maximum property manually

Round Minimum & Maximum property for a pie gauge
Round Minimum & Maximum property for a pie gauge

5.4. Orientation

As shown in the walkthrough, use the gauge scale's Orientation property to orient a linear gauge horizontally or vertically. By default, this property is set to Auto, which means the orientation is adjusted automatically based on the width and height of the gauge control.

Orientation property for a scale
Orientation property for a scale

5.5. Interval and Interval Count

The Interval and Interval Count properties can be set on a scale itself, or on its major tick marks, minor tick marks, or labels.

Interval and Interval Count properties for a scale
Interval and Interval Count properties for a scale

By default, the Interval Count on the scale is set to 5 which means the scale is divided into 5 sections.

The Interval property lets you override the interval count by specifying the size of each interval based on measure units. For example, in the figure below, the interval is set to 20,000 and the total number of intervals is determined automatically based on that value.

Set the Interval to 20,000
Set the Interval to 20,000

5.6. Label Style

To customize gauge labels, edit the properties of the gauge scale, go to the Look section, and then click Label Style.

Click Label Style
Click Label Style

For example, go to the Text section to change how you want large numeric values to be formatted. (But note that the defaults are already set up to generate compact labels and avoid overlap when displaying large values.)

Change the formatting for large values
Change the formatting for large values

5.7. Centering the gauge scale

By default, the scale of a radial gauge is centered within the rectangular bounds of its control. You can change this by going to the Layout properties for the gauge (not the scale). Then use the Horizontal Alignment and Vertical Alignment properties to align the scale as needed.

Change the alignment of the radial gauge
Change the alignment of the radial gauge

6. Pointers

A gauge control has one or more pointers which correspond to the measures from a metric set. A second pointer is often used in gauges to represent a target measure or contextual metric value. Each pointer can be independently customized in terms of appearance and layout.

Gauge with two pointers corresponding to two measures
Gauge with two pointers corresponding to two measures

6.1. Pointer Type

The Pointer Type property has 3 options: Bar, Marker, and Needle. A radial gauge can use any of these pointer types but a linear gauge only supports Bar and Marker.

Pointer Type property for a pointer
Pointer Type property for a pointer

Note that a bar pointer is not displayed when the value is zero.

Tip
For a bullet graph, the pointer type is set to Bar for the primary (actual) measure, and the pointer type is set to Marker for the target measure.

6.2. Marker Shape

If your pointer type is Marker, use the Marker Shape property to choose between a number of available shapes.

Marker Shape property for a pointer
Marker Shape property for a pointer

Tip
For a bullet graph, the target pointer's marker shape is set to Rectangle. Then the fill color for the marker and the marker width and height can be adjusted accordingly.

6.3. Placement

Go to the Layout section of a pointer's properties to find the Placement property. Use this property to control whether the pointer (e.g., marker) should be placed on the inside or outside of the scale, or placed in the center of the scale.

Placement property for a pointer (marker)
Placement property for a pointer (marker)

7. Ranges

Gauge ranges correspond exactly to states belonging to a metric set state group. Showing ranges on a gauge helps users to quickly identify the condition of the measure being monitored.

7.1. Set up states

To set up ranges for a basic gauge, first select the gauge on the canvas, go to the toolbar, click Data Tools, and then click Set Up States.

Click Set Up States
Click Set Up States

In the Set Up States dialog, add a new state group and name it State Group 1. Then add a Good state and a Bad state using a Constant (Formula) value of 150000 as the threshold.

Adding a Good state
Adding a Good state

7.2. Range State Group

Next, go to the properties for the gauge. Under Main \ COMMON, set the Range State Group property to State Group 1 which is the state group that was just created.

Ranges are automatically added to the gauge with default colors.

Gauge with ranges corresponding to Bad and Good states
Gauge with ranges corresponding to Bad and Good states

7.3. Start and End Width

Under Main \ COMMON in the properties for the gauge, you'll see a list of ranges corresponding to the states (e.g., Good and Bad). Click on a range to edit its appearance.

For example, change the fill color, Start Width, and End Width of the two ranges to achieve the look shown in the figure below.

Start Width and End Width properties for a range
Start Width and End Width properties for a range

Tip
These and many other properties of a gauge can be expressed using absolute pixel units (e.g., 15px) or as a percentage (e.g., 50%) of another quantity such as the width of the gauge scale.

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