Gauge Widget


Apps - Widget - Gauge Chart icon.png This type of widget belongs to the Dashboards category in the widget library. It enables you to place, for a given dimension element, an observed value on a semicircular gauge using a pointer. Analysis is easier using a quantitative scale with thresholds that define the display color of segments of the gauge, e.g. red, yellow or green.

Notes

 Open url.png  see General remarks on widgets

  • The data source must contain one Dimension column and one Measure: Observed value column.
  • The gauge can only process one dimension element. Besides the row headers, the data source must contain only the row related to this dimension element.
  • The legend of the chart corresponds to the dimension element.

Best Practice big icon.pngBest Practice

  • You should use the Gauge widget to highlight a value as compared with thresholds that display different segments graphically using customizable colors.
  • To highlight a value as compared with a target figure using a chart, you should use the Bullet Chart widget.

Example

You want to view the figure (pointer) for the number of late incidents (measure) in a quantitative scale divided into 3 segments:

Data source Gauge widget (gauge with values from 0 to 50)

with a quantitative scale consisting of 2 thresholds (3 intervals)

EVApps - widget Gauge - Example DataSource.png

Download Zip icon.png Download Example (CSV file)

Apps - widget Gauge - Thresholds Reduce Example.png

EVApps - widget Gauge - Example Chart.png

List of properties

Content

DataSource

Data Source: External data source associated with the widget. 

  • The drop-down list displays all of the data sources available in the app. 
  • To modify the current data source or to view its contents, you should click Apps - Edit icon.png. The Apps - datasources Properties - Preview button.png button below the Preview property shows the number of rows (max. 15) and columns extracted.
  • To define and associate a new data source with a widget, click Apps - Add datasource icon.png in the Objects pane.
DataTransformer

Data Transformer: Used to define the structure and scope of the data source, apply statistical aggregate functions and modify the order of the measures displayed. Open url.png See the procedure.

Threshold Status: Used to define 1 to  4 quantitative thresholds using a scale of values (2 to 5 intervals). Each new threshold will be displayed in a different color. Thresholds define the display color of segments of the gauge. Open url.png  see Example and Procedure

DefineThresholds
Reduce display mode Expand display mode

You can define three color segments with two thresholds.

EVApps - widgets Dashboards - Thresholds Reduce.png

You can define five color segments with four thresholds.

EVApps - widgets Dashboards - Thresholds Expand.png

Min Value: Start value of the gauge. By default, zero.

Max Value: End value of the gauge. By default, the observed value in the data source.

Data

SortByValueDescending

Sort By Value Descending: Used to sort dimension elements in descending order (if the box is checked, from highest to lowest value) or in the order in which they are read in the data source (box is not checked). Note: The order applied is determined by the dimension elements of the first measure in the data source.

Example documentation icon EN.png    You want to display the chart for incidents and requests per employee.

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

Box is checked Box is not checked

Sort By Value Descending - Example - Sort value - On.png

The dimension elements of each measure are sorted in descending order.

Sort By Value Descending - Example - Sort value - Off.png

The dimension elements of each measure are displayed according to the sort order of the data source.

MaximumNumberOfData

Maximum Number Of Data: Used to indicate the maximum number of dimension elements to be loaded from the data source for each measure selected in the data source. This prevents loss of performance when data volume is large. 

  • The count is always performed from the first dimension element.
  • When the number of dimension elements to be loaded is greater than the number of dimension elements in the data source, all of the data is loaded.
  • To view the current data source, click Apps - Edit icon.png next to the Data source property. Click on the button below the Preview property to see the number of measures and the number of dimension elements for each measure.
Example documentation icon EN.png    You want to display the chart for incidents and requests per employee.

The data source contains the Department dimension with three elements. Sort By Value Descending - Example - Datasource.png

  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 2
  • Maximum Number Of Displayed Data = 20 (default value)
  • Maximum Number Of Data = 20 (default value)
  • Maximum Number Of Displayed Data = 1

Sort By Value Descending - Example - Number Data - All.png

All dimension elements are loaded and displayed for each measure, i.e. the three departments.

Sort By Value Descending - Example - Number Data - Part.png

