ChartDirector 6.0 (Ruby Edition)
Round Meters with Readout
Source Code Listing
require("chartdirector") class RoundmeterreadoutController < ApplicationController def index() @title = "Round Meters with Readout" @ctrl_file = File.expand_path(__FILE__) @noOfCharts = 2 render :template => "templates/chartview" end # # Render and deliver the chart # def getchart() # This script can draw different charts depending on the chartIndex chartIndex = (params["img"]).to_i # The value to display on the meter value = 54 # The main color of the four meters in this example. The other colors and gradients are # derived from the main color. colorList = [0x0033dd, 0xaaaa00] mainColor = colorList[chartIndex] # # In this example, we demonstrate how to parameterized by size, so that the chart size can # be changed by changing just one variable. # size = 300 # The radius of the entire meter, which is size / 2, minus 2 pixels for margin outerRadius = (size / 2 - 2).to_i # The radius of the meter scale scaleRadius = (outerRadius * 92 / 100).to_i # The radius of the color scale colorScaleRadius = (scaleRadius * 43 / 100).to_i # The width of the color scale colorScaleWidth = (scaleRadius * 10 / 100).to_i # Major tick length tickLength = (scaleRadius * 10 / 100).to_i # Major tick width tickWidth = (scaleRadius * 1 / 100 + 1).to_i # Label font size fontSize = (scaleRadius * 13 / 100).to_i # Radius of readout circle as a ratio to the scale radius readOutRadiusRatio = 0.333333333333 # Readout font size readOutFontSize = (scaleRadius * 24 / 100).to_i # # Create an angular meter based on the above parameters # # Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) # as the background color. You can also use transparent or other colors. m = ChartDirector::AngularMeter.new(size, size, 0x000000) # Set the default text and line colors to white (0xffffff) m.setColor(ChartDirector::TextColor, 0xffffff) m.setColor(ChartDirector::LineColor, 0xffffff) # Set meter center and scale radius, and set the scale angle from -180 to +90 degrees m.setMeter(size / 2, size / 2, scaleRadius, -180, 90) # Background gradient with the mainColor at the center and become darker near the border bgGradient = [0, mainColor, 0.5, m.adjustBrightness(mainColor, 0.75), 1, m.adjustBrightness( mainColor, 0.15)] # Fill the meter background with the background gradient m.addRing(0, outerRadius, m.relativeRadialGradient(bgGradient, outerRadius * 0.66)) # Gradient for the neon backlight, with the main color at the scale radius fading to # transparent neonGradient = [0.89, ChartDirector::Transparent, 1, mainColor, 1.07, ChartDirector::Transparent] m.addRing((scaleRadius * 85 / 100).to_i, outerRadius, m.relativeRadialGradient(neonGradient) ) # The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating # using a brighter version of the main color m.addRing(scaleRadius, (scaleRadius + scaleRadius / 80).to_i, m.adjustBrightness(mainColor, 2)) # Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units m.setScale(0, 100, 10, 5, 1) # Set the scale label style, tick length and tick width. The minor and micro tick lengths # are 80% and 60% of the major tick length, and their widths are around half of the major # tick width. m.setLabelStyle("ariali.ttf", fontSize) m.setTickLength(-tickLength, -(tickLength * 80 / 100).to_i, -(tickLength * 60 / 100).to_i) m.setLineWidth(0, tickWidth, ((tickWidth + 1) / 2).to_i, ((tickWidth + 1) / 2).to_i) # Demostrate different types of color scales and putting them at different positions. smoothColorScale = [0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000] highColorScale = [70, ChartDirector::Transparent, 100, 0xff0000] if chartIndex == 0 # Add the smooth color scale m.addColorScale(smoothColorScale, colorScaleRadius, colorScaleWidth) # Add a red (0xff0000) pointer m.addPointer2(value, 0xff0000) else # Add the high color scale at the default position m.addColorScale(highColorScale) # Add a red (0xff0000) triangular pointer starting from 40% and ending at 60% of scale # radius, with a width 6 times the default m.addPointer2(value, 0xff0000, -1, ChartDirector::TriangularPointer2, 0.4, 0.6, 6) end # Configure a large "pointer cap" to be used as the readout circle at the center. The cap # border width is set to 1.5% of the scale radius. The cap color is darker version of the # main color. The border color is a brighter version of the main color with 75% brightness # gradient effect. m.setCap2(ChartDirector::Transparent, m.adjustBrightness(mainColor, 0.3), m.adjustBrightness(mainColor, 1.5), 0.75, 0, readOutRadiusRatio, 0.015) # Add value label at the center using a brighter version of the main color and Arial Italic # font m.addText(size / 2, size / 2, m.formatValue(value, "{value|0}"), "ariali.ttf", readOutFontSize, m.adjustBrightness(mainColor, 2.5), ChartDirector::Center).setMargin(0) # Add glare up to the scale radius m.addGlare(scaleRadius) # Output the chart send_data(m.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") def createChart(chartIndex) # The value to display on the meter value = 54 # The main color of the four meters in this example. The other colors and gradients are derived # from the main color. colorList = [0x0033dd, 0xaaaa00] mainColor = colorList[chartIndex] # # In this example, we demonstrate how to parameterized by size, so that the chart size can be # changed by changing just one variable. # size = 300 # The radius of the entire meter, which is size / 2, minus 2 pixels for margin outerRadius = (size / 2 - 2).to_i # The radius of the meter scale scaleRadius = (outerRadius * 92 / 100).to_i # The radius of the color scale colorScaleRadius = (scaleRadius * 43 / 100).to_i # The width of the color scale colorScaleWidth = (scaleRadius * 10 / 100).to_i # Major tick length tickLength = (scaleRadius * 10 / 100).to_i # Major tick width tickWidth = (scaleRadius * 1 / 100 + 1).to_i # Label font size fontSize = (scaleRadius * 13 / 100).to_i # Radius of readout circle as a ratio to the scale radius readOutRadiusRatio = 0.333333333333 # Readout font size readOutFontSize = (scaleRadius * 24 / 100).to_i # # Create an angular meter based on the above parameters # # Create an AngularMeter object of the specified size. In this demo, we use black (0x000000) as # the background color. You can also use transparent or other colors. m = ChartDirector::AngularMeter.new(size, size, 0x000000) # Set the default text and line colors to white (0xffffff) m.setColor(ChartDirector::TextColor, 0xffffff) m.setColor(ChartDirector::LineColor, 0xffffff) # Set meter center and scale radius, and set the scale angle from -180 to +90 degrees m.setMeter(size / 2, size / 2, scaleRadius, -180, 90) # Background gradient with the mainColor at the center and become darker near the border bgGradient = [0, mainColor, 0.5, m.adjustBrightness(mainColor, 0.75), 1, m.adjustBrightness( mainColor, 0.15)] # Fill the meter background with the background gradient m.addRing(0, outerRadius, m.relativeRadialGradient(bgGradient, outerRadius * 0.66)) # Gradient for the neon backlight, with the main color at the scale radius fading to transparent neonGradient = [0.89, ChartDirector::Transparent, 1, mainColor, 1.07, ChartDirector::Transparent ] m.addRing((scaleRadius * 85 / 100).to_i, outerRadius, m.relativeRadialGradient(neonGradient)) # The neon ring at the scale radius with width equal to 1/80 of the scale radius, creating using # a brighter version of the main color m.addRing(scaleRadius, (scaleRadius + scaleRadius / 80).to_i, m.adjustBrightness(mainColor, 2)) # Meter scale is 0 - 100, with major/minor/micro ticks every 10/5/1 units m.setScale(0, 100, 10, 5, 1) # Set the scale label style, tick length and tick width. The minor and micro tick lengths are # 80% and 60% of the major tick length, and their widths are around half of the major tick # width. m.setLabelStyle("ariali.ttf", fontSize) m.setTickLength(-tickLength, -(tickLength * 80 / 100).to_i, -(tickLength * 60 / 100).to_i) m.setLineWidth(0, tickWidth, ((tickWidth + 1) / 2).to_i, ((tickWidth + 1) / 2).to_i) # Demostrate different types of color scales and putting them at different positions. smoothColorScale = [0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000] highColorScale = [70, ChartDirector::Transparent, 100, 0xff0000] if chartIndex == 0 # Add the smooth color scale m.addColorScale(smoothColorScale, colorScaleRadius, colorScaleWidth) # Add a red (0xff0000) pointer m.addPointer2(value, 0xff0000) else # Add the high color scale at the default position m.addColorScale(highColorScale) # Add a red (0xff0000) triangular pointer starting from 40% and ending at 60% of scale # radius, with a width 6 times the default m.addPointer2(value, 0xff0000, -1, ChartDirector::TriangularPointer2, 0.4, 0.6, 6) end # Configure a large "pointer cap" to be used as the readout circle at the center. The cap border # width is set to 1.5% of the scale radius. The cap color is darker version of the main color. # The border color is a brighter version of the main color with 75% brightness gradient effect. m.setCap2(ChartDirector::Transparent, m.adjustBrightness(mainColor, 0.3), m.adjustBrightness( mainColor, 1.5), 0.75, 0, readOutRadiusRatio, 0.015) # Add value label at the center using a brighter version of the main color and Arial Italic font m.addText(size / 2, size / 2, m.formatValue(value, "{value|0}"), "ariali.ttf", readOutFontSize, m.adjustBrightness(mainColor, 2.5), ChartDirector::Center).setMargin(0) # Add glare up to the scale radius m.addGlare(scaleRadius) # Output the chart m.makeChart("roundmeterreadout%s.png" % chartIndex) end createChart(0) createChart(1) |