Implement value dampening for the Gauge indicators

Applies to: Nevron Chart for .NET (Gauge for .NET)

How to implement value dampening for the Gauge indicators?

Nevron Gauge for .NET provides support for value dampening. When enabled the value dampening will smooths the transition of indicators when their value changes.

The following code example demonstrates how to implement value dampening for the Gauge indicators:

[C#]

using Nevron.Chart;
using Nevron.GraphicsCore;
using Nevron.SmartShapes;
...
Timer m_Timer;
double m_Angle;
NRangeIndicator m_RangeInidcator;
NNeedleValueIndicator m_Needle;
NMarkerValueIndicator m_Marker;
Random rand = new Random();
 
private void Form1_Load(object sender, EventArgs e)
{
    nChartControl1.Panels.Clear();
 
    NRadialGaugePanel radialGauge = new NRadialGaugePanel();
    nChartControl1.Panels.Add(radialGauge);
    radialGauge.Dock = DockStyle.Fill;
 
    radialGauge.BeginAngle = 110;
    radialGauge.SweepAngle = 320;
    radialGauge.InnerRadius = new NLength(0);
    radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle;
 
    // Gauge cap style
    radialGauge.CapStyle.Size = new NSizeL(25, 25);
    radialGauge.CapStyle.Shape.FillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 51, 51, 51), Color.FromArgb(255, 255, 255, 255));
    radialGauge.CapStyle.Shape.StrokeStyle.Width = new NLength(1);
    radialGauge.CapStyle.Shape.StrokeStyle.Color = Color.FromArgb(255, 41, 41, 41);
    radialGauge.CapStyle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
    radialGauge.CapStyle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    radialGauge.CapStyle.Shape.ShadowStyle.Offset = new NPointL(2, 2);
    radialGauge.CapStyle.Shape.ShadowStyle.FadeLength = new NLength(4);
    radialGauge.CapStyle.Shape.ShadowStyle.Scale = 1;
 
    // apply background effect to the gauge
    NEdgeBorderStyle borderStyle = new NEdgeBorderStyle(BorderShape.Auto);
    borderStyle.OuterBevelWidth = new NLength(6);
    borderStyle.OuterBevelFillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221));
    borderStyle.InnerBevelWidth = new NLength(3);
    borderStyle.InnerBevelFillStyle = new NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221));
    borderStyle.MiddleBevelWidth = new NLength(0);
    radialGauge.BorderStyle = borderStyle;
 
    radialGauge.BackgroundFillStyle = new NColorFillStyle(Color.Gray);
 
    // apply glass effect to the gauge
    NGlassEffectStyle glass = new NGlassEffectStyle();
    glass.CornerRounding = new NLength(10);
    glass.DarkColor = Color.FromArgb(200, Color.LightGray);
    glass.LightColor = Color.FromArgb(200, Color.White);
    glass.EdgeDepth = new NLength(6);
    glass.EdgeOffset = new NLength(1);
    glass.LightDirection = -39;
    glass.LightSpread = 66;
    radialGauge.PaintEffect = glass;
 
    // add needle indicators
    m_Needle = new NNeedleValueIndicator();
    m_Needle.Value = 74;
    m_Needle.OffsetFromScale = new NLength(-18);
    m_Needle.Width = new NLength(8);
    m_Needle.Shape.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0));
    m_Needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33);
    m_Needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
    m_Needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    m_Needle.Shape.ShadowStyle.Offset = new NPointL(2, 2);
    m_Needle.Shape.ShadowStyle.FadeLength = new NLength(4);
    m_Needle.Shape.ShadowStyle.Scale = 1;
    m_Needle.DampeningInterval = 20;
    m_Needle.DampeningSteps = 50;
    m_Needle.EnableDampening = true;
    radialGauge.Indicators.Add(m_Needle);
 
    // add marker indicators
    m_Marker = new NMarkerValueIndicator();
    m_Marker.Value = 90;
 
    N2DSmartShapeFactory factory = new N2DSmartShapeFactory(m_Marker.Shape.FillStyle, m_Marker.Shape.StrokeStyle, m_Marker.Shape.ShadowStyle);
    m_Marker.Shape = factory.CreateShape(SmartShape2D.InvertedTriangle);
 
    m_Marker.OffsetFromScale = new NLength(-25);
    m_Marker.Width = new NLength(8);
    m_Marker.Height = new NLength(10);
    m_Marker.Shape.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 119, 255, 119), Color.FromArgb(255, 0, 128, 0));
    m_Marker.Shape.StrokeStyle.Color = Color.FromArgb(255, 0, 102, 0);
    m_Marker.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
    m_Marker.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    m_Marker.Shape.ShadowStyle.Offset = new NPointL(-2, -2);
    m_Marker.Shape.ShadowStyle.FadeLength = new NLength(4);
    m_Marker.Shape.ShadowStyle.Scale = 1;
    m_Marker.DampeningInterval = 10;
    m_Marker.DampeningSteps = 10;
    m_Marker.EnableDampening = true;
    radialGauge.Indicators.Add(m_Marker);
 
    // add range indicator
    m_RangeInidcator = new NRangeIndicator();
    m_RangeInidcator.PaintOrder = IndicatorPaintOrder.BeforeScale;
    m_RangeInidcator.OffsetFromScale = new NLength(-20);
    m_RangeInidcator.Value = 79;
    m_RangeInidcator.BeginWidth = new NLength(1);
    m_RangeInidcator.EndWidth = new NLength(10);
    m_RangeInidcator.StrokeStyle.Width = new NLength(0);
    m_RangeInidcator.FillStyle = new NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255));
    m_RangeInidcator.DampeningInterval = 20;
    m_RangeInidcator.DampeningSteps = 10;
    m_RangeInidcator.EnableDampening = true;
    radialGauge.Indicators.Add(m_RangeInidcator);
 
    // configure axis
    NGaugeAxis axis = (NGaugeAxis)radialGauge.Axes[0];
    axis.Range = new NRange1DD(0, 100);
 
    // modify the anchor so that labels appear after the scale
    axis.Anchor = new NDockGaugeAxisAnchor(GaugeAxisDockZone.Top, true, RulerOrientation.Left, 3, 97);
 
    // configure and apply settings to the gauge scale
    NStandardScaleConfigurator scale = (NStandardScaleConfigurator)axis.ScaleConfigurator;
     
    scale.RulerStyle.Shape = ScaleLevelShape.Bar;
    scale.RulerStyle.Height = new NLength(3);
    scale.RulerStyle.Offset = new NLength(0);
    scale.RulerStyle.BorderStyle.Width = new NLength(0);
    scale.RulerStyle.FillStyle = new NColorFillStyle(Color.White);
 
    scale.LabelStyle.TextStyle.FontStyle = new NFontStyle("Verdana", 8, FontStyle.Bold);
    scale.LabelStyle.TextStyle.ShadowStyle.Type = ShadowType.GaussianBlur;
    scale.LabelStyle.TextStyle.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
    scale.LabelStyle.TextStyle.ShadowStyle.Offset = new NPointL(1, 1);
    scale.LabelStyle.TextStyle.ShadowStyle.FadeLength = new NLength(1);
    scale.LabelStyle.TextStyle.ShadowStyle.Scale = 1;
    scale.LabelStyle.TextStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.LabelStyle.Angle = new NScaleLabelAngle(ScaleLabelAngleMode.View, 0, true);
    scale.LabelStyle.Offset = new NLength(0);
 
    // configure the scale ticks
    scale.OuterMajorTickStyle.Visible = false;
    scale.OuterMinorTickStyle.Visible = false;
    scale.MajorTickMode = MajorTickMode.AutoMinDistance;
    scale.MinTickDistance = new NLength(25);
    scale.MinorTickCount = 3;
 
    scale.InnerMajorTickStyle.Shape = ScaleTickShape.Triangle;
    scale.InnerMajorTickStyle.Length = new NLength(10);
    scale.InnerMajorTickStyle.Width = new NLength(3);
    scale.InnerMajorTickStyle.LineStyle.Width = new NLength(0);
    scale.InnerMajorTickStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.InnerMajorTickStyle.Offset = new NLength(0);
 
    scale.InnerMinorTickStyle.Shape = ScaleTickShape.Ellipse;
    scale.InnerMinorTickStyle.Length = new NLength(2);
    scale.InnerMinorTickStyle.Width = new NLength(2);
    scale.InnerMinorTickStyle.LineStyle.Width = new NLength(0);
    scale.InnerMinorTickStyle.FillStyle = new NColorFillStyle(Color.White);
    scale.InnerMinorTickStyle.Offset = new NLength(-1);
     
    nChartControl1.AutoRefresh = true;
 
    m_Timer = new Timer();
    m_Timer.Interval = 500;
    m_Timer.Start();
    m_Timer.Tick += new EventHandler(m_Timer_Tick);
}
 