Only the first two dimension elements are loaded and displayed for each measure, i.e. the first two departments.

Sort By Value Descending - Example - Displayed Data - Part.png

All dimension elements are loaded but only the first element is displayed. This corresponds to the Sales department. The Others dimension element groups values from the Marketing and Administration departments.

Chart

Title: Name of the chart displayed below the gauge. Note: If you do not specify this field, the name of the Dimension column will be used.

Width Scale (0.10 - 1.5): Tool used to modify the width of the gray inner semicircle and the threshold semicircle.

Width = 0,2 Width = 1,5
EVApps - widget Gauge - Width Scale Minimum.png EVApps - widget Gauge - Width Scale Maximum.png

Show Background Color: Used to indicate if the gray inner semicircle should be displayed on the gauge (box is checked) or not (box is not checked). Note: Use the Shadow Scale property to modify the width.

Box is checked Box is not checked
EVApps - widget Gauge - Show Background On.png EVApps - widget Gauge - Show Background Off.png

Show Shadow: Used to indicate if the shadow of the gray inner semicircle should be displayed on the gauge (box is checked) or not (box is not checked). Note: Use the Shadow Scale property to modify its width.

Box is checked Box is not checked
EVApps - widget Gauge - Show Shadow On.png EVApps - widget Gauge - Show Shadow Off.png

Shadow Scale (0.8 - 1.5): Tool used to modify the width of the gray inner semicircle shadow.

Needle Stroke Color: Used to indicate if the outline of the pointer is displayed in a specific color (box is checked) or in black (box is not checked).

Needle Color: Used to indicate if the inside of the pointer is displayed in a specific color (box is checked) or in black (box is not checked).

Chart Label -/- Legend

ChartLabelLegendGauge

Properties of the legends

Property Description Representation
Element to format: Element (1) Legend: Title of the chart EVApps - Graphic Properties - Chart Label Element Gauge.png
(2) Values: Values of the measures

PageGeneralFormat
For all types of widgets
Font Family (Inherit) (1) Font of the text, selected from the Select Font drop-down list EVApps - Graphic Properties - General Format.png
Size (2) Font size, selected from the Select Size drop-down list or specified directly in the field
Alignment (Inherit) (3) Alignment of the text (Left/Center/Right/Justified)
Style (Inherit) (4) Font style of the text Bold/Italic/Underline)
Background Color (Inherit) (5) Background color of the widget
Text Color (Inherit) (6) Color of the text displayed by the widget

Note: Priority is given to the font and color defined using the text editor

Line-Height (Inherit) Height of the row containing the object in pixels

Theme

  Open url.png  see Properties description

Procedure: How to define thresholds

ProcedureDefineThresholds

1. In the Ranges domain field, select the number of thresholds you want:

  • Three thresholds: Click Apps - widgets Dashboards - Thresholds Reduce thumbnail icon.png to switch to the Reduce display mode.
  • Five thresholds: Click Apps - widgets Dashboards - Thresholds Expand thumbnail icon.png to switch to the Expand display mode.
     

2. In the Status Thresholds field, specify the threshold values:

  • Enter the value for the threshold of each segment.
             EVApps - widgets Dashboards - Thresholds Value Select.png 
  • Select the color of each segment:
    • Move the cursor over the threshold color, click EVApps - Color Palet icon 2.png and select the color you want from the Color Picker.
               EVApps - widgets Dashboards - Thresholds Color Select - Picker.png 
    • You can also enter the hexadecimal code of the color directly in the color field.
               EVApps - widgets Dashboards - Thresholds Color Select - Code.png 
  • If you want colors to be symmetrical based on the color of the central segment, select [ ON ] in Symmetric colors edition.
Tags:
Last modified by Unknown User on 2017/05/23 10:23
Created by Administrator XWiki on 2014/09/02 11:47

Shortcuts

Recent Updates

Haven't been here in a while? Here's what changed recently:

-   Product name - ev itsm.png
-   Product name - ev sas.png

Interesting Content

How to Automate Integration
Add a Shortcut to an App
History
Quick Dashboard
Full text search - Stop Words

Powered by XWiki ©, EasyVista 2018