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.
[File: phpdemo/dbdemo3_main.php".]
= 1991 And Year(TimeStamp) <= 2001 " .
"Group By Year(TimeStamp) Order By Year(TimeStamp)";
#
#Read in the revenue data into arrays
#
mysql_connect("localhost", "test", "test");
$result = mysql_db_query("sample", $SQLstatement);
while ($row = mysql_fetch_row($result)) {
$revenue[] = $row[0];
$timestamp[] = $row[1];
}
#
#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
$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
$title = $c->addTitle("Revenue for Last 10 Years", "timesbi.ttf");
$title->setBackground(0xffff00);
#Add a legend box at the top of the plotarea
$legend = $c->addLegend(70, 30, 0, "", 8);
$legend->setBackground(Transparent);
#Add a multi-color bar chart layer using the supplied data
$layer = $c->addBarLayer3($revenue);
$layer->setBorderColor(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 session variable
session_register("chart");
$HTTP_SESSION_VARS["chart"] = $chart = $c->makeChart2(PNG);
$chartURL = "myimage.php?img=chart&id=".uniqid(session_id())."&".SID;
#Create an image map for the chart
$imageMap = $c->getHTMLImageMap("dbdemo3a.php", "",
"title='{xLabel}: USD {value|0}K'");
?>
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
|
The above code first performs a database query and read the data into arrays. It
then uses the data to create a bar chart. The chart is saved in a session
variable using
BaseChart.makeSession
. An <IMG> tag is used to retrieve the
chart with
as the URL. "myimage.php" is a simple utility that comes with ChartDirector
for retrieving images from session variables.
When the user clicks on the bar chart, the handler "dbdemo3a.php" will be
invoked with a number of HTTP query parameters to indicate which bar the user
has clicked. In particular, the xLabel parameter will contain the x-axis label
for the bar clicked. Using the xLabel parameter, the "dbdemo3a.php" knows which
year the user has clicked. It then query the database for the data on that year,
and produces the bar chart for that year.
In this example, the "dbdemo3a.php" will produce another clickable chart using
"xystub.php" as the handler.
[File: phpdemo/dbdemo3a.php".]
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
$title = $c->addTitle("Revenue for " . $SelectedYear, "timesbi.ttf");
$title->setBackground(0xffff00);
#Add a legend box at the top of the plotarea
$legend = $c->addLegend(70, 30, 0, "", 8);
$legend->setBackground(Transparent);
#Add a stacked bar chart layer using the supplied data
$layer = $c->addBarLayer2(Stack);
$layer->addDataSet($software, -1, "Software");
$layer->addDataSet($hardware, -1, "Hardware");
$layer->addDataSet($services, -1, "Services");
$layer->setBorderColor(Transparent, 1);
#Set the x axis labels. In this example, the labels must be Jan - Dec.
$labels = array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
"Sept", "Oct", "Nov", "Dec");
$c->xAxis->setLabels($labels);
#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 session variable
session_register("chart");
$HTTP_SESSION_VARS["chart"] = $chart = $c->makeChart2(PNG);
$chartURL = "myimage.php?img=chart&id=".uniqid(session_id())."&".SID;
#Create an image map for the chart
$imageMap = $c->getHTMLImageMap("xystub.php", "",
"title='{dataSetName} @ {xLabel} = USD {value|0}K'");
?>
Database Clickable Chart
You have click the bar of the year
. Below is the "drill-down" chart
showing the monthly details.
">
View source code
|
For demo purpose, "xystub.php" simply displays information on what is clicked.
It's source code is as follows.
[File: phpdemo/xystub.php".]
Simple Clickable XY Chart Handler
">
View Source Code
You have clicked on the following chart element :
- Data Set :
- X Position :
- X Label :
- Data Value :
|
© 2004 Advanced Software Engineering Limited. All rights reserved.