ChartDirector Ver 4.1 (Ruby Edition)

Donut Chart




This example demonstrates a donut chart. It also demonstrates other chart effects, such as using CDML to nicely format sector labels, silver background color, rounded corners, and glass shading effect for title and sector labels.

Source Code Listing

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

class DonutController < ApplicationController

    def index()
        @title = "Donut 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 pie chart
        data = [20, 10, 15, 12]

        # The labels for the pie chart
        labels = ["Labor", "Licenses", "Facilities", "Production"]

        # Create a PieChart object of size 560 x 280 pixels, with a silver background,
        # black border, 1 pxiel 3D border effect and rounded corners
        c = ChartDirector::PieChart.new(560, 280, ChartDirector::silverColor(), 0x000000,
            1)
        c.setRoundedFrame()

        # Add a title box using 15 pts Times Bold Italic font in white color, on a deep
        # blue (0000CC) background with reduced-glare glass effect
        c.addTitle("Donut Chart Demonstration", "timesbi.ttf", 15, 0xffffff
            ).setBackground(0x0000cc, 0x000000, ChartDirector::glassEffect(
            ChartDirector::ReducedGlare))

        # Set donut center at (280, 140), and outer/inner radii as 110/55 pixels
        c.setDonutSize(280, 140, 110, 55)

        # Set 3D effect with 3D depth of 20 pixels
        c.set3D(20)

        # Set the label box background color the same as the sector color, with
        # reduced-glare glass effect and rounded corners
        t = c.setLabelStyle()
        t.setBackground(ChartDirector::SameAsMainColor, ChartDirector::Transparent,
            ChartDirector::glassEffect(ChartDirector::ReducedGlare))
        t.setRoundedCorners()

        # Set the sector label format. The label consists of two lines. The first line is
        # the sector name in Times Bold Italic font and is underlined. The second line
        # shows the data value and percentage.
        c.setLabelFormat(
            "<*block,halign=left*><*font=timesbi.ttf,size=12,underline=1*>{label}" \
            "<*/font*><*br*>US$ {value}K ({percent}%)")

        # Set the pie data and the pie labels
        c.setData(data, labels)

        # Use the side label layout method
        c.setLabelLayout(ChartDirector::SideLayout)

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

# The data for the pie chart
data = [20, 10, 15, 12]

# The labels for the pie chart
labels = ["Labor", "Licenses", "Facilities", "Production"]

# Create a PieChart object of size 560 x 280 pixels, with a silver background, black
# border, 1 pxiel 3D border effect and rounded corners
c = ChartDirector::PieChart.new(560, 280, ChartDirector::silverColor(), 0x000000, 1)
c.setRoundedFrame()

# Add a title box using 15 pts Times Bold Italic font in white color, on a deep blue
# (0000CC) background with reduced-glare glass effect
c.addTitle("Donut Chart Demonstration", "timesbi.ttf", 15, 0xffffff).setBackground(
    0x0000cc, 0x000000, ChartDirector::glassEffect(ChartDirector::ReducedGlare))

# Set donut center at (280, 140), and outer/inner radii as 110/55 pixels
c.setDonutSize(280, 140, 110, 55)

# Set 3D effect with 3D depth of 20 pixels
c.set3D(20)

# Set the label box background color the same as the sector color, with reduced-glare
# glass effect and rounded corners
t = c.setLabelStyle()
t.setBackground(ChartDirector::SameAsMainColor, ChartDirector::Transparent,
    ChartDirector::glassEffect(ChartDirector::ReducedGlare))
t.setRoundedCorners()

# Set the sector label format. The label consists of two lines. The first line is the
# sector name in Times Bold Italic font and is underlined. The second line shows the
# data value and percentage.
c.setLabelFormat(
    "<*block,halign=left*><*font=timesbi.ttf,size=12,underline=1*>{label}<*/font*>" \
    "<*br*>US$ {value}K ({percent}%)")

# Set the pie data and the pie labels
c.setData(data, labels)

# Use the side label layout method
c.setLabelLayout(ChartDirector::SideLayout)

# output the chart
c.makeChart("donut.png")