จากใน ตอนที่1 เราได้ทราบหลักการทำงานของ ChartDirector ไปแล้ว ขอสรุปให้ฟังอีกครั้งว่าการทำงานของ Chartdirector มันจะเริ่มจากตอนไหน ส่วนเพื่อนๆที่เพิ่งเปิดเข้ามา ยังไม่ทราบว่า ChartDirector ติดตั้งอย่างไร ขอให้กลับไปอ่านบทความ "มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ" กันก่อนนะครับ ส่วนตัว library ChartDirector ก็หาได้จากโฆษณาที่ขึ้นอยู่ตามเว็บนี้เลยนะครับ อันเดียวกัน ไม่ต้อง ไป search ไป hack ไป crack ที่ไหนหรอกครับ จัดหามาให้แล้ว
ขั้นตอนการทำงานคร่าวๆ
1. user ส่ง request เข้าไปหา web server โดยผ่านหน้าเว็บที่เราเขียน script PHP เอาไว้
2. Web server รับ request เข้ามาประมวลผล อาจจะทำการค้นหาข้อมูลที่ดาต้าเบส หรือ text file
3. PHP script ทำการสกัดข้อมูลออกมา เพื่อจัดข้อมูลก่อนส่งเข้าไปใน function ของ ChartDirector
4. ChartDirector ทำการส่ง output ออกมาเป็น image file สังเกตที่บรรทัดล่างสุดของตัวอย่าง ChartDirector
header("Content-type: image/png");
print($c->makeChart2(PNG));
5. Web server ทำการส่ง Respond กลับไปหา user ในรูปแบบ image
จริงๆแล้ว มันเหมือนกับเราเปิดดูรูป ตามเว็บที่เค้าทำ link ไว้ให้นั่นแหละ ต่างกันตรงที่ รูปที่เราเปิดนั่นมันสามารถเปลี่ยนแปลงได้ (dynamic) ตลอดเวลา ขึ้นอยู่กับเงื่อนไขที่ user ส่งเขาไปหา seerver ซึ่งทั้งหมดนี้ มันขึ้นอยู่กับการออกแบบและวาง algorithm ในการให้ script ทำงานตามที่เราต้องการ
ต่อไปเรามาลองสร้างตัวอย่างง่ายๆเพื่อให้เกิดความเข้าใจในการนำ ChartDirector ไปใช้งานกันดีกว่า โดยผมจะแยกการทำงานของ script PHP ออกเป็นสองฝั่ง แต่ script ทั้งหมดก็ยังอยู่บน server นะครับ อย่าสับสนนะครับ (เพราะ PHP เป็น server side script) โดยทั้งหมดวางไว้ตาม folder ที่ผมกำหนดไว้นะครับ แล้วก็เรียก http://localhost/simple/ เมื่อทุกอย่างถูกติดตั้งเรียบร้อยแล้ว
ก่อนอื่นขอแนะนำให้ไปสร้างข้อมูลไว้ในดาต้าเบสก่อนนะครับ แล้วจัดการเรื่องของ user/password ที่เอาไว้ connect กับดาต้าเบสให้เรียยบร้อย ให้เหมือนกับโค๊ดที่เขียนไว้ให้ดู ไม่งั้นมันจะรันไม่ออกนะครับ โดยเฉพาะ ถ้ามีการ error ใน file chart.php มันจะไม่โชว์ error ในบางครั้ง เพราะมันเป็นรูปภาพหน่ะครับ ให้ระวังตรงนี้ด้วย
โค๊ดในการสร้าง table สำหรับเก็บข้อมูล ผมเขียนนไว้ให้แล้ว เพื่อนๆสามารถนำไปวางไว้ที่ phpMyadmin ได้เลย หรือจะใช้ mysql front ก็ได้ ถนัดแบบไหนก็เลือกเลยนะครับ ในที่นี้ผมสร้างตาราง simple ไว้ในดาต้าเบส test ด้วย mysql front ดูตามรูปประกอบนะครับ
โค๊ดการสร้างตาราง simple และใส่ข้อมูล
#
# Table structure for table 'simple'
#
CREATE TABLE IF NOT EXISTS simple (
Xyear varchar(4) ,
Xvalue int(6) unsigned DEFAULT '0'
);
#
# Dumping data for table 'simple'
#
INSERT INTO simple VALUES("1990", "1600");
INSERT INTO simple VALUES("1991", "1950");
INSERT INTO simple VALUES("1992", "850");
INSERT INTO simple VALUES("1993", "500");
INSERT INTO simple VALUES("1994", "800");
INSERT INTO simple VALUES("1995", "500");
INSERT INTO simple VALUES("1996", "450");
INSERT INTO simple VALUES("1997", "560");
INSERT INTO simple VALUES("1998", "630");
INSERT INTO simple VALUES("1999", "800");
INSERT INTO simple VALUES("2000", "1100");
INSERT INTO simple VALUES("2001", "1350");
INSERT INTO simple VALUES("2002", "1600");
INSERT INTO simple VALUES("2003", "1950");
INSERT INTO simple VALUES("2004", "2300");
INSERT INTO simple VALUES("2005", "2700");
INSERT INTO simple VALUES("2006", "630");
INSERT INTO simple VALUES("2007", "800");
INSERT INTO simple VALUES("2008", "1100");
INSERT INTO simple VALUES("2009", "1350");
ฝั่ง user
มีหน้าที่ในการส่ง request เข้าไป เราจะสร้าง หน้าเว็บขึ้นมา 1 หน้าเพื่อให้ user ส่ง request เข้ามา ในตัวอย่างนี้เราจะทำกันแบบง่ายๆนะครับ
ไฟล์ที่เกี่ยวข้องคือ index.php และ display.php มีโค๊ดดังต่อไปนี้
index.php :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Simple Bar Chart</TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">
<TABLE width="1003" border="1" cellspacing="0" cellpadding="0">
<TR>
<TD height="100" align="center" bgcolor="#99CCFF">
<FORM METHOD=GET ACTION='display.php' METHOD='GET' TARGET="FrameChart">
<SELECT NAME="YEAR" width="200">
<OPTION VALUE="1990">1990</OPTION>
<OPTION VALUE="1991">1991</OPTION>
<OPTION VALUE="1992">1992</OPTION>
<OPTION VALUE="1993">1993</OPTION>
<OPTION VALUE="1994">1994</OPTION>
<OPTION VALUE="1995">1995</OPTION>
<OPTION VALUE="1996">1996</OPTION>
<OPTION VALUE="1997">1997</OPTION>
<OPTION VALUE="1998">1998</OPTION>
<OPTION VALUE="1999">1999</OPTION>
<OPTION VALUE="2000">2000</OPTION>
<OPTION VALUE="2001">2001</OPTION>
<OPTION VALUE="2002">2002</OPTION>
<OPTION VALUE="2003">2003</OPTION>
<OPTION VALUE="2004">2004</OPTION>
<OPTION VALUE="2005">2005</OPTION>
<OPTION VALUE="2006">2006</OPTION>
<OPTION VALUE="2007">2007</OPTION>
<OPTION VALUE="2008">2008</OPTION>
<OPTION VALUE="2009">2009</OPTION>
</SELECT>
<INPUT TYPE="submit" value="Click">
</FORM>
</TD>
</TR>
<TR>
<TD height="400" bgcolor="#000099">
<iframe id='FrameChart' name= 'FrameChart' width='100%' height='500' frameborder='0' src='display.php' scrolling='auto'></iframe>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
display.php :
<?php
$year = $_GET['YEAR'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE width="100%">
<TR>
<TD align="center">
<IMG SRC="chart.php?YEAR=<?php echo $year;?>" BORDER="0">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
ฝั่ง server รับ request จาก user แล้วไปค้นหาข้อมูลในดาต้าเบสแล้วทำการจัดข้อมูลส่งเข้าไปใน function ของ ChartDirector แล้วทำการวาดรูปส่งกลับมาให้ user (กลับมาที่หน้า display.php บริเวณที่เป็น iframe อีกครั้ง) ไฟล์ที่เกี่ยวข้องได้แก่ chart.php
chart.php :
<?php
require_once("../ChartDirector/lib/phpchartdir.php");
if(isset($_GET['YEAR'])){
$year = $_GET['YEAR'];
}else{
$year = date("Y");
}
$hostname = "localhost";
$user = "root";
$password = "merlin";
$dbname = "test";
mysql_connect($hostname,$user,$password) or die("Can't connect database ".mysql_error());
mysql_select_db($dbname) or die("Can't select database ".mysql_error());
$sql = " SELECT * FROM simple where Xyear <= '$year' order by Xyear asc limit 1,10 ";
$db_query=mysql_db_query($dbname,$sql);
$num_rows=mysql_num_rows($db_query);
for($i=0;$i<$num_rows;$i++){
$row=mysql_fetch_array($db_query);
$Ayear[] = $row['Xyear'];
$Avalue[] = $row['Xvalue'];
}
# The data for the bar chart
$data = $Avalue;
# The labels for the bar chart
$labels = $Ayear;
# Create a XYChart object of size 600 x 380 pixels. Set background color to brushed
# silver, with a 2 pixel 3D border. Use rounded corners of 20 pixels radius.
$c = new XYChart(600, 380, brushedSilverColor(), Transparent, 2);
# Add a title to the chart using 18pts Times Bold Italic font. Set top/bottom margins
# to 8 pixels.
$textBoxObj = $c->addTitle("Annual Revenue for Star Tech", "timesbi.ttf", 18);
$textBoxObj->setMargin2(0, 0, 8, 8);
# Set the plotarea at (70, 55) and of size 460 x 280 pixels. Use transparent border
# and black grid lines. Use rounded frame with radius of 20 pixels.
$c->setPlotArea(70, 55, 460, 280, -1, -1, Transparent, 0x000000);
$c->setRoundedFrame(0xffffff, 20);
# Add a multi-color bar chart layer using the supplied data. Set cylinder bar shape.
$barLayerObj = $c->addBarLayer3($data);
$barLayerObj->setBarShape(CircleShape);
# Set the labels on the x axis.
$c->xAxis->setLabels($labels);
# Show the same scale on the left and right y-axes
$c->syncYAxis();
# Set the left y-axis and right y-axis title using 10pt Arial Bold font
$c->yAxis->setTitle("USD (millions)", "arialbd.ttf", 10);
$c->yAxis2->setTitle("USD (millions)", "arialbd.ttf", 10);
# Set y-axes to transparent
$c->yAxis->setColors(Transparent);
$c->yAxis2->setColors(Transparent);
# Disable ticks on the x-axis by setting the tick color to transparent
$c->xAxis->setTickColor(Transparent);
# Set the label styles of all axes to 8pt Arial Bold font
$c->xAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis->setLabelStyle("arialbd.ttf", 8);
$c->yAxis2->setLabelStyle("arialbd.ttf", 8);
# Output the chart
header("Content-type: image/jpeg");
print($c->makeChart2(JPG));
?>
จริงๆตัวย่างที่ยกมาให้ดูนี้ มันค่อนข้างถึกๆ นิดนึง แต่สำหรับใครที่มือใหม่ จะได้มองออกหน่ะครับ ส่วนมือโปรก็ตามสบายครับ ในส่วนของการใช้งาน ChartDirector ผมขอหยุด��ว้เท่านี้หล่ะกัน ก้ไม่น่าจะมีอะไรมาก พยายามดูที่ demo ที่ chartDirector ให้มา แล้วลองแก้ไขดัดแปลงดูครับ ขอให้สนุกครับ สวัสดีครับ
