Bunifu Radial Gauge

Modern, powerful, data visualization tool; Easy to use, and highly configurable gauges for dashboards.

Overview

Bunifu Radial Gauge is a feature-rich .NET control that serves as a data visualization tool that offers an easy way to create a modern activity gauge for your dashboard forms. It is highly customizable features such as range color and label customization. One can set a gauge scale defined into two parts (i.e., lower and upper scale sections), usually displayed with different colors.

Getting Started

Adding Bunifu Radial Gauge at Design Time

It's easy to add a Bunifu Radial Gauge at the designer level. Locate Bunifu Gauge in your toolbox and drag it to your form as shown below.

You can go ahead to set your desired scale range. We shall discuss more on this later in the documentation.

Adding Bunifu Gauge at Run Time

To add Bunifu Radial Gauge at run time, use the Load event handler of your form to run the following code:

C#

using Bunifu.UI.WinForms;
private void Form1_Load(object sender, EventArgs e)
{
    //create an instance of Bunifu Radial Gauge
    BunifuRadialGauge radialGauge = new BunifuRadialGauge();
    //set the scale for the gauge
    radialGauge.Minimum = 0;
    radialGauge.Maximum = 50;
    //set an initial value for the radial gauge
    radialGauge.Value = 35;
    //set a warning mark value for color change
    radialGauge.WarningMark = 25;
    //set the location of the radial gauge
    radialGauge.Location = new Point(300, 165);
    //add the control to the form
    this.Controls.Add(radialGauge);
}

VB.NET

Imports Bunifu.UI.WinForms
Private Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	'create an instance of Bunifu Radial Gauge
	Dim radialGauge As New BunifuRadialGauge()
	'set the scale for the gauge
	radialGauge.Minimum = 0
	radialGauge.Maximum = 50
	'set an initial value for the radial gauge
	radialGauge.Value = 35
	'set a warning mark value for color change
	radialGauge.WarningMark = 25
	'set the location of the radial gauge
	radialGauge.Location = New Point(300, 165)
	'add the control to the form
	Me.Controls.Add(radialGauge)
End Sub

Let's take a deep dive and get insights into the available properties on Bunifu Radial Gauge.

Progress Properties

1. ProgressBackColor

This property allows you to get or set the background color of the progress track in the radial gauge. It supports the use of RGB or HEX color values.

2. ProgressColorHigh

This property allows you to get or define the progress indicator color when the progress value exceeds or equals the warning mark value.

To set the value of a warning mark, use the WarningMark property.

3. ProgressColorLow

This property allows you to get or define the progress indicator color value when the progress value is below the warning mark value.

4. ProgressCap

This property allows you to get or set the start and end cap of the progress indicator. The caps are available in two styles: round and flat. The flat cap style is the default value.

5. Thickness

This property allows you to get or set the height value of the progress track and its indicator. The higher the value, the thicker the control.

6. AutoGenerateProgressColorWhenHigh

This property allows you to get or set a boolean value that, when set to true, causes the progress track to automatically change to a light background color when the value exceeds or equals the warning mark value.

The light background color is applied automatically based on the color of the indicator and its lightning value.

7. AutoGenerateProgressColorWhenLow

This property allows you to get or set a boolean value that, when set to true, causes the progress track to automatically change to light background color when the value is below the warning mark value.

The background color is determined automatically by the set indicator's color and lightning value.

8. LighteningFactor

This property allows you to get or set the luminance (i.e., the intensity of the track's background color) based on the progress indicator color. The lower the value, the more intense the background color.

Value Properties

1. Maximum

This property allows you to get or define the progress' higher bound value. The default value is set to 100.

2. Minimum

This property allows you to get or define the progress' minimum value. The default value is set to 0.

3. Value

This property allows you to get or set the gauge's progress value. It accepts values that fall within the specified maximum and minimum values.

Similarly to the value property, the ValueByTransition( only accessible via code) allows you to set the value of the range control and renders its progress at runtime with a smooth animation.

Here's how to set a value using ValueByTransition:

C#

private async void Form1_Load(object sender, EventArgs e)
{
    bunifuRadialGauge1.Value = 0;
    await Task.Delay(1000);
    bunifuRadialGauge1.ValueByTransition = 85;
}

VB.NET

Private Async Sub Form1_Load(ByVal sender As Object, ByVal e As EventArgs)
	bunifuRadialGauge1.Value = 0
	Await Task.Delay(1000)
	bunifuRadialGauge1.ValueByTransition = 85
End Sub

The control has given us a further ability to control the transition time of the value set using the TransitionValue() method. It takes two parameters: the first parameter is the progress value, while the second parameter is the time taken in milliseconds required to transition from an initial progress value to the current set progress value.

The code below shows how the method has been used in the form's load event:

C#

private void Form3_Load(object sender, EventArgs e)
{
    bunifuRadialGauge1.Value = 0;
    bunifuRadialGauge1.TransitionValue(72, 1500);
}

VB.NET

Private Sub Form3_Load(ByVal sender As Object, ByVal e As EventArgs)
	bunifuRadialGauge1.Value = 0
	bunifuRadialGauge1.TransitionValue(72, 1500)
End Sub

The ValueChanged event allows us to get the occurrences of a value whenever the value property is modified. Thus, it will enable you to have an extended functionality over the control.

4. ValueLabelColor

This property allows you to get or define a color value for the progress value rendered at the center of the control. It supports the use of RGB and HEX color values.

5. RangeLabelColor

This property allows you to get or set a color value applied to the range labels rendered on the lower and higher sections of the gauge.

6. ShowRangeLabels

This property gets or sets a boolean value that, when set to true, causes the range labels to be rendered on the gauge's lower and upper sections while, setting it to false hides the range labels.

7. ShowValueLabel

This property gets or sets a boolean value that, when set to true, causes the value label to be rendered in the center section of the gauge while, setting it to false hides the value label. By default, the property is set to true.

8. WarningMark

This property lets you get or set an integer value that marks the beginning of a high activity value in the radial gauge.

9. Suffix

This property allows you to get or set a string text appended to the end of the progress value. You can append a percentage symbol, a degree symbol, or any other symbol.

10. Prefix

This property allows you to get or set a string text placed before the progress value. A prefix lets you know the quantity of a particular thing (i.e., the S.I unit). For example, one can set a prefix of "K" that can symbolize a thousand units.

Take Away

We hope you have gained insights into using Bunifu Radial Gauge. More feature updates for the control are still upcoming. Should you have feedback or suggestions, please send them via the live chat module on the bottom right corner of the screen.