ChartDirector 6.0 (ASP/COM/VB Edition)

Polar Vector Chart

This example demonstrates a polar vector chart.

A vector chart is like a scatter chart, but the symbols are arrows which can be of arbitrary lengths pointing to arbitrary directions. Thus each symbol in a vector chart is specified by 4 values - the radial and angular coordinates, and the length and the direction.

In ChartDirector, a polar vector layer is created using PolarChart.addVectorLayer.

Source Code Listing

[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", "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 Response.ContentType = "image/png" Response.BinaryWrite c.makeChart2(cd.PNG) Response.End %>```

[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```