Tutorial 46: Four gauges with titles
« on: February 05, 2016, 01:26:01 AM »
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 four 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 mcolRandomLightColor() As Color
  mcolRandomLightColor = Color.FromArgb(Rnd() * 128 + 127, Rnd() * 128 + 127, Rnd() * 128 + 127)
End Function
Private Function mcolRandomDarkColor() As Color
  mcolRandomDarkColor = Color.FromArgb(Rnd() * 128, Rnd() * 128, Rnd() * 128)
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 = 3
  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 = False
    .LegendAlignment = STYLEALIGNMENT.STYLEALIGNMENT_BOTTOM_CENTER
    .LegendText = ""
    .YAxisScaleMode = SCALEMODE.SCALEMODE_FIXED
    .YAxisScaleMinimum = 0
    .YAxisScaleMaximum = 100
    .YAxisNumericFormat = "0"
    .YAxisDividersCount = 8
    For k = 0 To MAX_GAUGES
      pens(k) = New Pen(mcolRandomDarkColor, 6)
      backStyle(k) = New SolidBrush(Color.White)
      seriesColor(k) = backStyle(k).Color
      borderStyle(k) = New Pen(mcolRandomLightColor, 3)
      radius(k) = 0.25
      circleBackColor(k) = New SolidBrush(mcolRandomLightColor)
      circleBorderStyle(k) = New Pen(mcolRandomLightColor, 1)
      bigTickStyle(k) = New Pen(mcolRandomDarkColor, 5)
      smallTickStyle(k) = New Pen(bigTickStyle(k).Color, 1)
      needleStyle(k) = New Pen(mcolRandomDarkColor, 4)
      needleStyle(k).EndCap = Drawing2D.LineCap.ArrowAnchor
    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
    Dim gaugeTitles() As String = New String() {"Gauge 1", "Gauge 2", "Gauge 3", "Gauge 4"}
    .GaugeTitles = gaugeTitles
    .GaugeTitlesFont = New Font("Verdana", 13, FontStyle.Bold)
    .Series = series
    .RefreshChart()
  End With
End Sub
End Class

Results:

« Last Edit: February 16, 2016, 11:16:35 AM by CrossingCharts »