In this section, we will present an example that employs both database and image
maps.
We will display a bar chart that shows the revenue for the last 10 years. When
the user clicks on a bar, it will "drill down" to another bar chart showing the
monthly revenue for the year represented by the bar clicked. All data comes from
a database.
The code that creates the clickable bar chart for the last 10 years are as
follows.
[The following is available as "perldemo_cgi/dbdemo3_main.pl".]
#!/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;
use DBI;
#
#Get the revenue for the last 10 years
#
my $SQLstatement =
"Select Sum(Software + Hardware + Services), Year(TimeStamp) " .
"From revenue Where Year(TimeStamp) >= 1991 " .
"And Year(TimeStamp) <= 2001 " .
"Group By Year(TimeStamp) Order By Year(TimeStamp)";
#
#Read in the revenue data into arrays
#
my $dbh = DBI->connect('dbi:mysql:sample','test','test');
my $sth = $dbh->prepare($SQLstatement);
my @revenue;
my @timestamp;
$sth->execute();
while (my @row = $sth->fetchrow_array) {
push @revenue, $row[0];
push @timestamp, $row[1];
}
$dbh->disconnect;
#
#Now we obtain the data into arrays, we can start to draw the chart
#using ChartDirector
#
#Create a XYChart of size 420 pixels x 240 pixels
my $c = new XYChart(420, 240);
#Set the chart background to pale yellow (0xffffc0) with a 2 pixel 3D border
$c->setBackground(0xffffc0, 0xffffc0, 2);
#Set the plotarea at (70, 50) and of size 320 x 150 pixels. Set background
#color to white (0xffffff). Enable both horizontal and vertical grids by
#setting their colors to light grey (0xc0c0c0)
$c->setPlotArea(70, 50, 320, 150, 0xffffff, 0xffffff, 0xc0c0c0, 0xc0c0c0);
#Add a title to the chart
$c->addTitle("Revenue for Last 10 Years", "timesbi.ttf")
->setBackground(0xffff00);
#Add a legend box at the top of the plotarea
$c->addLegend(70, 30, 0, "", 8)->setBackground($perlchartdir::Transparent);
#Add a multi-color bar chart layer using the supplied data
$c->addBarLayer3(\@revenue)->setBorderColor($perlchartdir::Transparent, 1);
#Set the x-axis labels using the supplied labels
$c->xAxis->setLabels(\@timestamp);
#Set the x-axis width to 2 pixels
$c->xAxis->setWidth(2);
#Set the y axis title
$c->yAxis->setTitle("USD (K)");
#Set the y-axis width to 2 pixels
$c->yAxis->setWidth(2);
#Create the image and save it in a temporary location
my $filename = perlchartdir::tmpFile().".png";
$c->makeChart($filename);
$chartURL = "myimage.pl?img=".$filename;
#Create an image map for the chart
my $imageMap = $c->getHTMLImageMap("dbdemo3a.pl", "",
"title='{xLabel}: USD {value|0}K'");
print "Content-type: text/html\n\n";
print <
Database Clickable Charts
The example demonstrates creating a clickable chart
using data from a database. Click on a bar below to "drill down" onto a
particular year.
View source code
|