void m_Timer_Tick(object sender, EventArgs e)
{
    m_Angle += Math.PI / 180.0;
    m_RangeInidcator.Value = 50 + Math.Sin(m_Angle) * (20 + rand.Next(30));
    m_Needle.Value = 50 + Math.Sin(m_Angle) * (30 + rand.Next(20));
    m_Marker.Value = 50 + Math.Sin(m_Angle) * (30 + rand.Next(20));
 
    nChartControl1.Refresh();
}

[VB.NET]

Imports Nevron.Chart
Imports Nevron.GraphicsCore
Imports Nevron.SmartShapes
...
Dim m_Timer As Timer
Dim m_Angle As Double
Dim m_RangeInidcator As NRangeIndicator
Dim m_Needle As NNeedleValueIndicator
Dim m_Marker As NMarkerValueIndicator
Dim rand As New Random()
 
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
    NChartControl1.Panels.Clear()
 
    Dim radialGauge As New NRadialGaugePanel()
    NChartControl1.Panels.Add(radialGauge)
    radialGauge.Dock = DockStyle.Fill
 
    radialGauge.BeginAngle = 110
    radialGauge.SweepAngle = 320
    radialGauge.InnerRadius = New NLength(0)
    radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle
 
    ' Gauge cap style
    radialGauge.CapStyle.Size = New NSizeL(25, 25)
    radialGauge.CapStyle.Shape.FillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 51, 51, 51), Color.FromArgb(255, 255, 255, 255))
    radialGauge.CapStyle.Shape.StrokeStyle.Width = New NLength(1)
    radialGauge.CapStyle.Shape.StrokeStyle.Color = Color.FromArgb(255, 41, 41, 41)
    radialGauge.CapStyle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
    radialGauge.CapStyle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    radialGauge.CapStyle.Shape.ShadowStyle.Offset = New NPointL(2, 2)
    radialGauge.CapStyle.Shape.ShadowStyle.FadeLength = New NLength(4)
    radialGauge.CapStyle.Shape.ShadowStyle.Scale = 1
 
    ' apply background effect to the gauge
    Dim borderStyle As New NEdgeBorderStyle(BorderShape.Auto)
    borderStyle.OuterBevelWidth = New NLength(6)
    borderStyle.OuterBevelFillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221))
    borderStyle.InnerBevelWidth = New NLength(3)
    borderStyle.InnerBevelFillStyle = New NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant1, Color.FromArgb(255, 0, 0, 0), Color.FromArgb(255, 221, 221, 221))
    borderStyle.MiddleBevelWidth = New NLength(0)
    radialGauge.BorderStyle = borderStyle
 
    radialGauge.BackgroundFillStyle = New NColorFillStyle(Color.Gray)
 
    ' apply glass effect to the gauge
    Dim glass As New NGlassEffectStyle()
    glass.CornerRounding = New NLength(10)
    glass.DarkColor = Color.FromArgb(200, Color.LightGray)
    glass.LightColor = Color.FromArgb(200, Color.White)
    glass.EdgeDepth = New NLength(6)
    glass.EdgeOffset = New NLength(1)
    glass.LightDirection = -39
    glass.LightSpread = 66
    radialGauge.PaintEffect = glass
 
    ' add needle indicators
    m_Needle = New NNeedleValueIndicator()
    m_Needle.Value = 74
    m_Needle.OffsetFromScale = New NLength(-18)
    m_Needle.Width = New NLength(8)
    m_Needle.Shape.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0))
    m_Needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33)
    m_Needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
    m_Needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    m_Needle.Shape.ShadowStyle.Offset = New NPointL(2, 2)
    m_Needle.Shape.ShadowStyle.FadeLength = New NLength(4)
    m_Needle.Shape.ShadowStyle.Scale = 1
    m_Needle.DampeningInterval = 20
    m_Needle.DampeningSteps = 50
    m_Needle.EnableDampening = True
    radialGauge.Indicators.Add(m_Needle)
 
    ' add marker indicators
    m_Marker = New NMarkerValueIndicator()
    m_Marker.Value = 90
 
    Dim factory As New N2DSmartShapeFactory(m_Marker.Shape.FillStyle, m_Marker.Shape.StrokeStyle, m_Marker.Shape.ShadowStyle)
    m_Marker.Shape = factory.CreateShape(SmartShape2D.InvertedTriangle)
 
    m_Marker.OffsetFromScale = New NLength(-25)
    m_Marker.Width = New NLength(8)
    m_Marker.Height = New NLength(10)
    m_Marker.Shape.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 119, 255, 119), Color.FromArgb(255, 0, 128, 0))
    m_Marker.Shape.StrokeStyle.Color = Color.FromArgb(255, 0, 102, 0)
    m_Marker.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
    m_Marker.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    m_Marker.Shape.ShadowStyle.Offset = New NPointL(-2, -2)
    m_Marker.Shape.ShadowStyle.FadeLength = New NLength(4)
    m_Marker.Shape.ShadowStyle.Scale = 1
    m_Marker.DampeningInterval = 10
    m_Marker.DampeningSteps = 10
    m_Marker.EnableDampening = True
    radialGauge.Indicators.Add(m_Marker)
 
    ' add range indicator
    m_RangeInidcator = New NRangeIndicator()
    m_RangeInidcator.PaintOrder = IndicatorPaintOrder.BeforeScale
    m_RangeInidcator.OffsetFromScale = New NLength(-20)
    m_RangeInidcator.Value = 79
    m_RangeInidcator.BeginWidth = New NLength(1)
    m_RangeInidcator.EndWidth = New NLength(10)
    m_RangeInidcator.StrokeStyle.Width = New NLength(0)
    m_RangeInidcator.FillStyle = New NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255))
    m_RangeInidcator.DampeningInterval = 20
    m_RangeInidcator.DampeningSteps = 10
    m_RangeInidcator.EnableDampening = True
    radialGauge.Indicators.Add(m_RangeInidcator)
 
    ' configure axis
    Dim axis As NGaugeAxis = DirectCast(radialGauge.Axes(0), NGaugeAxis)
    axis.Range = New NRange1DD(0, 100)
 
    ' modify the anchor so that labels appear after the scale
    axis.Anchor = New NDockGaugeAxisAnchor(GaugeAxisDockZone.Top, True, RulerOrientation.Left, 3, 97)
 
    ' configure and apply settings to the gauge scale
    Dim scale As NStandardScaleConfigurator = DirectCast(axis.ScaleConfigurator, NStandardScaleConfigurator)
 
    scale.RulerStyle.Shape = ScaleLevelShape.Bar
    scale.RulerStyle.Height = New NLength(3)
    scale.RulerStyle.Offset = New NLength(0)
    scale.RulerStyle.BorderStyle.Width = New NLength(0)
    scale.RulerStyle.FillStyle = New NColorFillStyle(Color.White)
 
    scale.LabelStyle.TextStyle.FontStyle = New NFontStyle("Verdana", 8, FontStyle.Bold)
    scale.LabelStyle.TextStyle.ShadowStyle.Type = ShadowType.GaussianBlur
    scale.LabelStyle.TextStyle.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
    scale.LabelStyle.TextStyle.ShadowStyle.Offset = New NPointL(1, 1)
    scale.LabelStyle.TextStyle.ShadowStyle.FadeLength = New NLength(1)
    scale.LabelStyle.TextStyle.ShadowStyle.Scale = 1
    scale.LabelStyle.TextStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.LabelStyle.Angle = New NScaleLabelAngle(ScaleLabelAngleMode.View, 0, True)
    scale.LabelStyle.Offset = New NLength(0)
 
    ' configure the scale ticks
    scale.OuterMajorTickStyle.Visible = False
    scale.OuterMinorTickStyle.Visible = False
    scale.MajorTickMode = MajorTickMode.AutoMinDistance
    scale.MinTickDistance = New NLength(25)
    scale.MinorTickCount = 3
 
    scale.InnerMajorTickStyle.Shape = ScaleTickShape.Triangle
    scale.InnerMajorTickStyle.Length = New NLength(10)
    scale.InnerMajorTickStyle.Width = New NLength(3)
    scale.InnerMajorTickStyle.LineStyle.Width = New NLength(0)
    scale.InnerMajorTickStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.InnerMajorTickStyle.Offset = New NLength(0)
 
    scale.InnerMinorTickStyle.Shape = ScaleTickShape.Ellipse
    scale.InnerMinorTickStyle.Length = New NLength(2)
    scale.InnerMinorTickStyle.Width = New NLength(2)
    scale.InnerMinorTickStyle.LineStyle.Width = New NLength(0)
    scale.InnerMinorTickStyle.FillStyle = New NColorFillStyle(Color.White)
    scale.InnerMinorTickStyle.Offset = New NLength(-1)
 
    NChartControl1.AutoRefresh = True
 
    m_Timer = New Timer()
    m_Timer.Interval = 500
    m_Timer.Start()
    AddHandler m_Timer.Tick, AddressOf m_Timer_Tick
End Sub
 
Private Sub m_Timer_Tick(ByVal sender As Object, ByVal e As EventArgs)
    m_Angle += Math.PI / 180.0
    m_RangeInidcator.Value = 50 + Math.Sin(m_Angle) * (20 + rand.[Next](30))
    m_Needle.Value = 50 + Math.Sin(m_Angle) * (30 + rand.[Next](20))
    m_Marker.Value = 50 + Math.Sin(m_Angle) * (30 + rand.[Next](20))
 
    nChartControl1.Refresh()
End Sub

Article ID: 196, Created On: 7/22/2011, Modified: 7/29/2011

Knowledge Base

News

Community Forums

Online Help Documentation

Online Demos

Article Rating

Implement value dampening for the Gauge indicators

Comments (0)