416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
Dashboard v5.0

This site makes extensive use of JavaScript.

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

Using Gauges

Hide navigation
RSS
Modified on Tue, 18 Mar 2014 04:25 PM Categorized as Data Controls, Gauge
Click to return to: Documentation | Designing Dashboards | DV Controls | Gauge


Overview

Use gauge controls to visualize single-valued metrics, such as the total revenue for the year-to-date.

Note: In Dundas Dashboard 4.0 or later, a gauge displays the metric value of the data point chosen using the single value representation rule for the KPI/dataset. (In previous versions, the gauge displayed the metric value for the first data point.)

Elements of a gauge

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

Elements of a radial gauge.

Elements of a radial gauge.


Types of gauges

Bullet graph

A bullet graph is a type of linear gauge that displays an actual value and a target value. It may also show ranges that identify whether the actual/current value is good or bad. A bullet graph conveys meaningful information in a compact space, making it 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.

A bullet graph.


Linear

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

A linear gauge.

A linear gauge.


Radial

A radial gauge has a pivot point, around which its pointers rotate, plus one or more radial (&ie; circular) scales. By default, a radial scale forms a complete 360-degree circle but you can easily change it to display as an arc.

A radial gauge.

A radial gauge.


Thermometer

A thermometer gauge is a type of linear gauge with a thermometer-styled bar pointer.

Image

Getting started

Choosing a gauge

Each of the different types of gauge controls can be accessed from the Gauges folder of the Dashboard Designer Toolbox. Simply drag a gauge control from the Toolbox to the Canvas, and then drag a KPI or dataset from the Toolbox and drop it on top of the gauge. For a bullet graph, you will typically drag-and-drop two KPIs in order to set both the actual and target values.

Gauges in the Toolbox.

Gauges in the Toolbox.


You can also choose a type of gauge control as the preferred data visualization for a KPI or dataset. In this case, when you drag the KPI or dataset to the Canvas, it will be displayed automatically as a gauge.

The General tab of the KPI Designer.

The General tab of the KPI Designer.


Changing the frame shape

Use the Frame Shape property to change the shape of the gauge's frame.

Frame Shape property.

Frame Shape property.


The available options include (depending on the type of gauge):

  • Auto - The frame shape is determined automatically based on the type of gauge.
  • Circle
  • None - No frame is displayed.
  • Rectangle
  • Rounded Rectangle

Different frame shapes (None, Rectangle, Rounded Rectangle).

Different frame shapes (None, Rectangle, Rounded Rectangle).


When Frame Shape is Auto on radial gauges, the gauge's Auto Frame Margin property is used to determine the spacing between the scales and the edge of the frame. The default value is 10%, which is relative to the size of the gauge control.

Tip: An auto frame margin of auto represents the smallest distance from the circumference of a full 360° scale to the edge of the gauge control, but is not recommended for semi-circular gauges.

Scales

Start and sweep angles

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 (&ie; a partial circle):

  1. Locate the Scales property of the gauge control and click its ellipsis button.
    Scales property.
  2. In the Scales property window, set the Start Angle property to an angle in degrees between 0 and 360, which is measured clockwise from the 6 o'clock position. To produce the sample seen at the end of this section, set to 45.
  3. Set the Sweep Angle property to an angle in degrees representing the length of the arc, for example: 90 to represent a quarter gauge, 180 to represent a half gauge. To reproduce the sample below, set to 270.
    Scales property.
  4. If the sweep angle is below 270, you may want to position and size the scale to take up as much space as possible within the bounds of the gauge control:
    • Set Center X and Center Y to adjust the scale's position by its center.
    • Set Radius to determine the size of the scale.
      Image
  5. Click Close to return to the dashboard canvas.

Tip: If the gauge's frame shape is Auto, the gauge's Auto Frame Margin determines how far the edge of the frame extends beyond the scale.

A semi-circular gauge.

A semi-circular gauge.


Minimum and maximum

The minimum and maximum values of a gauge's scale at viewing-time is either determined by the corresponding properties of the scale itself, or derived from the minimum and maximum measure values specified in the associated KPI definition.

To specify the minimum and maximum via the properties of the scale:

  1. Locate the Scales property of the gauge control and click its ellipsis button.
  2. In the Scales property window, locate the Minimum property and uncheck the Auto checkbox in order to enter your own value.
  3. Set the Maximum property in a similar fashion.
    Minimum and maximum scale properties.
  4. Click the Advanced button at the top of the property window.
  5. Set the Use KPI Min/Max advanced property to False.
    Use KPI Min/Max property.
  6. Click Close, then save and preview your dashboard.
    Min/max from scale.

Tip: By default, the scale's Use KPI Min/Max property is set to False if the associated KPI does not define any minimum or maximum measure values for visualization purposes.

To have the gauge scale use the minimum and maximum measure values as defined by the associated KPI:

  1. Locate the Scales property of the gauge control and click its ellipsis button.
  2. Click the Advanced button at the top of the Scales property window.
  3. Set the Use KPI Min/Max advanced property to True.
  4. Click Close, then save and preview your dashboard.

KPI General tab: Specifying minimum and maximum measure values.

KPI General tab: Specifying minimum and maximum measure values.


Tip: By default, the scale's Use KPI Min/Max property is set to True if the associated KPI does define a minimum or maximum measure value for visualization purposes.

