Tutorial 48: Gauges with different ranges and range colors
« on: February 05, 2016, 01:28:05 AM »
This sample renders 4 gauge charts in the same chart space, using different ambient properties such as colors, brushes and titles, as well as different ranges and scales and range colors.
 
There's a lot of properties to set so this may be the most complete sample for gauge charts.
 
Steps:

1. Create a new Windows application project (VB.NET)
2. Add Crossing Charts Library to the toolbox palette 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
' Auxiliary functions for getting random colors
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
' Main sub
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
  ' Prepare auxiliary variables that holds look&feel settings
  Dim k As Integer
  Dim MAX_GAUGES As Integer = 3
  Dim series(MAX_GAUGES) As ArrayList ' A pack of gauges
  ' Each gauge has one needle (although we can paint more that one)
  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
  Dim gaugesScaleMode(MAX_GAUGES) As SCALEMODE
  Dim gaugesScaleMinimum(MAX_GAUGES) As Single
  Dim gaugesScaleMaximum(MAX_GAUGES) As Single
  Dim gaugesNumericFormat(MAX_GAUGES) As String
  Dim gaugesDividersCount(MAX_GAUGES) As Integer
  Dim gaugeTitles() As String = New String() {"Gauge 1", "Gauge 2", "Gauge 3", "Gauge 4"}
  Dim rangeColors(MAX_GAUGES) As ArrayList
    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
      gaugesScaleMode(k) = SCALEMODE.SCALEMODE_FIXED
      gaugesScaleMinimum(k) = 0
      gaugesScaleMaximum(k) = Rnd() * 50 + 100
      gaugesNumericFormat(k) = "0"
      gaugesDividersCount(k) = 8
      rangeColors(k) = New ArrayList
      rangeColors(k).Add(New Object() {0, 30, Color.FromArgb(200, Color.Red)})
      rangeColors(k).Add(New Object() {30, 50, Color.FromArgb(200, Color.Green)})
      rangeColors(k).Add(New Object() {50, gaugesScaleMaximum(k), Color.FromArgb(200, Color.Yellow)})
    Next
  ' Assign properties to chart
  With CrossingCharts1
    .AutoRefresh = False
    .Title = "Gauges sample"
    .Style = STYLE2D3D.STYLE2D_GAUGE
    .ShowDataTable = False
    .ShowLegend = False
    .LegendAlignment = STYLEALIGNMENT.STYLEALIGNMENT_BOTTOM_CENTER
    .LegendText = ""
    .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
    .GaugesScaleMode = gaugesScaleMode
    .GaugesScaleMinimum = gaugesScaleMinimum
    .GaugesScaleMaximum = gaugesScaleMaximum
    .GaugesNumericFormat = gaugesNumericFormat
    .GaugesDividersCount = gaugesDividersCount
    .GaugeRangeColors = rangeColors
    .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:18:16 AM by CrossingCharts »