A new Visualization type, called Bullet Chart, was first included in edgeSuite v3.5. It has many similarities to the Linear Gauge Visualization. For more information on the Bullet Chart Visualization, see Bullet Chart.

The following documentation is for the updated Gauge Visualization in edgeSuite v3.5 and higher. If you are using an edgeSuite version prior to v3.5, see Legacy Gauge Visualization.

Thresholds and Comparative Values are no longer supported.

Specifically, the Linear Gauge Visualization from a pre-v3.5 system is not compatible with the current Linear Horizontal Gauge. Any older Liner Gauge Visualization should be reviewed when you are upgrading to v3.5 or higher. It might have to be manually converted to a Bullet Chart Visualization.

Gauge Visualization #

This section contains details on how to configure the Gauge Visualization in edgeSuite v3.5 or higher.

Overview #

The Gauge Visualization displays one or more values, along with any number of attributes/icons.

Arc Gauge #

Linear Horizontal Gauge #

Linear Vertical Gauge #

Gauge Configuration Steps #

The Gauge Visualization configuration is broken out into five steps:

  1. Base Gauge
    Identifies the name and appearance of the Visualization.
  2. Renderers
    Configures where and how labels, values, icons, and gauges will appear.
  3. Options
    Determines some additional options based on the type of gauge.
  4. Sort
    Determines the default sort for the gauge.
  5. Preview
    Preview of the gauges based on the choices made.

Step 1:  Base Gauge #

Visualization Name #

A symbolic name used to represent this Visualization. This is the name that will show up in choosers when adding a Visualization to a page.

Type #

The type of gauge. Choices are:

Arc Gauges are radial
Linear – Horizontal Gauges are horizontal.
Linear – Vertical Gauges are vertical.

List Orientation #

The type of layout. Choices are:

flow Flow layout produces a horizontal list. List items will have a set width, and flow left to right. List items will wrap to the next line if needed.
horizontal Similar to a flow layout. List items will have a set width, and flow left to right. List items will not wrap and will scroll horizontal if needed.
vertical Vertical layout produces a vertical list. This list will render a single record per row, and each row will fill 100% of the available space.

Padding #

Number of pixels between the list item and its border.

Min 1
Max 60

Margin #

Number of pixels between list items. Not applicable in vertical list orientation.

Min 1
Max 40

List Item Width #

Determines width of each list item in flow or horizontal list orientation.

Min 120
Max 700

Show Border #

Determines whether a border will appear for each item in a flow or horizontal list orientation.

Yes A border will appear around gauges
No Gauges will not have a border

Gauge Size #

Determines the size of the arc gauge.

Min 60
Max 1024

Gauge Spacing #

Determines the distance in pixels between the outer edge of the chart (Gauge Size) and the content. The numbers designate top, right, bottom, and left respectively. If the start or end point label is cut off, consider adding a little padding. For example 0,10,10,5.

Gauge Length #

Determines the length of the linear gauge.

Min 60
Max 1024

Gauge Width #

Determines the width of each linear gauge – combine width of axis label and the bar.

Min 25
Max 256

Auto-expand #

This property is available with “Flow” list orientation. It works in conjunction with list item width, and determines whether list items should grow to fill any remaining space. This option basically turns the list item width property into a Min-Width property.

When using flow list orientation layout with auto-expand enabled, a list item’s width will grow to fill available space until there is enough room for another minimum width list item to appear. When that happens, a new list item will appear on the row, increasing the number of items on that row. All list items will then snap back to their configured widths and will grow as needed until there is room for another item.

Item Background Color #

Determines the background color of each item.


Step 2:  Renderers #

This step configures the attributes to display as part of each list item. It also defines the renderer to use when presenting the values for the specified attributes.

Attribute Name #

Determines the record values that will appear in each list item.

Label? #

This property determines whether a label will appear next to a value within a list item.

Yes A label will be shown to the left of the value.
No Only the value will be shown.

Display Name

Label acts as a description for values that appear in a list. The Label defaults to the Attribute Name, but can be overwritten with something better optimized for display.

Renderer

Determines the renderer to use with the associated attribute. The value renderer determines how record values for each attribute are presented. The available renderers will vary based on the data type of the each attribute.

  1. Icon
  2. Number
  3. Text
  4. Date
  5. Gauge

See “Renderers” for more information.

Label Formatter #

Determines how labels will appear inside list items.  The label formatter is a global setting, and will be used for all labels within the List.

Color #

Determines the color of labels.  See Color Picker

Size #

Determines the font size of labels.

Min 6
Max 256

Style

Determines the font style of labels.

Normal Sample
Italic Sample
Bold Sample
Bold Italic Sample

Step 3:  Options

The options properties displayed depend on the type of gauge selected.

Value Strategy #

Minimum Strategy #

Configure what the minimum value will be shown on the axis of the chart.

Static Type in a value that will be used to set the minimum value of the chart’s axis.
Calculated Automatically calculate an appropriate minimum value of the chart.
From Field Choose a field in the data that will set the minimum value on each chart.

Maximum Strategy #

Configure what the maximum value will be shown on the axis of the chart.

Static Type in a value that will be used to set the maximum value of the chart’s axis.
Calculated Automatically calculate an appropriate maximum value of the chart.
From Field Choose a field in the data that will set the maximum value on each chart.

Additional Options #

Inline Content Alignment #

By default all non-icon and gauge items will be part of inline content, which property controls how these items are aligned within its container.

center Item will be center aligned.
left Item will be left aligned.
right Item will be right aligned.

Arc Gauge Options #

Arc Thickness #

Determines the thickness of the Arc. The four options are:

  1. Thicker
  2. Thick
  3. Thin
  4. Thinner

Arc Start Angle #

Determines where the gauge value starts

Default Value 0

Arc End Angle #

Determines where the gauge value ends

Default Value 360

Start and End Example 1 #

Start Angle -150

End Angle 150

Start and End Example 2 #

Start Angle -50

End Angle

50

Legacy Linear Horizontal Gauge

The following setting will be shown if there is only one Gauge renderer, it is not rendered as part of inline content, and list orientation is vertical. This is to support the upgrade of pre-3.5 version of Linear Gauge. User should consider convert this to a Bullet Chart or adjust the chart’s setting to avoid using legacy rendering which will be discontinued in the near future.

Show as Legacy Linear Gauge #

Determines whether to show a comparative measure on the linear gauge, indicated by a vertical line.

Yes Deprecated. This is to replicate pre 3.5 version of Linear Gauge where the gauge auto expand horizontally to the available width in a vertical list layout. The label and value column is restricted to a fixed width.
No Turn off legacy linear gauge rendering style.

Inline Content Fixed Width #

Deprecated. The width of the label and value column.

Min 40
Max N/A

Step 4: Sort Options #

This step configures how the gauge items are sorted.

Attribute #

Select an attribute from the underlying dataset, whose values will be used to determine the sort.

Order #

Controls how the values will be sorted.

Ascending A → Z
Descending Z → A