Tutorial 16: Gauge charts
« on: February 04, 2016, 02:44:30 PM »
How to draw nice gauge charts.

Crossing Charts for .NET 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 Crossing Charts 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.

Code: [Select]
Imports CrossingChartsLibrary
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 CrossingCharts1
    .AutoRefresh = False
    .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

Results:

« Last Edit: February 16, 2016, 09:28:51 AM by CrossingCharts »