ChartDirector 7.0 (ASP/COM/VB Edition)
Neon Round Meters
Source Code Listing
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' This script can draw different charts depending on the chartIndex
Sub createChart(viewer, chartIndex)
' 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("Arial Italic", 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
Call viewer.setChart(m, cd.SVG)
End Sub
' This example includes 4 charts
Dim viewers(3)
For i = 0 To Ubound(viewers)
Set viewers(i) = cd.WebChartViewer(Request, "chart" & i)
Call createChart(viewers(i), i)
Next
%>
<!DOCTYPE html>
<html>
<head>
<title>Neon Round Meters</title>
<!-- Include ChartDirector Javascript Library to support chart interactions -->
<script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
<div style="font:bold 18pt verdana;">
Neon Round Meters
</div>
<hr style="border:solid 1px #000080; background:#000080" />
<div style="font:10pt verdana; margin-bottom:1.5em">
<a href="viewsource.asp?file=<%= Request("SCRIPT_NAME") %>">View Chart Source Code</a>
</div>
<!-- ****** Here are the chart images ****** -->
<%
For i = 0 To Ubound(viewers)
Call Response.Write(viewers(i).renderHTML())
Call Response.Write(" ")
Next
%>
</body>
</html>
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