Semicircle Meter

This example demonstrates the basic steps in creating a semicircle meter.

A semicircle meter can be created with the following steps:

Create an AngularMeter object using AngularMeter.AngularMeter. In this example, the background color is set Transparent.
Specify the geometry of the meter scale using AngularMeter.setMeter. This specifies the center, the radius, and the starting and ending angles of the meter scale.
Optionally add a background with border. using AngularMeter.addScaleBackground. The scale background usually encloses the meter scale and is larger than it.
Set the numeric scale of the meter using BaseMeter.setScale
Optionally configures the label style using BaseMeter.setLabelStyle, the tick length using BaseMeter.setTickLength and the tick width using BaseMeter.setLineWidth.
Optionally add a color scale to the meter using BaseMeter.addColorScale. Whereas the meter scale displays the values with text labels, a color scale represents the values with different colors.
Optionally add additional labels to the meter using BaseChart.addText.
Add a "new style" pointer to the meter using AngularMeter.addPointer2. For compatibility with earlier versions of ChartDirector, classical pointers are still supported using the previous method BaseMeter.addPointer.

[Ruby On Rails Version - Controller] app/controllers/semicirclemeter_controller.rb

require("chartdirector")

class SemicirclemeterController < ApplicationController

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

    #
    # Render and deliver the chart
    #
    def getchart()
        # The value to display on the meter
        value = 72.55

        # Create an AngularMeter object of size 300 x 180 pixels with transparent background
        m = ChartDirector::AngularMeter.new(300, 180, ChartDirector::Transparent)

        # Center at (150, 150), scale radius = 128 pixels, scale angle -90 to +90 degrees
        m.setMeter(150, 150, 128, -90, 90)

        # Add a pale grey (0xeeeeee) scale background of 148 pixels radius, with a 10 pixel thick
        # light grey (0xcccccc) border
        m.addScaleBackground(148, 0xeeeeee, 10, 0xcccccc)

        # Meter scale is 0 - 100, with major tick every 20 units, minor tick every 10 units, and
        # micro tick every 5 units
        m.setScale(0, 100, 20, 10, 5)

        # Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick lengths to
        # 16/16/10 pixels pointing inwards, and their widths to 2/1/1 pixels.
        m.setLabelStyle("ariali.ttf", 16)
        m.setTickLength(-16, -16, -10)
        m.setLineWidth(0, 2, 1, 1)

        # Add a smooth color scale to the meter
        smoothColorScale = [0, 0x3333ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000]
        m.addColorScale(smoothColorScale)

        # Add a text label centered at (150, 125) with 15pt Arial Italic font
        m.addText(150, 125, "CPU", "ariali.ttf", 15, ChartDirector::TextColor,
            ChartDirector::BottomCenter)

        # Add a red (0xff0000) pointer at the specified value
        m.addPointer2(value, 0xff0000)

        # Output the chart
        send_data(m.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/semicirclemeter.rb

#!/usr/bin/env ruby
require("chartdirector")

# The value to display on the meter
value = 72.55

# Create an AngularMeter object of size 300 x 180 pixels with transparent background
m = ChartDirector::AngularMeter.new(300, 180, ChartDirector::Transparent)

# Center at (150, 150), scale radius = 128 pixels, scale angle -90 to +90 degrees
m.setMeter(150, 150, 128, -90, 90)

# Add a pale grey (0xeeeeee) scale background of 148 pixels radius, with a 10 pixel thick light grey
# (0xcccccc) border
m.addScaleBackground(148, 0xeeeeee, 10, 0xcccccc)

# Meter scale is 0 - 100, with major tick every 20 units, minor tick every 10 units, and micro tick
# every 5 units
m.setScale(0, 100, 20, 10, 5)

# Set the scale label style to 15pt Arial Italic. Set the major/minor/micro tick lengths to 16/16/10
# pixels pointing inwards, and their widths to 2/1/1 pixels.
m.setLabelStyle("ariali.ttf", 16)
m.setTickLength(-16, -16, -10)
m.setLineWidth(0, 2, 1, 1)

# Add a smooth color scale to the meter
smoothColorScale = [0, 0x3333ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000]
m.addColorScale(smoothColorScale)

# Add a text label centered at (150, 125) with 15pt Arial Italic font
m.addText(150, 125, "CPU", "ariali.ttf", 15, ChartDirector::TextColor, ChartDirector::BottomCenter)

# Add a red (0xff0000) pointer at the specified value
m.addPointer2(value, 0xff0000)

# Output the chart
m.makeChart("semicirclemeter.png")