ChartDirector 6.0 (Ruby Edition)

Icon Angular Meter




This example demonstrates a fuel-tank like meters, in which the meter is labelled by an icon and the scale shows text abbreviations.

The scale labels on the meter is created by using BaseMeter.setScale2. The icon is created by adding a text box with BaseChart.addText and using CDML to specify an icon.

Source Code Listing

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

class IconameterController < ApplicationController

    def index()
        @title = "Icon Angular 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 = 85

        # Create an AugularMeter object of size 70 x 90 pixels, using black background with a 2
        # pixel 3D depressed border.
        m = ChartDirector::AngularMeter.new(70, 90, 0, 0, -2)

        # Set directory for loading images to current script directory
        m.setSearchPath(File.dirname(__FILE__))

        # Use white on black color palette for default text and line colors
        m.setColors(ChartDirector::whiteOnBlackPalette)

        # Set the meter center at (10, 45), with radius 50 pixels, and span from 135 to 45 degrees
        m.setMeter(10, 45, 50, 135, 45)

        # Set meter scale from 0 - 100, with the specified labels
        m.setScale2(0, 100, ["E", " ", " ", " ", "F"])

        # Set the angular arc and major tick width to 2 pixels
        m.setLineWidth(2, 2)

        # Add a red zone at 0 - 15
        m.addZone(0, 15, 0xff3333)

        # Add an icon at (25, 35)
        m.addText(25, 35, "<*img=gas.gif*>")

        # Add a yellow (ffff00) pointer at the specified value
        m.addPointer(value, 0xffff00)

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

# The value to display on the meter
value = 85

# Create an AugularMeter object of size 70 x 90 pixels, using black background with a 2 pixel 3D
# depressed border.
m = ChartDirector::AngularMeter.new(70, 90, 0, 0, -2)

# Use white on black color palette for default text and line colors
m.setColors(ChartDirector::whiteOnBlackPalette)

# Set the meter center at (10, 45), with radius 50 pixels, and span from 135 to 45 degrees
m.setMeter(10, 45, 50, 135, 45)

# Set meter scale from 0 - 100, with the specified labels
m.setScale2(0, 100, ["E", " ", " ", " ", "F"])

# Set the angular arc and major tick width to 2 pixels
m.setLineWidth(2, 2)

# Add a red zone at 0 - 15
m.addZone(0, 15, 0xff3333)

# Add an icon at (25, 35)
m.addText(25, 35, "<*img=gas.gif*>")

# Add a yellow (ffff00) pointer at the specified value
m.addPointer(value, 0xffff00)

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