Skip to main content

JustGage

Namespace: Wisej.Web.Ext.JustGage

Assembly: Wisej.Web.Ext.JustGage (4.1.0.0)

Represents an animated gauge control based on the JustGage (http://justgage.com/) JavaScript library.

public class JustGage : Control

The gauge displays Value within the range defined by Minimum and Maximum. Changing Value animates the gauge level to the new value, changing any other property recreates the gauge on the client.

Constructors​

Instance member JustGage()​

Initializes a new instance of JustGage.

Properties​

Instance member BorderStyle​

BorderStyle: Returns or sets the border style for the control. (Default: None)

Value: One of the BorderStyle values. The default is BorderStyle.None.

Instance member Counter​

Boolean: Returns or sets a value that indicates whether the value text should be animated. (Default: False)

When true, the value text counts up (or down) to the new value while the gauge level animates; when false, the final value is displayed immediately.

Instance member CustomSectors​

CustomSector[]: Returns or sets the custom sectors for the gauge. (Default: null)

Each CustomSector defines a range of absolute values and the color used to draw the gauge level when the value is within the range. When custom sectors are set, Gradient is ignored; values that don't fall in any sector use the default colors. Changes to the items of the array are not detected: assign a new array to update the gauge.

Example:

Coloring the gauge green, yellow and red depending on the value:

this.justGage1.CustomSectors = new CustomSector[]
{
    new CustomSector { Lo = 0, Hi = 60, Color = Color.Green },
    new CustomSector { Lo = 61, Hi = 85, Color = Color.Gold },
    new CustomSector { Lo = 86, Hi = 100, Color = Color.Red }
};

Instance member Decimals​

Int32: Returns or sets the number of decimal places to display. (Default: 0)

When HumanFriendly is true, the value is used as the number of decimal places of the abbreviated numbers. It's ignored when FormatNumber is true and HumanFriendly is false.

Instance member Differential​

Boolean: Returns or sets a value that indicates whether the Gauge will fill starting from the center, rather than from the min value. (Default: False)

Useful with a range centered on zero, i.e. Minimum = -50 and Maximum = 50: positive values fill to the right of the center and negative values to the left.

Instance member Donut​

Boolean: Returns or sets a value that indicates whether the gauge should display as a donut. (Default: False)

Instance member FormatNumber​

Boolean: Returns or sets a value that indicates whether the number should be displayed with thousand separators. (Default: False)

The separator is always a comma, regardless of the current culture, and the number is displayed without rounding to Decimals. This property is ignored when HumanFriendly is true.

Instance member Gradient​

Boolean: Returns or sets a value that indicates whether the gauge sectors should change with a gradient. (Default: True)

When true, the color of the gauge level blends smoothly between the sector colors; when false, the color changes in steps. This property is ignored when CustomSectors is set.

Instance member HumanFriendly​

Boolean: Returns or sets a value that indicates whether large numbers are displayed in a human friendly fashion for min/max and value. (Default: False)

Numbers are divided by 1000 for each step and suffixed with K, M, G, T, P or E, i.e. 1234567 is displayed as 1M, or as 1.2M when Decimals is 1. When true, FormatNumber is ignored.

Example:

Displaying large values with one decimal place:

this.justGage1.Maximum = 5000000;
this.justGage1.HumanFriendly = true;
this.justGage1.Decimals = 1;
this.justGage1.Value = 1234567; // displays "1.2M"

Instance member Label​

String: Returns or sets the label to display below the value. (Default: "")

The label is drawn using the LabelColor. Setting this property to null sets it to an empty string.

Instance member LabelColor​

Color: Returns or sets the label color.

The color is used for the Label text and the min and max labels. When not set, it's read from the "labelColor" color of the current theme.

Instance member Maximum​

Single: Returns or sets the upper limit of the range. (Default: 100)

The maximum value is displayed below the right end of the gauge when ShowMinMax is true. Set Minimum and Maximum so that the minimum is less than the maximum.

Instance member Minimum​

Single: Returns or sets the lower limit of the range. (Default: 0)

The minimum value is displayed below the left end of the gauge when ShowMinMax is true. Set Minimum and Maximum so that the minimum is less than the maximum.

Example:

Setting up a gauge for a value between -50 and 50:

this.justGage1.Maximum = 50;
this.justGage1.Minimum = -50;
this.justGage1.Differential = true;

Instance member RefreshAnimationType​

JustGageAnimationType: Returns or sets a value that indicates the type of animation used when the value is refreshed. (Default: EaseIn)

The refresh animation is played when the Value property changes.

Instance member Reverse​

Boolean: Returns or sets a value that indicates whether the gauge display should be reversed. (Default: False)

When true, the gauge fills from right to left and the min and max labels are swapped.

Instance member ShowMinMax​

Boolean: Returns or sets a value that indicates whether the min and max labels should be displayed. (Default: True)

The labels show the values of Minimum and Maximum below the ends of the gauge, using the LabelColor.

Instance member ShowPointer​

Boolean: Returns or sets a value that indicates whether the pointer should be displayed. (Default: False)

Instance member ShowValue​

Boolean: Returns or sets a value that indicates whether the value text should be displayed in the gauge. (Default: True)

The value text is formatted according to Decimals, HumanFriendly, FormatNumber and Symbol and is drawn using the ValueColor.

Instance member StartAnimationType​

JustGageAnimationType: Returns or sets a value that indicates the type of animation used when the gauge is first displayed. (Default: EaseIn)

The gauge is recreated, and the start animation is played again, every time a property other than Value changes.

Instance member Symbol​

String: Returns or sets the symbol to display with the value. (Default: "")

The symbol is appended to the value text, i.e. "%" or " km/h". Setting this property to null sets it to an empty string.

Example:

Displaying a percentage:

this.justGage1.Symbol = "%";
this.justGage1.Label = "CPU";
this.justGage1.Value = 42;

Instance member Text​

Deprecated memberDeprecated: Use the Label property instead. String: Returns or sets the text of the JustGage control. (Deprecated) Since 3.5.4 (Default: "")

This property is obsolete, use Label instead. The text is displayed as the label below the value only while the Label property has never been assigned.

Instance member TitlePosition​

JustGageTitlePosition: Returns or sets a value that indicates whether the title should be above or below the gauge. (Default: Above)

The value is passed to the client library as "above" or "below". The bundled JustGage 1.7.0 library doesn't render a title, therefore this property currently has no visible effect.

Instance member Value​

Single: Returns or sets a numeric value that represents the current position of the JustGage widget. (Default: 0)

The value is not clamped to the range defined by Minimum and Maximum. When the value changes, the gauge animates to the new value on the client using the RefreshAnimationType animation and the ValueChanged event is fired.

Example:

Updating the gauge periodically from a timer:

private void timer1_Tick(object sender, EventArgs e)
{
    this.justGage1.Value = GetCurrentTemperature();
}

Instance member ValueColor​

Color: Returns or sets the value color.

The color is used for the value text. When not set, it's read from the "valueColor" color of the current theme.

Methods​

Protected member OnValueChanged(e)​

Fires the ValueChanged event.

ParameterTypeDescription
eEventArgsThe EventArgs that contains the event data.

Protected member OnWebRender(config)​

Renders the client component.

ParameterTypeDescription
configObjectDynamic configuration object.

Events​

Instance member ValueChanged​

EventHandler Fired when the value changes.

Implements​

NameDescription
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejSerializable