ChartDirector Ver 4.1 (Ruby Edition)

Multi-Pointer Angular Meter




This example demonstrates adding multiple pointers of different styles to a meter.

ChartDirector supports adding arbitrary number of pointers to a meter using BaseMeter.addPointer. The shape of each pointer is configurable by using MeterPointer.setShape or MeterPointer.setShape2.

This example demonstrates the 5 different built-in angular pointer styles in ChartDirector. Note the use of semi-transparent colors to avoid the pointers blocking the labels or each others.

Source Code Listing

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

class MultiameterController < ApplicationController

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

    #
    # Render and deliver the chart
    #
    def getchart()
        # Create an AugularMeter object of size 200 x 200 pixels
        m = ChartDirector::AngularMeter.new(200, 200)

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

        # Set the meter center at (100, 100), with radius 85 pixels, and span from 0 to
        # 360 degress
        m.setMeter(100, 100, 85, 0, 360)

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

        # Set angular arc, major tick and minor tick line widths to 2 pixels.
        m.setLineWidth(2, 2, 2)

        # Add a blue (9999ff) ring between radii 88 - 90 as decoration
        m.addRing(88, 90, 0x9999ff)

        # Set 0 - 60 as green (00AA00) zone, 60 - 80 as yellow (CCCC00) zone, and 80 - 100
        # as red (AA0000) zone
        m.addZone(0, 60, 0x00aa00)
        m.addZone(60, 80, 0xcccc00)
        m.addZone(80, 100, 0xaa0000)

        # Add a text label centered at (100, 70) with 12 pts Arial Bold font
        m.addText(100, 70, "PSI", "arialbd.ttf", 12, ChartDirector::TextColor,
            ChartDirector::Center)

        # Add a semi-transparent blue (806666FF) pointer    using the default shape
        m.addPointer(25, 0x806666ff, 0x6666ff)

        # Add a semi-transparent red (80FF6666) pointer using the arrow shape
        m.addPointer(9, 0x80ff6666, 0xff6666).setShape(ChartDirector::ArrowPointer2)

        # Add a semi-transparent yellow (80FFFF66) pointer using another arrow shape
        m.addPointer(51, 0x80ffff66, 0xffff66).setShape(ChartDirector::ArrowPointer)

        # Add a semi-transparent green (8066FF66) pointer using the line shape
        m.addPointer(72, 0x8066ff66, 0x66ff66).setShape(ChartDirector::LinePointer)

        # Add a semi-transparent grey (80CCCCCC) pointer using the pencil shape
        m.addPointer(85, 0x80cccccc, 0xcccccc).setShape(ChartDirector::PencilPointer)

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

# Create an AugularMeter object of size 200 x 200 pixels
m = ChartDirector::AngularMeter.new(200, 200)

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

# Set the meter center at (100, 100), with radius 85 pixels, and span from 0 to 360
# degress
m.setMeter(100, 100, 85, 0, 360)

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

# Set angular arc, major tick and minor tick line widths to 2 pixels.
m.setLineWidth(2, 2, 2)

# Add a blue (9999ff) ring between radii 88 - 90 as decoration
m.addRing(88, 90, 0x9999ff)

# Set 0 - 60 as green (00AA00) zone, 60 - 80 as yellow (CCCC00) zone, and 80 - 100 as
# red (AA0000) zone
m.addZone(0, 60, 0x00aa00)
m.addZone(60, 80, 0xcccc00)
m.addZone(80, 100, 0xaa0000)

# Add a text label centered at (100, 70) with 12 pts Arial Bold font
m.addText(100, 70, "PSI", "arialbd.ttf", 12, ChartDirector::TextColor,
    ChartDirector::Center)

# Add a semi-transparent blue (806666FF) pointer    using the default shape
m.addPointer(25, 0x806666ff, 0x6666ff)

# Add a semi-transparent red (80FF6666) pointer using the arrow shape
m.addPointer(9, 0x80ff6666, 0xff6666).setShape(ChartDirector::ArrowPointer2)

# Add a semi-transparent yellow (80FFFF66) pointer using another arrow shape
m.addPointer(51, 0x80ffff66, 0xffff66).setShape(ChartDirector::ArrowPointer)

# Add a semi-transparent green (8066FF66) pointer using the line shape
m.addPointer(72, 0x8066ff66, 0x66ff66).setShape(ChartDirector::LinePointer)

# Add a semi-transparent grey (80CCCCCC) pointer using the pencil shape
m.addPointer(85, 0x80cccccc, 0xcccccc).setShape(ChartDirector::PencilPointer)

# output the chart
m.makeChart("multiameter.png")