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