ChartDirector 6.0 (Ruby Edition)
Circular Zones
Source Code Listing
require("chartdirector") class PolarzonesController < ApplicationController def index() @title = "Circular Zones" @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 data = [51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60] # The labels for the chart labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"] # Create a PolarChart object of size 400 x 420 pixels c = ChartDirector::PolarChart.new(400, 420) # Set background color to a 2 pixel pattern color, with a black border and 1 pixel 3D border # effect c.setBackground(c.patternColor([0xffffff, 0xe0e0e0], 2), 0, 1) # Add a title to the chart using 16pt Arial Bold Italic font. The title text is white # (0xffffff) on 2 pixel pattern background c.addTitle("Chemical Concentration", "arialbi.ttf", 16, 0xffffff).setBackground( c.patternColor([0x000000, 0x000080], 2)) # Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue # (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff) # Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99) # Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999) # Set the grid style to circular grid c.setGridStyle(false) # Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm") # Use semi-transparent (40ffffff) label background so as not to block the data c.radialAxis().setLabelStyle().setBackground(0x40ffffff, 0x40000000) # Add a legend box at (200, 30) top center aligned, using 9pt Arial Bold font. with a black # border. legendBox = c.addLegend(200, 30, false, "arialbd.ttf", 9) legendBox.setAlignment(ChartDirector::TopCenter) # Add legend keys to represent the red/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff) legendBox.addKey("Normal", 0x99ff99) legendBox.addKey("Over-Absorp", 0xff9999) # Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow # (ffff00) circles to represent the data points layer = c.addSplineLineLayer(data, 0x000080) layer.setLineWidth(3) layer.setDataSymbol(ChartDirector::CircleShape, 11, 0xffff00) # Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels) # Output the chart send_data(c.makeChart2(ChartDirector::PNG), :type => "image/png", :disposition => "inline") end end |
<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> |
#!/usr/bin/env ruby require("chartdirector") # The data for the chart data = [51, 15, 51, 40, 17, 87, 94, 21, 35, 88, 50, 60] # The labels for the chart labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"] # Create a PolarChart object of size 400 x 420 pixels c = ChartDirector::PolarChart.new(400, 420) # Set background color to a 2 pixel pattern color, with a black border and 1 pixel 3D border effect c.setBackground(c.patternColor([0xffffff, 0xe0e0e0], 2), 0, 1) # Add a title to the chart using 16pt Arial Bold Italic font. The title text is white (0xffffff) on # 2 pixel pattern background c.addTitle("Chemical Concentration", "arialbi.ttf", 16, 0xffffff).setBackground(c.patternColor([ 0x000000, 0x000080], 2)) # Set center of plot area at (200, 240) with radius 145 pixels. Set background color to blue # (9999ff) c.setPlotArea(200, 240, 145, 0x9999ff) # Color the region between radius = 40 to 80 as green (99ff99) c.radialAxis().addZone(40, 80, 0x99ff99) # Color the region with radius > 80 as red (ff9999) c.radialAxis().addZone(80, 999, 0xff9999) # Set the grid style to circular grid c.setGridStyle(false) # Set the radial axis label format c.radialAxis().setLabelFormat("{value} ppm") # Use semi-transparent (40ffffff) label background so as not to block the data c.radialAxis().setLabelStyle().setBackground(0x40ffffff, 0x40000000) # Add a legend box at (200, 30) top center aligned, using 9pt Arial Bold font. with a black border. legendBox = c.addLegend(200, 30, false, "arialbd.ttf", 9) legendBox.setAlignment(ChartDirector::TopCenter) # Add legend keys to represent the red/green/blue zones legendBox.addKey("Under-Absorp", 0x9999ff) legendBox.addKey("Normal", 0x99ff99) legendBox.addKey("Over-Absorp", 0xff9999) # Add a blue (000080) spline line layer with line width set to 3 pixels and using yellow (ffff00) # circles to represent the data points layer = c.addSplineLineLayer(data, 0x000080) layer.setLineWidth(3) layer.setDataSymbol(ChartDirector::CircleShape, 11, 0xffff00) # Set the labels to the angular axis as spokes. c.angularAxis().setLabels(labels) # Output the chart c.makeChart("polarzones.png") |