ChartDirector 6.0 (ASP/COM/VB Edition)

Neon Round Meters


      

This examples demonstrates various shading effects to create round meters with a neon look and feel. It also demonstrates how to create meters that can easily be resized.

In this example, the code uses a single size parameter as input, and it derives all the other sizes, such as the radius of the various parts of the chart, the font size, line widths and tick lengths. This allows the chart to be easily resized by changing only one parameter.

For the colors, apart from black and white, the code only uses a single color as input. BaseChart.adjustBrightness is used to create brighter or darker versions of that color, and AngularMeter.relativeRadialGradient is used to combine them in gradients.

Source Code Listing

[Web Version (in ASP)] aspdemo\neonroundmeter.asp
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' This script can draw different charts depending on the chartIndex
chartIndex = CInt(Request("img"))

' The value to display on the meter
value = 50

' The main color of the four meters in this example. The other colors and gradients are derived from
' the main color.
colorList = Array(&H007700, &H770077, &H0033dd, &H880000)
mainColor = colorList(chartIndex)

'
' In this example, we demonstrate how to parameterized by size, so that the chart size can be
' changed by changing just one variable.
'
size = 300

' The radius of the entire meter, which is size / 2, minus 2 pixels for margin
outerRadius = Int(size / 2 - 2)

' The radius of the meter scale
scaleRadius = Int(outerRadius * 92 / 100)

' The radius of the inner decorative circle
innerRadius = Int(scaleRadius * 40 / 100)

' The width of the color scale
colorScaleWidth = Int(scaleRadius * 10 / 100)

' Major tick length
tickLength = Int(scaleRadius * 10 / 100)

' Major tick width
tickWidth = Int(scaleRadius * 1 / 100 + 1)

' Label font size
fontSize = Int(scaleRadius * 13 / 100)

'
' Create an angular meter based on the above parameters
'

' Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as the
' background color. You can also use transparent or other colors.
Set m = cd.AngularMeter(size, size, &H000000)

' Set the default text and line colors to white (0xffffff)
Call m.setColor(cd.TextColor, &Hffffff)
Call m.setColor(cd.LineColor, &Hffffff)

' Set meter center and scale radius, and set the scale angle from -180 to +90 degrees
Call m.setMeter(size / 2, size / 2, scaleRadius, -180, 90)

' Background gradient with the mainColor at the center and become darker near the border
bgGradient = Array(0, mainColor, 0.5, m.adjustBrightness(mainColor, 0.75), 1, m.adjustBrightness( _
    mainColor, 0.15))

' Fill the meter background with the background gradient
Call m.addRing(0, outerRadius, m.relativeRadialGradient(bgGradient, outerRadius * 0.66))

' Fill the inner circle with the same background gradient for decoration
Call m.addRing(0, innerRadius, m.relativeRadialGradient(bgGradient, innerRadius * 0.8))

' Gradient for the neon backlight, with the main color at the scale radius fading to transparent
neonGradient = Array(0.89, cd.Transparent, 1, mainColor, 1.07, cd.Transparent)
Call m.addRing(Int(scaleRadius * 85 / 100), outerRadius, m.relativeRadialGradient(neonGradient))

' The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating using a
' brighter version of the main color
Call m.addRing(scaleRadius, Int(scaleRadius + scaleRadius / 80), m.adjustBrightness(mainColor, 2))

' Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
Call m.setScale(0, 100, 10, 5, 1)

' Set the scale label style, tick length and tick width. The minor and micro tick lengths are 80%
' and 60% of the major tick length, and their widths are around half of the major tick width.
Call m.setLabelStyle("ariali.ttf", fontSize)
Call m.setTickLength(-tickLength, -Int(tickLength * 80 / 100), -Int(tickLength * 60 / 100))
Call m.setLineWidth(0, tickWidth, Int((tickWidth + 1) / 2), Int((tickWidth + 1) / 2))

' Demostrate different types of color scales and glare effects and putting them at different
' positions.
smoothColorScale = Array(0, &H0000ff, 25, &H0088ff, 50, &H00ff00, 75, &Hdddd00, 100, &Hff0000)
stepColorScale = Array(0, &H00dd00, 60, &Hddaa00, 80, &Hdd0000, 100)
highColorScale = Array(70, cd.Transparent, 100, &Hff0000)

If chartIndex = 1 Then
    ' Add the smooth color scale just outside the inner circle
    Call m.addColorScale(smoothColorScale, innerRadius + 1, colorScaleWidth)
    ' Add glare up to the scale radius, concave and spanning 190 degrees
    Call m.addGlare(scaleRadius, -190)
ElseIf chartIndex = 2 Then
    ' Add the high color scale at the default position
    Call m.addColorScale(highColorScale)
    ' Add glare up to the scale radius
    Call m.addGlare(scaleRadius)
Else
    ' Add the step color scale just outside the inner circle
    Call m.addColorScale(stepColorScale, innerRadius + 1, colorScaleWidth)
    ' Add glare up to the scale radius, concave and spanning 190 degrees and rotated by -45 degrees
    Call m.addGlare(scaleRadius, -190, -45)
End If

' Add a red (0xff0000) pointer at the specified value
Call m.addPointer2(value, &Hff0000)

' Set the cap background to a brighter version of the mainColor, and using black (0x000000) for the
' cap and grey (0x999999) for the cap border
Call m.setCap2(m.adjustBrightness(mainColor, 1.1), &H000000, &H999999)

' Output the chart
Response.ContentType = "image/png"
Response.BinaryWrite m.makeChart2(cd.PNG)
Response.End
%>

