ChartDirector 6.0 (Ruby 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

[Ruby On Rails Version - Controller] app/controllers/polarvector_controller.rb
require("chartdirector")

class PolarvectorController < ApplicationController

    def index()
        @title = "Polar Vector Chart"
        @ctrl_file = File.expand_path(__FILE__)
        @noOfCharts = 1
        render :template => "templates/chartview"
    end

    #
    # Render and deliver the chart
    #
    def getchart()
        # Coordinates of the starting points of the vectors
        radius = [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 = [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 = [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 = [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
        c = ChartDirector::PolarChart.new(460, 460)

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

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

        # Set the grid style to circular grid
        c.setGridStyle(false)

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

        # Add a polar vector layer to the chart with blue (0000ff) vectors
        c.addVectorLayer(radius, angle, magnitude, direction, ChartDirector::RadialAxisScale,
            0x0000ff)

        # Output the chart
        send_data(c.makeChart2(ChartDirector::PNG), :type => "image/png", :disposition => "inline")

    end

end

[Ruby On Rails Version - View] app/views/templates/chartview.html.erb
<html>
<body style="margin:5px 0px 0px 5px">

<!-- Title -->
<div style="font-size:18pt; font-family:verdana; font-weight:bold">
    <%= @title %>
</div>
<hr style="border:solid 1px #000080" />

<!-- Source Code Listing Link -->
<div style="font-size:9pt; font-family:verdana; margin-bottom:1.5em">
    <%= link_to "Source Code Listing", 
        :controller => "cddemo", :action => "viewsource",
        :ctrl_file => @ctrl_file, :view_file => File.expand_path(__FILE__) %>
</div>

<!-- Create one or more IMG tags to display the demo chart(s) -->
<% 0.upto(@noOfCharts - 1) do |i| %>
    <img src="<%= url_for(:action => "getchart", :img => i) %>">
<% end %>

</body>
</html>

[Command Line Version] rubydemo/polarvector.rb
#!/usr/bin/env ruby
require("chartdirector")

# Coordinates of the starting points of the vectors
radius = [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 = [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 = [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 = [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
c = ChartDirector::PolarChart.new(460, 460)

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

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

# Set the grid style to circular grid
c.setGridStyle(false)

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

# Add a polar vector layer to the chart with blue (0000ff) vectors
c.addVectorLayer(radius, angle, magnitude, direction, ChartDirector::RadialAxisScale, 0x0000ff)

# Output the chart
c.makeChart("polarvector.png")