Circular Bar Meter (2)

[Web Version (in ASP)] aspdemo\circularbarmeter2.asp
<%@ 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 = 85

    ' The meter radius and angle
    radius = 50
    angle = value * 360.0 / 100

    ' Create an AngularMeter with transparent background
    Set m = cd.AngularMeter(radius * 2 + 10, radius * 2 + 10, cd.Transparent)

    ' Set the center, radius and angular range of the meter
    Call m.setMeter(Int(m.getWidth() / 2), Int(m.getHeight() / 2), radius, 0, 360)

    ' For circular bar meters, we do not need pointer or graduation, so we hide them.
    Call m.setMeterColors(cd.Transparent, cd.Transparent, cd.Transparent)
    Call m.setCap(0, cd.Transparent)

    ' In this example, the circular bar has 20 segments
    segmentCount = 20

    ' The angular step
    angleStep = 360.0 / segmentCount

    ' The gap between segments is 4.5 degrees
    angleGap = 4.5

    '
    ' This example demonstrates several coloring styles
    '

    ' Thd default fill and blank colors
    fillColor = &H336699
    blankColor = &Heeeeee

    If chartIndex >= 4 Then
        ' Use dark background style
        Call m.setColors(cd.whiteOnBlackPalette)
        fillColor = &H6699ff
        blankColor = &H222222
    End If

    If chartIndex Mod 4 = 1 Then
        ' Alternative fill color
        fillColor = &H00ee33
    ElseIf chartIndex Mod 4 = 2 Then
        ' Use a smooth color scale as the fill color
        smoothColorScale = Array(0, &H0022ff, 15, &H0088ff, 30, &H00ff00, 55, &Hffff00, 80, _
            &Hff0000, 100, &Hff0000)
        fillColor = m.getDrawArea().angleGradientColor(Int(m.getWidth() / 2), Int(m.getHeight() / _
            2), 0, 360, radius, radius - 20, smoothColorScale)
    ElseIf chartIndex Mod 4 = 3 Then
        ' Use a step color scale as the fill color
        stepColorScale = Array(0, &H0044ff, 20, &H00ee00, 50, &Heeee00, 70, &Hee0000, 100)
        fillColor = m.getDrawArea().angleGradientColor(Int(m.getWidth() / 2), Int(m.getHeight() / _
            2), -angleGap / 2, 360 - angleGap / 2, radius, radius - 20, stepColorScale)
    End If

    '
    ' Now we draw the segments of the bar meter
    '

    ' The segment that contains the value
    currentSegment = Int(angle / angleStep)

    ' Segments after the current segment is colored with the blank color
    For n = currentSegment + 1 To segmentCount - 1
        Call m.addRingSector(radius, radius - 20, n * angleStep, (n + 1) * angleStep - angleGap, _
            blankColor)
    Next

    ' Segments before the current segment is colored with the fill color
    For n = 0 To currentSegment - 1
        Call m.addRingSector(radius, radius - 20, n * angleStep, (n + 1) * angleStep - angleGap, _
            fillColor)
    Next

    ' Segment that contains the angle will be partially filled and partially blank. We need to
    ' adjust the angle to compensated for the angle gap.
    adjustedAngle = currentSegment * angleStep + (angle - currentSegment * angleStep) * (1 - _
        angleGap / angleStep)

    ' The blank part of the segment
    If (currentSegment + 1) * angleStep > angle Then
        Call m.addRingSector(radius, radius - 20, adjustedAngle, (currentSegment + 1) * angleStep _
             - angleGap, blankColor)
    End If

    ' The filled part of the segment.
    If angle > currentSegment * angleStep Then
        Call m.addRingSector(radius, radius - 20, currentSegment * angleStep, adjustedAngle, _
            fillColor)
    End If

    ' Add a label at the center to display the value
    Call m.addText(Int(m.getWidth() / 2), Int(m.getHeight() / 2), m.formatValue(value, "{value}"), _
        "Arial", 25, cd.TextColor, cd.Center).setMargin(0)

    ' Output the chart
    Call viewer.setChart(m, cd.SVG)
End Sub

' This example includes 8 charts
Dim viewers(7)
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>Circular Bar Meters (2)</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;">
        Circular Bar Meters (2)
    </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>