#!/usr/bin/perl
#Include current script directory in the module path (needed on Microsoft IIS).
#This allows this script to work by copying ChartDirector to the same directory
#as the script (as an alternative to installation in Perl module directory)
use File::Basename;
use lib dirname($0);
use perlchartdir;
#
#For demo purpose, we use hard coded data. In real life, the following data
#could come from a database.
#
my $revenue = [4500, 5600, 6300, 8000, 12000, 14000, 16000, 20000, 24000, 28000]
;
my $grossMargin = [62, 65, 63, 60, 55, 56, 57, 53, 52, 50];
my $backLog = [563, 683, 788, 941, 1334, 1522, 1644, 1905, 2222, 2544];
my $receviable = [750, 840, 860, 1200, 2200, 2700, 2800, 3900, 4900, 6000];
my $labels = ["1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999",
"2000", "2001"];
#Create a XYChart object of size 440 x 200 pixels
my $c = new XYChart(440, 200);
#Add a title to the chart using Times Bold Italic font
$c->addTitle("Annual Revenue for Star Tech", "timesbi.ttf");
#Set the plotarea at (60, 5) and of size 350 x 150 pixels
$c->setPlotArea(60, 25, 350, 150);
#Add an area chart layer for the revenue data
$c->addAreaLayer($revenue, 0x3333cc, "Revenue")->setBorderColor(
$perlchartdir::SameAsMainColor);
#Set the x axis labels using the given labels
$c->xAxis()->setLabels($labels);
#Add a title to the y axis
$c->yAxis()->setTitle("USD (K)");
#Create the image and save it in a temporary location
my $chart1URL = $c->makeTmpFile("/tmp/tmpcharts");
#Client side Javascript to show detail information "onmouseover"
my $showText = "onmouseover='setDIV(\"info{x}\", \"visible\");' ";
#Client side Javascript to hide detail information "onmouseout"
my $hideText = "onmouseout='setDIV(\"info{x}\", \"hidden\");' ";
#"alt" attribute to show tool tip
my $toolTip = "title='{xLabel}: USD {value|0}K'";
#Create an image map for the chart
my $imageMap = $c->getHTMLImageMap("xystub.pl", "", "$showText$hideText$toolTip"
);
print "Content-type: text/html\n\n";
print <
Javascript Clickable Chart
View Source Code
Move the mouse cursor over the area chart to see what happens!
This effect is achieved by using image maps with client side Javascript.
EndOfHTML
;
for($i = 0; $i < scalar(@$revenue); ++$i) {
print <
Year $labels->[$i]
Revenue : USD $revenue->[$i]K
Gross Margin : $grossMargin->[$i]%
Back Log : USD $backLog->[$i]K
A/C Receviable : USD $receviable->[$i]K
EndOfHTML
;
}
print <
|