Home
.NET components

 

 
Overview Features Gallery Free Trial Support Purchase
         

Tutorials index / Example 16: Gauge charts

How to draw nice gauge charts. Super 2d/3d Graph Library allows you to draw from one to 16+ gauges on the same chart. In this example two random gauges are drawn.

Steps:

1. Create a new Windows application project (VB.NET)

2. Add Super 2d/3d Graph Library to the toolbox pallete and drag it to Form1.

3. Copy and paste de following code:

Note: the code in the Form1_Load event could be used in ASP.NET applications as well.

 Form Code

Imports Super2d3dGraphLibrary

Public Class Form1

  Private Function mcolRandomColor() As Color
    mcolRandomColor = Color.FromArgb(Rnd() * 255, Rnd() * 255,
    Rnd() * 255)
  End Function

  Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As
  System.EventArgs) Handles MyBase
.Load

  Dim k As Integer
  Dim MAX_GAUGES As Integer = 1
  Dim series(MAX_GAUGES) As ArrayList ' Two gauges

  For k = 0 To MAX_GAUGES
    series(k) = New ArrayList
    series(k).Add(Rnd() * 100)
  Next

  Dim pens(MAX_GAUGES) As Pen
  Dim backStyle(MAX_GAUGES) As SolidBrush
  Dim borderStyle(MAX_GAUGES) As Pen
  Dim radius(MAX_GAUGES) As Single
  Dim circleBackColor(MAX_GAUGES) As SolidBrush
  Dim circleBorderStyle(MAX_GAUGES) As Pen
  Dim bigTickStyle(MAX_GAUGES) As Pen
  Dim smallTickStyle(MAX_GAUGES) As Pen
  Dim needleStyle(MAX_GAUGES) As Pen
  Dim seriesColor(MAX_GAUGES) As Color

  With Super2D3dGraph1
    .AutoRefresh = False
    .LicenseeIdentifier = "STAND"
    .Title = "Gauge sample"
    .Style = STYLE2D3D.STYLE2D_GAUGE
    .ShowDataTable = False
    .ShowLegend = True
    .LegendAlignment = STYLEALIGNMENT.STYLEALIGNMENT_BOTTOM_CENTER
    .SeriesLegend = New String() {"Dial 1", "Dial 2"}
    .LegendText = ""
    .YAxisScaleMode = SCALEMODE.SCALEMODE_FIXED
    .YAxisScaleMinimum = 0
    .YAxisScaleMaximum = 100
    .YAxisNumericFormat = "0"
    .YAxisDividersCount = 8
    .YAxisColor = Color.Yellow

    For k = 0 To MAX_GAUGES
      pens(k) = New Pen(mcolRandomColor, 6)
      backStyle(k) = New SolidBrush(mcolRandomColor)
      seriesColor(k) = backStyle(k).Color
      borderStyle(k) = New Pen(mcolRandomColor, 3)
      radius(k) = 0.25
      circleBackColor(k) = New SolidBrush(mcolRandomColor)
      circleBorderStyle(k) = New Pen(mcolRandomColor, 1)
      bigTickStyle(k) = New Pen(mcolRandomColor, 5)
      smallTickStyle(k) = New Pen(bigTickStyle(k).Color, 1)
      needleStyle(k) = New Pen(mcolRandomColor, 4)
    Next

    .SeriesColor = seriesColor
    .BackStyle = STYLEBACKGROUND.
            STYLEBACKGROUND_GRADIENT_TUBULAR_INVERTED
    .BackColor = Color.PowderBlue
    .GaugeNeedleStyle = needleStyle
    .GaugeBackStyle = backStyle
    .GaugeBorderStyle = borderStyle
    .GaugeCentralCircleRadius = radius
    .GaugeCentralCircleBackStyle = circleBackColor
    .GaugeCentralCircleBorderStyle = circleBorderStyle
    .GaugeBigTickStyle = bigTickStyle
    .GaugeSmallTickStyle = smallTickStyle
    .GaugeMarginFactor = 0.05

    .Series = series
    .RefreshChart()

  End With

End Sub

End Class

 

 Result:


 

 

 
Top