Applies to: Nevron Chart for .NET (Gauge for .NET)
How to create a simple gauge in ASP.NET application from scratch in Visual Studio?
The following getting started guide will help you create a ASP.NET application, which displays the following radial gauge:
Create a new ASP.NET application:
- Open Microsoft Visual Studio for .NET
- Select the File - New - Project command - the new project dialog will be displayed
- Select Visual C# Projects - ASP.NET Web Application
- Click the OK button
- If the current page view is Source, switch to Design
Insert Nevron Chart control:
- The Nevron .NET Vision installation must register the NChartControl control in the Nevron Chart WebForm toolbox group. In case this group is created go to step 6.
- Right click on the Toolbox background. Select the "Choose Items…" command.
- In the "Customize Toolbox Items" dialog select the ".NET Framework Components" tab.
- Click on the "Browse..." button and select the Nevron.Chart.WebForm.dll assembly located in the Nevron .NET Vision installation directory.
- The NChartControl should appear at the end of the toolbox list.
- Drag and drop the NChartControl on the form.
- Open the solution explorer and make sure to add references to the following Nevron assemblies: Nevron.Chart.dll; Nevron.Chart.WebForm.dll; Nevron.Presentation.dll; Nevron.System.dll; and Nevron.UI.WebForm.Controls.dll;
- From the Solution explorer right click on Default.aspx and select "View code".
- Use the following code example to programmatically create the gauge:
*
The example code can be simplified, this example is meant to shows different gauge properties and style configurations
[C#]
using System;
using System.Drawing;
using Nevron.Chart;
using Nevron.GraphicsCore;
...
protected void Page_Load(object sender, EventArgs e)
{
NChartControl1.BackgroundStyle.FrameStyle.Visible = false;
NChartControl1.Panels.Clear();
NRadialGaugePanel radialGauge = new NRadialGaugePanel();
NChartControl1.Panels.Add(radialGauge);
radialGauge.ContentAlignment = ContentAlignment.MiddleCenter;
radialGauge.Location = new NPointL(new NLength(50, NRelativeUnit.ParentPercentage), new NLength(52, NRelativeUnit.ParentPercentage));
radialGauge.Size = new NSizeL(new NLength(150, NRelativeUnit.ParentPercentage), new NLength(100, NRelativeUnit.ParentPercentage));
radialGauge.BeginAngle = 110;
radialGauge.SweepAngle = 320;
radialGauge.InnerRadius = new NLength(0);
radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle;
// Gauge cap style
radialGauge.CapStyle.Size = new NSizeL(20, 20);
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 NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 221, 221, 221), Color.FromArgb(255, 41, 41, 41));
// 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
NNeedleValueIndicator needle = new NNeedleValueIndicator();
needle.Value = 74;
needle.OffsetFromScale = new NLength(-18);
needle.Width = new NLength(8);
needle.Shape.FillStyle = new NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0));
needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33);
needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur;
needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0);
needle.Shape.ShadowStyle.Offset = new NPointL(2, 2);
needle.Shape.ShadowStyle.FadeLength = new NLength(4);
needle.Shape.ShadowStyle.Scale = 1;
radialGauge.Indicators.Add(needle);
// add range indicator
NRangeIndicator rangeIndicator = new NRangeIndicator();
rangeIndicator.PaintOrder = IndicatorPaintOrder.BeforeScale;
rangeIndicator.OffsetFromScale = new NLength(-20);
rangeIndicator.OriginMode = OriginMode.ScaleMax;
rangeIndicator.Value = 50;
rangeIndicator.BeginWidth = new NLength(1);
rangeIndicator.EndWidth = new NLength(10);
rangeIndicator.StrokeStyle.Width = new NLength(0);
rangeIndicator.FillStyle = new NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255));
radialGauge.Indicators.Add(rangeIndicator);
// 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.SetPredefinedScaleStyle(PredefinedScaleStyle.PresentationNoStroke);
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);
}
[VB.NET]
Imports System
Imports System.Drawing
Imports Nevron.Chart
Imports Nevron.GraphicsCore
...
Protected Sub Page_Load(sender As Object, e As EventArgs)
NChartControl1.BackgroundStyle.FrameStyle.Visible = False
NChartControl1.Panels.Clear()
Dim radialGauge As New NRadialGaugePanel()
NChartControl1.Panels.Add(radialGauge)
radialGauge.ContentAlignment = ContentAlignment.MiddleCenter
radialGauge.Location = New NPointL(New NLength(50, NRelativeUnit.ParentPercentage), New NLength(52, NRelativeUnit.ParentPercentage))
radialGauge.Size = New NSizeL(New NLength(150, NRelativeUnit.ParentPercentage), New NLength(100, NRelativeUnit.ParentPercentage))
radialGauge.BeginAngle = 110
radialGauge.SweepAngle = 320
radialGauge.InnerRadius = New NLength(0)
radialGauge.AutoBorder = RadialGaugeAutoBorder.Circle
' Gauge cap style
radialGauge.CapStyle.Size = New NSizeL(20, 20)
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 NGradientFillStyle(GradientStyle.DiagonalUp, GradientVariant.Variant2, Color.FromArgb(255, 221, 221, 221), Color.FromArgb(255, 41, 41, 41))
' 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
Dim needle As New NNeedleValueIndicator()
needle.Value = 74
needle.OffsetFromScale = New NLength(-18)
needle.Width = New NLength(8)
needle.Shape.FillStyle = New NGradientFillStyle(GradientStyle.Horizontal, GradientVariant.Variant2, Color.FromArgb(255, 255, 255, 255), Color.FromArgb(255, 153, 0, 0))
needle.Shape.StrokeStyle.Color = Color.FromArgb(255, 165, 0, 33)
needle.Shape.ShadowStyle.Type = ShadowType.GaussianBlur
needle.Shape.ShadowStyle.Color = Color.FromArgb(125, 0, 0, 0)
needle.Shape.ShadowStyle.Offset = New NPointL(2, 2)
needle.Shape.ShadowStyle.FadeLength = New NLength(4)
needle.Shape.ShadowStyle.Scale = 1
radialGauge.Indicators.Add(needle)
' add range indicator
Dim rangeIndicator As New NRangeIndicator()
rangeIndicator.PaintOrder = IndicatorPaintOrder.BeforeScale
rangeIndicator.OffsetFromScale = New NLength(-20)
rangeIndicator.OriginMode = OriginMode.ScaleMax
rangeIndicator.Value = 50
rangeIndicator.BeginWidth = New NLength(1)
rangeIndicator.EndWidth = New NLength(10)
rangeIndicator.StrokeStyle.Width = New NLength(0)
rangeIndicator.FillStyle = New NGradientFillStyle(GradientStyle.StartToEnd, GradientVariant.Variant2, Color.FromArgb(255, 204, 0, 0), Color.FromArgb(1, 255, 255, 255))
radialGauge.Indicators.Add(rangeIndicator)
' 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.SetPredefinedScaleStyle(PredefinedScaleStyle.PresentationNoStroke);
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)
End Sub
Article ID: 122, Created On: 11/9/2010, Modified: 12/1/2010