Using range fill for scale elements

If your gauge has an associated range, you can easily modify the settings of the gauge scale's labels or tick marks to inherit the range's Fill property:

  1. Locate the Scales property of the gauge control and click its ellipsis button.
  2. In the Scales property window, expand the Labels property.
  3. Set the Use Range Fill property to True.
    Use Range Fill property.
  4. Do the same for the scale's Minor Tick Marks and Major Tick Marks properties.
  5. Click Close.
  6. Save, then preview your dashboard.

In the resulting gauge, the scale's labels and tick marks use the fill settings of the range:

Using range fill.

Using range fill.


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 label settings.

Use the Interval property to specify the size of the interval between two tick marks on a scale. If you set this property to Auto (or NaN via scripting), the size of each interval will be determined automatically based on the value of the Interval Count property, which specifies the number of desired intervals for a scale. This latter property can also be set to Auto, in which case an interval count of 10 will be used and the interval sizes will be based on the scale's minimum and maximum settings.

If the interval properties are set to automatic on a scale's labels or tick marks, the intervals will be determined based on the interval settings from the scale itself.

Setting the interval and interval count on a scale.

Setting the interval and interval count on a scale.


Alignment

When using multiple gauges, or combining gauges with other alignable controls such as charts, the scales of gauges can be aligned with the scales or axes of other controls. There are two types of alignment available:
  • Position: Automatically matches up the padding reserved between the scales and the edges of the controls, for aesthetic reasons and for easier comparing.
  • Data: Automatically matches up the minimum and maximum values of the scales so that the pointers and data points plotted along them can be directly compared.

Note: Only linear, thermometer, and bullet graph gauge types support position alignment, and not radial gauges.

Setting up alignment with gauges is identical to alignment with charts. See the alignment section of Using Charts for details.

Pointers

Actual and target values for a bullet graph

The actual and target values in a bullet graph are displayed using gauge pointers with Pointer Type set to Bar and Marker, respectively. These pointers are automatically configured when you drag-and-drop a KPI (or contextual metric) onto a bullet graph twice. You can also configure the actual and target values manually afterwards by using the Data Settings Configuration wizard.

Easing animations

This example shows how to animate the movement of a gauge pointer by using an easing function:

  1. Create a new dashboard.
  2. Add a Radial Gauge control to the dashboard.
  3. Add a single-valued KPI to your gauge. This KPI should be backed by data that you can change outside of Dundas Dashboard in real-time (e.g. via SQL Server Management Studio).
  4. Enable data refresh every 10 seconds for the gauge by using the Data Settings Configuration wizard.
  5. Set the following properties on the gauge's pointer as follows:
    • Set Easing Animations Enabled to True.
    • Set Easing Enabled On Load to True.
    • Set Easing Function to Circle. (This is an advanced property.)
  6. Or, add the following script as a Load interaction of the dashboard.

RadialGauge1.Pointers0.IsEasingEnabled = true; RadialGauge1.Pointers0.UseEasingOnLoad = true; DashboardCircleEase easingFn = new DashboardCircleEase(); RadialGauge1.Pointers0.EasingFunction = easingFn;

You can now save and preview your dashboard. Effect a change externally to the data powering the KPI, then observe the gauge pointer move in response.

For more details on easing functions, see DashboardEasingFunction Class.

Pointer interactions

Gauge pointers have interaction properties which let you write scripts to handle events such as the pointer entering or leaving a range or scale, or to handle mouse interactions on each pointer directly. For more details, see DashboardPointer Class and DashboardElement Class.

Ranges

If the KPI or dataset added to the gauge has states defined, a range will be added automatically to represent each state. To modify the ranges, or to add your own:

  1. Locate the gauge's Ranges property and click its ellipsis button. (You can also find the ranges on the scale, accessed through the Scales property.)
  2. Click Add or Remove if desired to add or remove ranges.
  3. To associate a range with a state or disconnect it from a state, set its KPI/Dataset State property. Set to None to disassociate from states. If the range is associated with a state, its start and end will be adjusted automatically based on the KPI state settings.
  4. Set the Start Value and End Value properties to determine where the range starts and ends along the scale. Check Auto to start at the beginning of the scale or end at the end of the scale.

You can also disable the use of states on the gauge or choose a different state group by using the Data Settings Configuration Wizard.

Note: Bullet graph gauge types have an Auto Range Fill property on the gauge, which is set to True by default. This automatically calculates fills for ranges that are different shades of the brush specified using Auto Range Fill Brush property. Set Auto Range Fill to False to customize the Fill property of each range separately.

Notes

Pixel versus percentage sizing

Gauge elements generally support the following ways of specifying the value of a size or length-related property:

  • Pixel (or px) - The size/length is defined in absolute pixels.
  • Percentage (or %) - The size/length is relative and is defined as a percentage of a size/length property on a parent element.
  • Auto - The size/length is calculated automatically and defaults to either pixel or percentage-based sizing.

For example, tick marks, ranges and markers are sized relative to the scale bar width.

Three sizing options.

Three sizing options.


Related topics


Click to return to: Documentation | Designing Dashboards | DV Controls | Gauge

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

Copyright © 2009-2014 Dundas Data Visualization, Inc.