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

อ่านเพิ่มเติม...

17.7.09

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

เห็นถามกันมามาก หลังจากที่บทความเรื่อง “ มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ ” ก็เลยอดไม่ได้ที่จะไม่เขียนต่อ เพราะถามกันมาเยอะมาก เอาเป็นว่าเรามาดูวิธีการใช้งานจริงๆ (เพราะผมทำอยู่เป็นประจำ) ของ ChartDirector กันดีกว่า เอาแบบทีละขั้นตอน หมดไส้หมดพุงไปเลย แต่ต้องขอออกตัวไว้ก่อนนะครับ ผมไม่ได้เป็นโปรแกรมเมอร์แต่กำเนิด ฉะนั้นบางครั้งโค๊ดของผม มันจะดูถึกๆ ไปบ้าง แต่อย่าได้ไปมองสาระตรงนั้น ผมอยากให้มองแนวคิดการเขียนโปแกรม และการนำไปใช้งานมากกว่า ก็อย่างที่บอก เรามัน “โปรแกรมเมอร์(จำเป็น)” นี่ครับ  ถ้าใครยังไม่ได้ติดตั้ง ChartDirector ก็ให้กลับไปอ่านบทความ “ มาสร้างกราฟให้ PHP ด้วย ChartDirector กันเหอะ ” ก่อนนะครับ  ผมทดลองแล้วใช้ได้ ติดตั้งได้จริง ส่วนตัว library ของ ChartDirector ก็หาดาวน์โหลดได้จากแบนเนอร์ที่ขึ้นตามอยู่ในเว็บนี่แหละครับ ไม่ต้อง search หาเอาใหม่ เจ้าของบริษัทเค้ามาเอง รับรองของแท้ ไม่ต้อง crack ไม่ต้อง hack จัดไปอย่ามัวลังเล ให้เสียของ

เรามาเริ่มต้นด้วยแนวคิดที่ว่า ผมมีงานประจำที่จะต้องดึงข้อมูลจาก Oracle server จากของบริษัทตัวเอง ซึ่งเป็นดาต้าเบสหลัก ดาต้าเบสใหญ่ แล้วเข้ามาเก็บไว้ใน ดาต้าเบส Mysql แผนกของตัวเอง ซึ่งวันหลังผมจะมาอธิบาย การใช้ PHP ติดต่อกับ Oracle server โดยให้ PHP ทำงานแบบเป็น period ดึงข้อมูลมาเป็นระยะๆ ส่วนเจ้าของเว็บก็นั่งกระดิกนิ้วรอ  ผิวปากด้วยอย่าลืม อิอิอิ.

เผลอแพล๊บเดียว โม้อีกแหละ เอาเป็นว่า พอเราได้ข้อมูลจาก Oracle server แล้วมาเก็บใน MySQL server แล้ว (ในส่วนของการออกแบบฐานข้อมูลในการเก็บ ไม่ขออธิบายนะ) เราก็จะทำการดึงข้อมูลจาก Mysq ให้มาทำการแสดงผล ตาม condition ที่ user หรือผู้ใช้งาน ทำการกำหนดจากการคลิ๊กเลือกว่าจะให้แสดงข้อมูลจากวันไหน เลือกดูค่าใดบ้าง ค่าไหนไม่ต้องการ ซึ่งข้อกำหนดที่ได้จาก user นั้น เราจะเอาไปเป็นตัว select ข้อมูลจาก MySQL server โดยใช้ความรู้ด้านภาษา SQL (ภาษาที่เอาไว้ค้นหาข้อมูลในดาต้าเบส) เมื่อเราได้ข้อมูลจากการ query (ค้นหา)  แล้ว ซึ่งข้อมูลที่ได้มักจะมาในรูป array (ข้อมูลที่มีมิติ)  เราก็จะอาศัยการจัดและสกัดข้อมูลออกมาจะ for loop while loop  if elese  อะไรก็ตามแต่ แล้วจับยัดใส่ไปใน function  ของ  ChartDirector เพียงเท่านี้ เราก็จะได้รายงานที่เหนือชั้นบนหน้า web application (ปลายปี ก็รอเลื่อนตำแหน่งได้เลยครับ พี่น้อง ได้มาแล้ว 2 ขั้น)

อธิบายด้วยคำพูด อาจจะงง มาดูรูปภาพประกอบกันดีกว่า มีคนเค้าบอกว่า “รูปหนึ่งรูปอธิบายได้มากกว่าคำพูดล้านคำ” (อยากให้เป็นอย่างงั้นมั่งจัง แต่ google ไม่ชอบแน่ๆ)

