ChartDirector 7.0 (ASP/COM/VB Edition)
Angular Meter Pointers (1)
Source Code Listing
<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")
' Create an AngularMeter object of size 300 x 300 pixels with transparent background
Set m = cd.AngularMeter(300, 300, cd.Transparent)
' Set the default text and line colors to white (0xffffff)
Call m.setColor(cd.TextColor, &Hffffff)
Call m.setColor(cd.LineColor, &Hffffff)
' Center at (150, 150), scale radius = 128 pixels, scale angle 0 to 360 degrees
Call m.setMeter(150, 150, 128, 0, 360)
' Add a black (0x000000) circle with radius 148 pixels as background
Call m.addRing(0, 148, &H000000)
' Add a ring between radii 139 and 147 pixels using the silver color with a light grey (0xcccccc)
' edge as border
Call m.addRing(139, 147, cd.silverColor(), &Hcccccc)
' 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 to 16pt Arial Italic. Set the major/minor/micro tick lengths to 13/10/7
' pixels pointing inwards, and their widths to 2/1/1 pixels.
Call m.setLabelStyle("Arial Italic", 16)
Call m.setTickLength(-13, -10, -7)
Call m.setLineWidth(0, 2, 1, 1)
' Add a semi-transparent blue (0x7f6666ff) pointer using the default shape
Call m.addPointer(25, &H7f6666ff, &H6666ff)
' Add a semi-transparent red (0x7fff6666) pointer using the arrow shape
Call m.addPointer(9, &H7fff6666, &Hff6666).setShape(cd.ArrowPointer2)
' Add a semi-transparent yellow (0x7fffff66) pointer using another arrow shape
Call m.addPointer(51, &H7fffff66, &Hffff66).setShape(cd.ArrowPointer)
' Add a semi-transparent green (0x7f66ff66) pointer using the line shape
Call m.addPointer(72, &H7f66ff66, &H66ff66).setShape(cd.LinePointer)
' Add a semi-transparent grey (0x7fcccccc) pointer using the pencil shape
Call m.addPointer(85, &H7fcccccc, &Hcccccc).setShape(cd.PencilPointer)
' Output the chart
Set viewer = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(m, cd.SVG)
%>
<!DOCTYPE html>
<html>
<head>
<title>Angular Meter Pointers (1)</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;">
Angular Meter Pointers (1)
</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 is the chart image ****** -->
<%= viewer.renderHTML() %>
</body>
</html>
Public Sub createChart(viewer As Object, chartIndex As Integer)
Dim cd As New ChartDirector.API
' Create an AngularMeter object of size 300 x 300 pixels
Dim m As AngularMeter
Set m = cd.AngularMeter(300, 300)
' Set the default text and line colors to white (0xffffff)
Call m.setColor(cd.TextColor, &Hffffff)
Call m.setColor(cd.LineColor, &Hffffff)
' Center at (150, 150), scale radius = 128 pixels, scale angle 0 to 360 degrees
Call m.setMeter(150, 150, 128, 0, 360)
' Add a black (0x000000) circle with radius 148 pixels as background
Call m.addRing(0, 148, &H000000)
' Add a ring between radii 139 and 147 pixels using the silver color with a light grey
' (0xcccccc) edge as border
Call m.addRing(139, 147, cd.silverColor(), &Hcccccc)
' 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 to 16pt Arial Italic. Set the major/minor/micro tick lengths to
' 13/10/7 pixels pointing inwards, and their widths to 2/1/1 pixels.
Call m.setLabelStyle("ariali.ttf", 16)
Call m.setTickLength(-13, -10, -7)
Call m.setLineWidth(0, 2, 1, 1)
' Add a semi-transparent blue (0x7f6666ff) pointer using the default shape
Call m.addPointer(25, &H7f6666ff, &H6666ff)
' Add a semi-transparent red (0x7fff6666) pointer using the arrow shape
Call m.addPointer(9, &H7fff6666, &Hff6666).setShape(cd.ArrowPointer2)
' Add a semi-transparent yellow (0x7fffff66) pointer using another arrow shape
Call m.addPointer(51, &H7fffff66, &Hffff66).setShape(cd.ArrowPointer)
' Add a semi-transparent green (0x7f66ff66) pointer using the line shape
Call m.addPointer(72, &H7f66ff66, &H66ff66).setShape(cd.LinePointer)
' Add a semi-transparent grey (0x7fcccccc) pointer using the pencil shape
Call m.addPointer(85, &H7fcccccc, &Hcccccc).setShape(cd.PencilPointer)
' Output the chart
Set viewer.Picture = m.makePicture()
End Sub