No Results
Gauge

★  Note:  A new Visualization type, called Bullet Chart, was first included in edgeCore 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 edgeCore v3.5 and higher. If you are using an edgeCore version prior to v3.5, see Legacy Gauge Visualization. ⚠  Note: 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 edgeCore 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 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

 

Setting Dual Color Gauge and Defining Threshold

edgeCore version: 4.3.11-hotfix3

Setting a second color for the gauge and defining a threshold value is done in the Renderers tab when configuring a gauge visualization.

Example:

We have uploaded a CSV file containing the following data:

Rank|NUMBER City|STRING Population|NUMBER
1 New York, NY 100
2 Los Angeles, CA 95.4
3 Chicago, IL 93
4 Houston, TX 85
5 Phoenix, AZ 86
6 Philadelphia, PA 87.2
7 San Antonio, TX 94
8 San Diego, CA 96
9 Dallas, TX 96.7

When configuring the gauge visualization, we are going to take the following steps:

  1. Provide a name for the visualization.
  2. Set the List Item Width to 300.
  3. In the Renderers tab:
    a) Click + to add attributes to the gauge. We are going to add City and Population as seen in the CSV data above.
    b) (Optional) Disable the Label? toggle for attributes if you do not want the labels to be displayed.
    c) For the Population attribute, in the Renderer dropdown, select Gauge, and then click the pencil icon next to it. A pop-up will be displayed.
    d) In the pop-up:
    – Enable the Dual Color Gauge toggle switch. Gauge Second Color section will be displayed.
    – In the first Gauge Color, set the color (for example, red) and enable Set To Value. The To Value field is displayed, where you should set the value (for example, our value is 97).
    – In Gauge Second Color, set the color (for example, we set it to green) and enable Set From Value. The From Value field is displayed, so you should set the value (here we are also going to input 97).
    – (Optional) Enable Show Label if you want to see the threshold of the value.
    – Click Save.
  4. In the Options tab:
    a) In the Value Strategy section, set the Minimum Strategy to From Field. In our case, we will set the Attribute to Population. You can leave the Maximum Strategy as is.
    b) In Additional Options, adjust the Arc Start/End Angle. We are going to set the Start Angle to -90 and the End Angle to 90.
  5. Go to the Preview to view the end result.

 

Disabling Animation

edgeCore version: 4.4.1

Disabling animation in a gauge is done in the Options tab > Additional Options.
The Show Animations? toggle switch is enabled by default. If you do not want to have animation, turn off this toggle. In the following screenshot, we have disabled this option:


Terms | Privacy