# JustGage

The [JustGage](https://github.com/toorshia/justgage) extension component uses the cool JustGage widget to render animated, nice and clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independent and self-adjusting. As a Wisej.NET Real Time widget you can set several properties: value, label, colors, range and more.

![](https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFp7MR1wemvcC5891_r%2F-MiWQFwpcBMRPDJoU0L5%2F-MiWQS0jyVtZ1E25ASEH%2Fimage.png?alt=media\&token=581d9b7b-0874-4e38-8e60-bcdb5598f218)

{% embed url="<https://github.com/iceteagroup/wisej-extensions/tree/master/Wisej.Web.Ext.JustGage>" %}
JustGage Source Code
{% endembed %}

## Code Example

```csharp
Wisej.Web.Ext.JustGage.JustGage justGage1 = new Wisej.Web.Ext.JustGage.JustGage();
justGage1.Maximum = 20F;
justGage1.Minimum = 10F;
justGage1.Value = 15F;
justGage1.Symbol = "°";
justGage1.Text = "Text Here";
this.Controls.Add(justGage1);
```

This code snippet creates a justGage and adds it to the page. The properties *Maximum* and *Minimum* refer to the maximum and minimum values of the gage respectively. *Value* is the current value of the gage. Note that *Maximum*, *Minimum* and *Value* are all floats. Next, the *Symbol* is set to a degrees symbol so that it will appear after the Value. Finally, the *Text* is set to "Text Here". This code will produce a gage that looks like this:

<figure><img src="https://2248866391-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MFp7MR1wemvcC5891_r%2Fuploads%2Fyrwnff6YoeipDuDIE6Z8%2Fjustgage.png?alt=media&#x26;token=8fcd317c-7cc7-4305-b07b-31dce48b0671" alt=""><figcaption></figcaption></figure>

## How to Use

The **JustGage** extension can be added to a Wisej.NET project using NuGet Package Manager.

{% embed url="<https://www.nuget.org/packages/Wisej-3-JustGage>" %}

Define the JustGage range with *Minimum* and *Maximum* and show/hide their labels with [*ShowMinMax*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#showminmax)*.* The title is set up with *Text* and its position with [*TitlePosition*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#titleposition)*.* You can also define animations to be used with [*StartAnimationType* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#startanimationtype)and [*RefreshAnimationType*](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#refreshanimationtype)*.* [*Counter* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#counter)decides whether the value change should be animated. With [*Symbol* ](https://docs.wisej.com/extensions/extensions/api/wisej.web.ext.justgage.justgage#symbol)you can display an additional symbol with the *Value.*

{% hint style="info" %}
Find more information in our JSWidgets example in [C#](https://github.com/iceteagroup/wisej-examples/tree/master/JSWidgets) or in[ VB.NET](https://github.com/iceteagroup/wisej-examples-vb/tree/main/JSWidgets).
{% endhint %}