ChartDirector 6.0 (Ruby Edition)

Stacked Radar Chart




This example demonstrates a stacked radar chart.

This example is similar to the previous Multi-Radar Chart example, except the data are stacked before passing to ChartDirector.

Source Code Listing

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

class StackradarController < ApplicationController

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

    #
    # Render and deliver the chart
    #
    def getchart()
        # The data for the chart
        data0 = [100, 100, 100, 100, 100]
        data1 = [90, 85, 85, 80, 70]
        data2 = [80, 65, 65, 75, 45]

        # The labels for the chart
        labels = ["Population<*br*><*font=arial.ttf*>6 millions",
            "GDP<*br*><*font=arial.ttf*>120 billions", "Export<*br*><*font=arial.ttf*>25 billions",
            "Import<*br*><*font=arial.ttf*>24 billions",
            "Investments<*br*><*font=arial.ttf*>20 billions"]

        # Create a PolarChart object of size 480 x 460 pixels. Set background color to silver, with
        # 1 pixel 3D border effect
        c = ChartDirector::PolarChart.new(480, 460, ChartDirector::silverColor(), 0x000000, 1)

        # Add a title to the chart using 15pt Times Bold Italic font. The title text is white
        # (ffffff) on a deep green (008000) background
        c.addTitle("Economic Growth", "timesbi.ttf", 15, 0xffffff).setBackground(0x008000)

        # Set plot area center at (240, 270), with 150 pixels radius
        c.setPlotArea(240, 270, 150)

        # Use 1 pixel width semi-transparent black (c0000000) lines as grid lines
        c.setGridColor(0xc0000000, 1, 0xc0000000, 1)

        # Add a legend box at top-center of plot area (240, 35) using horizontal layout. Use 10pt
        # Arial Bold font, with silver background and 1 pixel 3D border effect.
        b = c.addLegend(240, 35, false, "arialbd.ttf", 10)
        b.setAlignment(ChartDirector::TopCenter)
        b.setBackground(ChartDirector::silverColor(), ChartDirector::Transparent, 1)

        # Add area layers of different colors to represent the data
        c.addAreaLayer(data0, 0xcc8880, "Year 2004")
        c.addAreaLayer(data1, 0xffd080, "Year 1994")
        c.addAreaLayer(data2, 0xa0bce0, "Year 1984")

        # Set the labels to the angular axis as spokes.
        c.angularAxis().setLabels(labels)

        # Set radial axis from 0 - 100 with a tick every 20 units
        c.radialAxis().setLinearScale(0, 100, 20)

        # Just show the radial axis as a grid line. Hide the axis labels by setting the label color
        # to Transparent
        c.radialAxis().setColors(0xc0000000, ChartDirector::Transparent)

        # 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/stackradar.rb
#!/usr/bin/env ruby
require("chartdirector")

# The data for the chart
data0 = [100, 100, 100, 100, 100]
data1 = [90, 85, 85, 80, 70]
data2 = [80, 65, 65, 75, 45]

# The labels for the chart
labels = ["Population<*br*><*font=arial.ttf*>6 millions", "GDP<*br*><*font=arial.ttf*>120 billions",
    "Export<*br*><*font=arial.ttf*>25 billions", "Import<*br*><*font=arial.ttf*>24 billions",
    "Investments<*br*><*font=arial.ttf*>20 billions"]

# Create a PolarChart object of size 480 x 460 pixels. Set background color to silver, with 1 pixel
# 3D border effect
c = ChartDirector::PolarChart.new(480, 460, ChartDirector::silverColor(), 0x000000, 1)

# Add a title to the chart using 15pt Times Bold Italic font. The title text is white (ffffff) on a
# deep green (008000) background
c.addTitle("Economic Growth", "timesbi.ttf", 15, 0xffffff).setBackground(0x008000)

# Set plot area center at (240, 270), with 150 pixels radius
c.setPlotArea(240, 270, 150)

# Use 1 pixel width semi-transparent black (c0000000) lines as grid lines
c.setGridColor(0xc0000000, 1, 0xc0000000, 1)

# Add a legend box at top-center of plot area (240, 35) using horizontal layout. Use 10pt Arial Bold
# font, with silver background and 1 pixel 3D border effect.
b = c.addLegend(240, 35, false, "arialbd.ttf", 10)
b.setAlignment(ChartDirector::TopCenter)
b.setBackground(ChartDirector::silverColor(), ChartDirector::Transparent, 1)

# Add area layers of different colors to represent the data
c.addAreaLayer(data0, 0xcc8880, "Year 2004")
c.addAreaLayer(data1, 0xffd080, "Year 1994")
c.addAreaLayer(data2, 0xa0bce0, "Year 1984")

# Set the labels to the angular axis as spokes.
c.angularAxis().setLabels(labels)

# Set radial axis from 0 - 100 with a tick every 20 units
c.radialAxis().setLinearScale(0, 100, 20)

# Just show the radial axis as a grid line. Hide the axis labels by setting the label color to
# Transparent
c.radialAxis().setColors(0xc0000000, ChartDirector::Transparent)

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