# Gauge Control

This documentation is valid for:

#### Introduction

There are many scenarios where we need to show a numeric value as a gauge in order to give the final user a better data visualization for the number.

#### Examples

The user control is really simple, you just need to set one property in order to get the control working. The Data property. The Data property has not a strict schema.

You can assign a simple numeric variable to the property, a collection of numbers, an SDT with at least a number field, a collection of SDTs.

#### Show a simple numeric value: the speed

• Drag and drop the Gauge Control

• Assign to the Data property a numeric variable or attribute.

• Optionally set the Title property in order to show a label inside the control.

A classical sample can be show the Speed.

#### Show a serie of numeric values: speeds

• Drag and drop the Gauge Control

• Assign to the Data property a numeric collection variable : &speed

• Optionally set the Title property in order to show a label inside the control.

```Event Start
EndEvent
```

#### Show a serie of numeric values with labels: the speed by driver

• Drag and drop the Gauge Control

In this case we have a simple SDT with:

```Driver C(20)
Speed  N(4)
```

And we define a collection of this type and assign to the Data property.

We need to load data in the start event.

```Event Start
&driver = new()
&driver.Driver = "JNJ"
&driver.Speed = 130

&driver = new()
&driver.Driver = "ALevin"
&driver.Speed = 210

EndEvent
```

As you can see in the image the maximum value now is 250, we can change the maximum and minimun value of the control using the Max and Min properties under the Range category.

At first look we can say that ALevin is faster than JNJ.

```Driver C(20)
Speed  N(4)
SpeedingTickets N(4)```

#### Show Several Values based on a SDT or BC

This control support any SDT or BC variable in its Data property. Basically the control will display a Gauge for each numeric item of the SDT or BC.

So, if for example we have the following SDT : Computer

```ComputerName     C(30)
Memory           Numeric
CPU              Numeric
Network          Numeric
```

And we associate a Computer variable to our control, in runtime we are going to get:

Take into account that non-numeric fields are ignored.

#### Enhance the Gauge Drawing

The Gauge Control has many properties in order to enhance the visualization of your values.

Basically, you can draw ranges with green, yellow or red color.  So there are 6 properties for this

<Color>Form = The lowest value for a range marked by a <Color> color.

<Color>To = The highest value for a range marked by a <Color> color.

So we can set the values for the Uruguay traffic rules in terms of speed.

GreenTo = 45
YellowFrom = 45
YellowTo = 60
RedFrom = 60
RedTo = 210

Is it difficult to stay in the green area? Yes, it is ;)

You can add using MajorTicksLabels property for major tick marks. The number of labels defines the number of major ticks in all gauges. The default is five major ticks, with the labels of the minimal and maximal gauge value.

So, in the sample, you can set the property to the variable &labels, where &labels is a string collection variable

```	&labels.Add("0")
```

So now we have the following gauge for our numeric value

You can set how many minor Ticks are between each major Tick mark using the MinorTicks property.

#### To Install It

Please visit: HowTo: Installing User Controls

#### Implementation Details

GeneXus Gauge Control is based on the Google Gauge Control.

One or more gauges are rendered within the browser using SVG or VML.

### Scope

Objects: Web Panel
Generators: .NET, .NET Framework, Java