database_structure รูปนี้ เป็นฐานข้อมูลที่ผมวางโครงสร้าง โดยอาศัยข้อมูลหลักจาก Oracle server แล้วเอาบางส่วนของข้อมูลที่ต้องการมาเก็บไว้ที่เครื่องตัวเองที่เป็น MySQL

ในส่วนของหน้า web application ซึ่งเป็นส่วนที่ต้องทำการโค๊ดโปรแกรม PHP script ลงไป เพื่อทำการดึงข้อมูลจาก MySQL server ตาม condition ที่ user เลือกจากหน้าเว็บ แล้วส่ง request เข้ามาที่ Appache server ของเราให้ทำการ query ข้อมูล ตามที่ user ต้องการอยากดู ตรงจุดนี้ เป็นการออกแบบหน้าตา web application ว่าจะให้ user สามารถเลือกอะไรได้มั่ง อะไรเลือกถูกบังคับให้เลือก ต้องอาศัยศิลปะ เข้ามาเกี่ยวข้อง เพราะเราต้องทำให้ user ใช้งานได้ง่าย ไม่เกิดความสับสน

imageรูปนี้แสดงให้เห็นกระบวนการในการสร้างรายงานที่เป็นกราฟ 

เดี๋ยววันนี้ขอจบกระบวนการสร้างไว้ก่อน คราวหน้ามาว่ากันต่อ เรื่องของโค๊ดล้วนๆ เหนื่อยแหละ แล้วก็ใกล้จะสอบแล้วด้วย ขอตัวไปอ่านหนังสือก่อนแล้วกันครับ

อ่านเพิ่มเติม...

5.7.09

วิธี Download จาก MEGAUPLOAD

วันนี้มีเทคนิคเล็กๆน้อย มานำเสนอสำหรับขาโหลดทั้งหลายแล สำหรับท่านที่ชอบดาวน์โหลดใน MEGAUPLOAD

สำหรับเทคนิคนี้นะครับ ต้องใช้ FireFox เจ้าหมาย่าง ตัวเก่งมาช่วยซะแล้ว จะว่าไปแล้วผมก็ค่อนข้างชอบ FireFox เพิ่มขึ้นทุกวัน เพราะอะไรหน่ะเหรอครับ เพราะเจ้า add-on ที่เค้าทำออกมาให้ใช้หน่ะสิครับ ไม่ว่าจะเป็นงาน web developer หรืองาน debugging เจ้า add-on ของ FireFox มีให้ใช้เพียบ ใครยังไม่เคย ก็ไปโหลดมาลองซะ เดี๋ยววันหลังผมจะมาพูดเรื่องการปรับแต่งเจ้า FireFox ให้แรงสุดขั้วด้วย รับรองว่าลืม IE ไปเลยหล่ะกัน

อันดับแรก ก็ไปโหลด FireFox มาก่อนเลย คลิ๊กซะสิ

ต่อมาก็ให้เข้าไปที่ http://addons.mozilla.org/firefox/59/ เพิ่มไปเพิ่ม add-on มาใส่ใน FireFox ของเรา หลังจากติดตั้งแล้ว ก็ให้ restart FireFox อีกครั้ง (ตามระเบียบ)

image

จากนั้นให้ไปตั้งค่าตามนี้ ที่เมนู Tool->User Agent Switcher->Options->Options 

image

Click User Agents->New แล้วเลือก New User Agent

image

จากนั้นให้เพิ่มค่า (เอาเฉพาะตัวหนา นะครับ)

+ Description: MEGAUPLOAD
+ User Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; FDM; MEGAUPLOAD 1.0

image

คงไม่ต้องบอกนะว่า ถ้าใส่ค่าเสร็จแล้ว ให้กด “ตกลง” ออกมาเลย

ต่อไป ถ้าต้องการดาวน์โหลดไฟล์ที่เค้าไปฝากไว้ที่ MEGAUPLOAD ก็ให้เลือกไปที่ Tools->User Agent Switcher->MEGAUPLOAD ได้เลย เพียงเท่านี้ เจ้า MEGAUPLOAD จะคิดว่า เครื่องคุณมี Alexa ซึ่งจริงๆแล้วเครื่องเราไม่มี เพียงแค่นี้ เราก็จะสามารถโหลดได้เรื่อยๆ ไม่จำกัด

อ่านเพิ่มเติม...
 

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

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