23.7.09

ตัวอย่างการใช้งาน ChartDirector (ตอนที่ 2)

     จากใน ตอนที่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/ เมื่อทุกอย่างถูกติดตั้งเรียบร้อยแล้ว

image

ก่อนอื่นขอแนะนำให้ไปสร้างข้อมูลไว้ในดาต้าเบสก่อนนะครับ แล้วจัดการเรื่องของ user/password ที่เอาไว้ connect กับดาต้าเบสให้เรียยบร้อย ให้เหมือนกับโค๊ดที่เขียนไว้ให้ดู ไม่งั้นมันจะรันไม่ออกนะครับ โดยเฉพาะ ถ้ามีการ error ใน file chart.php มันจะไม่โชว์ error ในบางครั้ง เพราะมันเป็นรูปภาพหน่ะครับ ให้ระวังตรงนี้ด้วย

โค๊ดในการสร้าง table สำหรับเก็บข้อมูล ผมเขียนนไว้ให้แล้ว เพื่อนๆสามารถนำไปวางไว้ที่ phpMyadmin ได้เลย หรือจะใช้ mysql front ก็ได้ ถนัดแบบไหนก็เลือกเลยนะครับ ในที่นี้ผมสร้างตาราง simple ไว้ในดาต้าเบส test ด้วย mysql front  ดูตามรูปประกอบนะครับ

image

โค๊ดการสร้างตาราง 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>
    &nbsp;&nbsp;&nbsp;<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 ให้มา แล้วลองแก้ไขดัดแปลงดูครับ ขอให้สนุกครับ สวัสดีครับ

6 ความคิดเห็น:

~'Oo-MadLyAek-oO'~ on 3:10 pm, January 31, 2010 said...

ขอบคุณมากเลย ครับบบบ ^^

Anonymous said...

จะนำตัวเลขมาแสดงบนแท่งกราฟ ต้องใส่ตรงไหนครับ

Anonymous said...

ภาษาไทยไม่ขึ้นครับ จะทำอย่างไรดี

Mr. Piti Jintanont on 10:19 am, September 22, 2010 said...
This comment has been removed by the author.
Mr. Piti Jintanont on 10:21 am, September 22, 2010 said...

ถ้าจะให้แสดงผลหลายๆกราฟในเพจเดียวทำได้หรือเปล่าครับ

ghostmission on 10:15 am, December 17, 2012 said...

ขอบพระคุณมากครับ ช่วยให้ผมทำกราฟได้ดีมาก ขอบคุณเป็นอย่างยิ่ง

Post a Comment

 

เกี่ยวกับฉัน(ไหมเนี้ย)

My photo

สวัสดีครับ ชื่อเปิ้ลนะครับ ถ้ามีอะไรให้ช่วยเหลือได้ ก็จะช่วยครับ
ผมได้สร้างบล๊อกไว้ เพื่อเก็บรวบรวมความรู้ และประสบการณ์ในการทำงานครับ แวะไปเยี่ยมชมกันได้ครับ http://mechacity.blogspot.com และบล๊อก http://faker-programmer.blogspot.com ครับ

รายการบล๊อกอื่นๆ

  • Solved: error: 'TKD2' was not declared in this scope, LIFA_Base compile error - วันนี้ จะมาเล่าถึงปัญหาที่เจอในการเบิร์นโค๊ด LIFA_Base ที่เราใช้ในการทำให้ Arduino ของเราสามารถรับคำสั่งจาก LabVIEW ได้ ปัญหานี้ เริ่มเกิดขึ้นตอนที่ Ard...
  • Type-Fu : Typing practice game online - หากใครที่สนใจ หรือจะต้องทำงานเกี่ยวกับคอมพิวเตอร์ หนึ่งในความจำเป็นก็คือ จะต้องเรียนรู้ที่พิมพ์สัมผัสได้ เพราะการที่พิมพ์สัมผ้สได้ มันได้ประโยชน์หลายๆ อย...

Blog อื่นๆ ที่น่าติดตาม

เหล่าบรรดา Blogger