ChartDirector 7.0 (Perl Edition)
Round Meters with Readout
Source Code Listing
#!/usr/bin/perl
# The ChartDirector for Perl module is assumed to be in "../lib"
use File::Basename;
use lib (dirname($0)."/../lib") =~ /(.*)/;
use perlchartdir;
sub createChart
{
my $chartIndex = shift;
# The value to display on the meter
my $value = 54;
# The main color of the four meters in this example. The other colors and gradients are derived
# from the main color.
my $colorList = [0x0033dd, 0xaaaa00];
my $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.
#
my $size = 300;
# The radius of the entire meter, which is size / 2, minus 2 pixels for margin
my $outerRadius = int($size / 2 - 2);
# The radius of the meter scale
my $scaleRadius = int($outerRadius * 92 / 100);
# The radius of the color scale
my $colorScaleRadius = int($scaleRadius * 43 / 100);
# The width of the color scale
my $colorScaleWidth = int($scaleRadius * 10 / 100);
# Major tick length
my $tickLength = int($scaleRadius * 10 / 100);
# Major tick width
my $tickWidth = int($scaleRadius * 1 / 100 + 1);
# Label font size
my $fontSize = int($scaleRadius * 13 / 100);
# Radius of readout circle as a ratio to the scale radius
my $readOutRadiusRatio = 0.333333333333;
# Readout font size
my $readOutFontSize = int($scaleRadius * 24 / 100);
#
# 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.
my $m = new AngularMeter($size, $size, 0x000000);
# Set the default text and line colors to white (0xffffff)
$m->setColor($perlchartdir::TextColor, 0xffffff);
$m->setColor($perlchartdir::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
my $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
my $neonGradient = [0.89, $perlchartdir::Transparent, 1, $mainColor, 1.07,
$perlchartdir::Transparent];
$m->addRing(int($scaleRadius * 85 / 100), $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, int($scaleRadius + $scaleRadius / 80), $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("Arial Italic", $fontSize);
$m->setTickLength(-$tickLength, -int($tickLength * 80 / 100), -int($tickLength * 60 / 100));
$m->setLineWidth(0, $tickWidth, int(($tickWidth + 1) / 2), int(($tickWidth + 1) / 2));
# Demostrate different types of color scales and putting them at different positions.
my $smoothColorScale = [0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100, 0xff0000];
my $highColorScale = [70, $perlchartdir::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, $perlchartdir::TriangularPointer2, 0.4, 0.6, 6);
}
# 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($perlchartdir::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}"), "Arial Italic",
$readOutFontSize, $m->adjustBrightness($mainColor, 2.5), $perlchartdir::Center)->setMargin(0
);
# Add glare up to the scale radius
$m->addGlare($scaleRadius);
# Output the chart
$m->makeChart("roundmeterreadout$chartIndex.png");
}
createChart(0);
createChart(1);