[Windows Version (in Visual Basic)] vbdemo\neonroundmeter.cls
Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' The value to display on the meter
    Dim value As Double
    value = 50

    ' The main color of the four meters in this example. The other colors and gradients are derived
    ' from the main color.
    Dim colorList()
    colorList = Array(&H007700, &H770077, &H0033dd, &H880000)
    Dim mainColor As Long
    mainColor = colorList(chartIndex)

    '
    ' In this example, we demonstrate how to parameterized by size, so that the chart size can be
    ' changed by changing just one variable.
    '
    Dim size As Long
    size = 300

    ' The radius of the entire meter, which is size / 2, minus 2 pixels for margin
    Dim outerRadius As Long
    outerRadius = Int(size / 2 - 2)

    ' The radius of the meter scale
    Dim scaleRadius As Long
    scaleRadius = Int(outerRadius * 92 / 100)

    ' The radius of the inner decorative circle
    Dim innerRadius As Long
    innerRadius = Int(scaleRadius * 40 / 100)

    ' The width of the color scale
    Dim colorScaleWidth As Long
    colorScaleWidth = Int(scaleRadius * 10 / 100)

    ' Major tick length
    Dim tickLength As Long
    tickLength = Int(scaleRadius * 10 / 100)

    ' Major tick width
    Dim tickWidth As Long
    tickWidth = Int(scaleRadius * 1 / 100 + 1)

    ' Label font size
    Dim fontSize As Long
    fontSize = Int(scaleRadius * 13 / 100)

    '
    ' Create an angular meter based on the above parameters
    '

    ' Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as
    ' the background color. You can also use transparent or other colors.
    Dim m As AngularMeter
    Set m = cd.AngularMeter(size, size, &H000000)

    ' Set the default text and line colors to white (0xffffff)
    Call m.setColor(cd.TextColor, &Hffffff)
    Call m.setColor(cd.LineColor, &Hffffff)

    ' Set meter center and scale radius, and set the scale angle from -180 to +90 degrees
    Call m.setMeter(size / 2, size / 2, scaleRadius, -180, 90)

    ' Background gradient with the mainColor at the center and become darker near the border
    Dim bgGradient()
    bgGradient = Array(0, mainColor, 0.5, m.adjustBrightness(mainColor, 0.75), 1, _
        m.adjustBrightness(mainColor, 0.15))

    ' Fill the meter background with the background gradient
    Call m.addRing(0, outerRadius, m.relativeRadialGradient(bgGradient, outerRadius * 0.66))

    ' Fill the inner circle with the same background gradient for decoration
    Call m.addRing(0, innerRadius, m.relativeRadialGradient(bgGradient, innerRadius * 0.8))

    ' Gradient for the neon backlight, with the main color at the scale radius fading to transparent
    Dim neonGradient()
    neonGradient = Array(0.89, cd.Transparent, 1, mainColor, 1.07, cd.Transparent)
    Call m.addRing(Int(scaleRadius * 85 / 100), outerRadius, m.relativeRadialGradient(neonGradient))

    ' The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating using
    ' a brighter version of the main color
    Call m.addRing(scaleRadius, Int(scaleRadius + scaleRadius / 80), m.adjustBrightness(mainColor, _
        2))

    ' Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units
    Call m.setScale(0, 100, 10, 5, 1)

    ' Set the scale label style, tick length and tick width. The minor and micro tick lengths are
    ' 80% and 60% of the major tick length, and their widths are around half of the major tick
    ' width.
    Call m.setLabelStyle("ariali.ttf", fontSize)
    Call m.setTickLength(-tickLength, -Int(tickLength * 80 / 100), -Int(tickLength * 60 / 100))
    Call m.setLineWidth(0, tickWidth, Int((tickWidth + 1) / 2), Int((tickWidth + 1) / 2))

    ' Demostrate different types of color scales and glare effects and putting them at different
    ' positions.
    Dim smoothColorScale()
    smoothColorScale = Array(0, &H0000ff, 25, &H0088ff, 50, &H00ff00, 75, &Hdddd00, 100, &Hff0000)
    Dim stepColorScale()
    stepColorScale = Array(0, &H00dd00, 60, &Hddaa00, 80, &Hdd0000, 100)
    Dim highColorScale()
    highColorScale = Array(70, cd.Transparent, 100, &Hff0000)

    If chartIndex = 1 Then
        ' Add the smooth color scale just outside the inner circle
        Call m.addColorScale(smoothColorScale, innerRadius + 1, colorScaleWidth)
        ' Add glare up to the scale radius, concave and spanning 190 degrees
        Call m.addGlare(scaleRadius, -190)
    ElseIf chartIndex = 2 Then
        ' Add the high color scale at the default position
        Call m.addColorScale(highColorScale)
        ' Add glare up to the scale radius
        Call m.addGlare(scaleRadius)
    Else
        ' Add the step color scale just outside the inner circle
        Call m.addColorScale(stepColorScale, innerRadius + 1, colorScaleWidth)
        ' Add glare up to the scale radius, concave and spanning 190 degrees and rotated by -45
        ' degrees
        Call m.addGlare(scaleRadius, -190, -45)
    End If

    ' Add a red (0xff0000) pointer at the specified value
    Call m.addPointer2(value, &Hff0000)

    ' Set the cap background to a brighter version of the mainColor, and using black (0x000000) for
    ' the cap and grey (0x999999) for the cap border
    Call m.setCap2(m.adjustBrightness(mainColor, 1.1), &H000000, &H999999)

    ' Output the chart
    Set viewer.Picture = m.makePicture()

End Sub