Polar Vector Chart

[Web Version (in ASP)] aspdemo\polarvector.asp

<%@ language="vbscript" %>
<%
Set cd = CreateObject("ChartDirector.API")

' Coordinates of the starting points of the vectors
radius = Array(5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, _
    15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, _
    20, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25)
angle = Array(0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, _
    210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, _
    120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330)

' Magnitude and direction of the vectors
magnitude = Array(5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, _
    3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, _
    1, 1)
direction = Array(60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, _
    210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, _
    120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, _
    0, 30)

' Create a PolarChart object of size 460 x 460 pixels
Set c = cd.PolarChart(460, 460)

' Add a title to the chart at the top left corner using 15pt Arial Bold Italic font
Call c.addTitle("Polar Vector Chart Demonstration", "Arial Bold Italic", 15)

' Set center of plot area at (230, 240) with radius 180 pixels
Call c.setPlotArea(230, 240, 180)

' Set the grid style to circular grid
Call c.setGridStyle(False)

' Set angular axis as 0 - 360, with a spoke every 30 units
Call c.angularAxis().setLinearScale(0, 360, 30)

' Add a polar vector layer to the chart with blue (0000ff) vectors
Call c.addVectorLayer(radius, angle, magnitude, direction, cd.RadialAxisScale, &H0000ff)

' Output the chart
Set viewer = cd.WebChartViewer(Request, "chart1")
Call viewer.setChart(c, cd.SVG)

' Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", _
    "title='Vector at ({value}, {angle} deg): Length = {len}, Angle = {dir} deg'")
%>

<!DOCTYPE html>
<html>
<head>
    <title>Polar Vector Chart</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;">
        Polar Vector Chart
    </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>

[Windows Version (in Visual Basic)] vbdemo\polarvector.cls

Public Sub createChart(viewer As Object, chartIndex As Integer)

    Dim cd As New ChartDirector.API

    ' Coordinates of the starting points of the vectors
    Dim radius()
    radius = Array(5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, _
        10, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 15, 20, 20, 20, 20, 20, 20, 20, 20, 20, _
        20, 20, 20, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25, 25)
    Dim angle()
    angle = Array(0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, _
        180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, _
        30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, _
        240, 270, 300, 330)

    ' Magnitude and direction of the vectors
    Dim magnitude()
    magnitude = Array(5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, _
        3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, _
        1, 1, 1, 1, 1)
    Dim direction()
    direction = Array(60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, _
        180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, _
        30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330, 0, 30, 60, 90, 120, 150, 180, 210, _
        240, 270, 300, 330, 0, 30)

    ' Create a PolarChart object of size 460 x 460 pixels
    Dim c As PolarChart
    Set c = cd.PolarChart(460, 460)

    ' Add a title to the chart at the top left corner using 15pt Arial Bold Italic font
    Call c.addTitle("Polar Vector Chart Demonstration", "arialbi.ttf", 15)

    ' Set center of plot area at (230, 240) with radius 180 pixels
    Call c.setPlotArea(230, 240, 180)

    ' Set the grid style to circular grid
    Call c.setGridStyle(False)

    ' Set angular axis as 0 - 360, with a spoke every 30 units
    Call c.angularAxis().setLinearScale(0, 360, 30)

    ' Add a polar vector layer to the chart with blue (0000ff) vectors
    Call c.addVectorLayer(radius, angle, magnitude, direction, cd.RadialAxisScale, &H0000ff)

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

    'include tool tip for the chart
    viewer.ImageMap = c.getHTMLImageMap("clickable", "", _
        "title='Vector at ({value}, {angle} deg): Length = {len}, Angle = {dir} deg'")

End Sub