Author Archive
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 7 Finally ตบตูด
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 7 Finally ตบตูด
บทนี้คงเป็นบทส่งท้าย ท้ายสุด สำหรับซี่รี่ชาร์ท บทความที่เขียนมาทั้งหมด เป็นการใช้เบื้องต้นเท่านั้น สำหรับชาร์ทตัวนี้ ยังมีการปรับ
แต่งได้อีกมากมาย ซึ่งถ้าเอามาเขียนคงกินบทความไปไม่น้อย คงต้องให้ท่านๆ ที่ติดตามมา ได้เข้าไปอ่านรายละเอียดเพิ่มเติมจากเว็บไซต์
เจ้าของเค้าล่ะครับ และหวังเป็นอย่างยิ่งว่า บทความชุดนี้จะเป็นประโยชน์แก่ท่านบ้าง แม้นิดหน่อยก็ยังดี
มีสิ่งหนึ่งที่อยากจะพูดเพื่อเป็นความรู้เพิ่มเติมเกี่ยวกับ xml ว่า xml เป็นภาษาที่ใช้อธิบายข้อมูล element ทุกตัว เราเป็นคนคิดเอง
ทางผู้รับผิดชอบภาษาตัวนี้ ให้มาเพียงแค่กฎเท่านั้น
กฎโดยคร่าวๆ ของ xml คือ
1. xml เป็นภาษาที่ case-sensitive คือให้ความสำคัญกับตัวอักษรเล็ก-ใหญ่
2.xml จะต้องมี element ที่เป็น root เสมอ
3.element ทุกตัว เมื่อเปิดแล้วจะต้องปิด เสมอ เช่น <row></row> หรือ <null /> ( แบบนี้เรียกปิดตัวเอง)
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 6 database
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 6 database
ใกล้จบซี่รี่ เข้าไปทุกที คราวนี้จะดึงข้อมูลจากฐานข้อมูลมาแสดงเป็นชาร์ทแล้วล่ะ ยังไงก็ตามผมจะยังใช้ข้อมูลสมมติ ชุดนี้อยู่
สมมติ ผมมีฐานข้อมูลตัวหนึ่ง ชื่อ db_charts มี 1 table ชื่อ tbl_chart ประกอบด้วย field 4 field คือ
year_2001
year_2002
year_2003
year_2004
และมีข้อมูลเก็บเก็บอยู่ภายในเหมือนในตาราง
| ปี 2001 | ปี 2002 | ปี 2003 | ปี 2004 | |
|---|---|---|---|---|
| ข้อมูลชุดที่ 1 | 5 | 10 | 30 | 63 |
| ข้อมูลชุดที่ 2 | 100 | 20 | 65 | 55 |
1. สร้างไฟล์ใหม่ชื่อ sample.php และเขียนโค้ด ดังนี้
<?php
$hostname_connection = “localhost”;
$database_connection = “db_general_use”;
$username_connection = “root”;
$password_connection = “”;
$connection = mysql_pconnect($hostname_connection, $username_connection, $password_connection)
or trigger_error(mysql_error(),E_USER_ERROR);
mysql_query(“SET NAMES UTF8″);
mysql_select_db($database_connection, $connection);
$query_rs_chart = “SELECT * FROM tbl_chart”;
$rs_chart = mysql_query($query_rs_chart, $connection) or die(mysql_error());
$row_rs_chart = mysql_fetch_assoc($rs_chart);
$totalRows_rs_chart = mysql_num_rows($rs_chart);
do {
$iLoop++ ;
$data .= “<row>n
<string>ข้อมูลชุดที่ {$iLoop}</string>n
<number>{$row_rs_chart['year_2001']}</number>n
<number>{$row_rs_chart['year_2002']}</number>n
<number>{$row_rs_chart['year_2003']}</number>n
<number>{$row_rs_chart['year_2004']}</number>n
</row>n
” ;
} while ( $row_rs_chart = mysql_fetch_assoc($rs_chart) );
echo “<?xml version=’1.0′ encoding=’utf-8′?>” ;
?>
<chart>
<chart_data>
<row>
<null/>
<string>ปี 2001</string>
<string>ปี 2002</string>
<string>ปี 2003</string>
<string>ปี 2004</string>
</row>
<?php echo $data ;?>
</chart_data>
<legend_label layout=’horizontal ‘
bullet=’circle’
font=’MS Sans Serif’
bold=’true’
size=’12′
/>
<axis_category
font=’MS Sans Serif’
size=’10′
/>
<chart_type>3d column</chart_type>
</chart>
2. แก้ไขไฟล์ example.php ให้เปลี่ยนจากการเรียกไฟล์ xml เป็น php
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″
width=”400″
height=”250″
align=”"
id=”charts”>
<PARAM NAME=movie VALUE=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.php“>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#666666>
<EMBED src=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.php”
quality=high
bgcolor=#666666
width=”400″
height=”250″
name=”charts”
align=”"
swLiveConnect=”true”
type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer”>
</EMBED>
</OBJECT>
</body>
</html>
แล้วลองรันไฟล์ example.php อ่าฮ้า
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 5 แปลงร่าง
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 5 แปลงร่าง
ตัว XML/SWF Charts นี้ไม่ใช่จะแสดงได้แต่เพียงกราฟแท่งเท่านั้น ยังมีรูปแบบอื่นอีกหลาย ให้เราเลือก การเปลี่ยนรูปแบบกราฟ
ก็ไม่มีไรมากไปกว่า เพิ่ม element ชื่อ <chart_type> เข้าไป จะแสดงตัวอย่างด้วยการแก้ไขไฟล์ sample.xml เหมือนเดิมนะครับ
ข้อมูลที่จัดให้อยู่ในรูปของตาราง จะเป็นดังนี้
| ปี 2001 | ปี 2002 | ปี 2003 | ปี 2004 | |
|---|---|---|---|---|
| ข้อมูลชุดที่ 1 | 5 | 10 | 30 | 63 |
| ข้อมูลชุดที่ 2 | 100 | 20 | 65 | 55 |
เปิดไฟล์ sample.xml ของเราและทำการแก้ไข
<chart>
<chart_data>
<row>
<null/>
<string>ปี 2001</string>
<string>ปี 2002</string>
<string>ปี 2003</string>
<string>ปี 2004</string>
</row>
<row>
<string>ข้อมูลชุดที่ 1</string>
<number>5</number>
<number>10</number>
<number>30</number>
<number>63</number>
</row>
<row>
<string>ข้อมูลชุดที่ 2</string>
<number>100</number>
<number>20</number>
<number>65</number>
<number>55</number>
</row>
</chart_data>
<legend_label layout='horizontal '
bullet='circle'
font='MS Sans Serif'
bold='true'
size='12'
/>
<axis_category
font='MS Sans Serif'
size='10'
/>
<chart_type>3d column</chart_type>
</chart>
เซฟแล้วก็ลองรันไฟล์ example.php ของเราดู ซึ่งจะต้องได้ผลลัพธ์ ดังนี้
นอกจาก 3d column แล้ว ค่าตรงนี้ยังเป็นได้อีกหลายค่า ลองเล่นดู
- line
- column (default)
- stacked column
- floating column
- 3d column
- stacked 3d column
- parallel 3d column
- pie
- 3d pie
- bar
- stacked bar
- floating bar
- area
- stacked area
- candlestick
- scatter
- polar
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 4 พูดไทย
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 4 พูดไทย
เราจะยังเล่นอยู่กับไฟล์ sample.xml ผมจะใช้ข้อมูลเดิม แต่มีการเปลี่ยนแปลงนิดหน่อย เพื่อแสดงตัวอย่างการใช้งานภาษาไทย
ข้อมูลที่จัดให้อยู่ในรูปของตาราง จะเป็นดังนี้
| ปี 2001 | ปี 2002 | ปี 2003 | ปี 2004 | |
|---|---|---|---|---|
| ข้อมูลชุดที่ 1 | 5 | 10 | 30 | 63 |
| ข้อมูลชุดที่ 2 | 100 | 20 | 65 | 55 |
เปิดไฟล์ sample.xml ของเราและทำการแก้ไข
<chart>
<chart_data>
<row>
<null/>
<string>ปี 2001</string>
<string>ปี 2002</string>
<string>ปี 2003</string>
<string>ปี 2004</string>
</row>
<row>
<string>ข้อมูลชุดที่ 1</string>
<number>5</number>
<number>10</number>
<number>30</number>
<number>63</number>
</row>
<row>
<string>ข้อมูลชุดที่ 2</string>
<number>100</number>
<number>20</number>
<number>65</number>
<number>55</number>
</row>
</chart_data>
<legend_label layout='horizontal '
bullet='circle'
font='MS Sans Serif'
bold='true'
size='12'
/>
<axis_category
font='MS Sans Serif'
size='10'
/>
</chart>
เซฟแล้วก็ลองรันไฟล์ example.php ของเราดู ซึ่งจะต้องได้ผลลัพธ์ ดังนี้
ทีนี้ผมจะอธิบาย element แต่ละตัวโดยคร่าวๆ
<chart> : เป็น root element
<chart_data> : element ที่เก็บข้อมูลของตัวชาร์ท ซึ่งก็จะมีลูกๆ แยกย่อยออกเป็น row แถวๆ
<null/> <string> <number>: 3 ตัวนี้ให้ลองสังเกตุดูว่าเขาใช้ยังไง
<legend_label> : สำหรับปรับแต่ง
<axis_category> : สำหรับปรับแต่ง
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 3 ลองของ
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 3 ลองของ
ตอนที่แล้ว เราได้ทดสอบเรียกใช้งานชาร์ท โดยใช้ข้อมูล default บทนี้เราจะเริ่มการแสดงข้อมูลจริงๆ กันซะที สำหรับข้อมูลที่จะเอา
มาแสดงเป็นชาร์ทนั้น คุณจะต้องจัดหรือจินตนาการ ให้ออกมาในรูปของ ตาราง แบบนี้
| 2001 | 2002 | 2003 | 2004 | |
|---|---|---|---|---|
| Data Set 1 | 5 | 10 | 30 | 63 |
| Data Set 2 | 100 | 20 | 65 | 55 |
หลังจากนั้นให้เปิดไฟล์ sample.xml ที่เราได้ทำไว้ในบทก่อน ขึ้นมา แล้วแปลง ข้อมูลจากตารางไปเป็น xml อีลีเมนท์ ดังนี้
<chart>
<chart_data>
<row>
<null/>
<string>2001</string>
<string>2002</string>
<string>2003</string>
<string>2004</string>
</row>
<row>
<string>Data Set 1</string>
<number>5</number>
<number>10</number>
<number>30</number>
<number>63</number>
</row>
<row>
<string>Data Set 2</string>
<number>100</number>
<number>20</number>
<number>65</number>
<number>55</number>
</row>
</chart_data>
</chart>
เซฟแล้วก็ลองรันไฟล์ example.php ของเราดู ซึ่งจะต้องได้ผลลัพธ์ ดังนี้
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 2 ปูพื้น
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 2 ปูพื้น
หลังจากที่คุณดาวน์โหลด XML/SWF Charts มาแล้ว และทำการแตกซิปออก จะได้ไฟล์ดังนี้
|– Charts
|—- charts.swf
|—- charts_library
|—— .DS_Store
|—— arno.swf
|—— arst.swf
|—— brfl.swf
|—— brno.swf
|—— brst.swf
|—— cl3d.swf
|—— clfl.swf
|—— clno.swf
|—— clp3.swf
|—— cls3.swf
|—— clst.swf
|—— cnno.swf
|—— lnno.swf
|—— mxno.swf
|—— pi3d.swf
|—— pino.swf
|—— pono.swf
|—— scno.swf
อันที่จริงแล้ว สิ่งที่อยู่ในโฟลเดอร์ charts_library เราไม่ต้องสนใจเท่าไร มันจะเป็นไลบรารี่ ที่จะนำไปใช้กับไฟล์ charts.swf ซึ่ง
ตัว charts.swf เขาเรียกใช้ของเขาเอง เราไม่ต้องไปจัดการอะไร
เอาล่ะ เรามาเริ่มเรียกชาร์ทตัวนี้มาแสดงผล กันแบบปูพื้นกันก่อนดีกว่า
1. สร้างไฟล์ชื่อ sample.xml และพิมพ์คำสั่งนี้ลงไป ไฟล์ตัวนี้จะเป็นตัวเก็บข้อมูลที่จะแสดงและคอนฟิกต่างๆของชาร์ท
<chart> </chart>
2. สร้างไฟล์ชื่อ example.php และใส่โค้ดเรียกใช้ไฟล์แฟลชเข้าไป ดังนี้ ก้อปไปก็ได้นะ
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″
width=”400″
height=”250″
align=”"
id=”charts”>
<PARAM NAME=movie VALUE=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml“>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#666666>
<EMBED src=”utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml”
quality=high
bgcolor=#666666
width=”400″
height=”250″
name=”charts”
align=”"
swLiveConnect=”true”
type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer”>
</EMBED>
</OBJECT>
</body>
</html>
จริงๆแล้วโค้ดก็ไม่มีอะไรเลย เป็นการใส่ไฟล์แฟลชเข้าไปในเพจ แค่นั้นเอง
แต่จะมีพิเศษอยู่ก็ตรงที่ผมทำสีแดงไว้
utils/charts/charts.swf?library_path=utils/charts/charts_library&xml_source=sample.xml
จะแบ่งออกเป็น 3 ส่วน คือ
utils/charts/charts.swf : ระบุพาธไปยังไฟล์ charts.swf
library_path=utils/charts/charts_library : ตัวแปร library_path ให้ระบุไปยังโฟลเดอร์ charts_library
xml_source=sample.xml : ตัวแปร xml_source ให้ระบุไปยังไฟล์ sample.xml ที่เราสร้างไว้
ลองรันไฟล์ดูนะครับ ถ้าหากทุกอย่างถูกต้อง จะต้องแสดงกราฟออกมาดังนี้
ถ้าหากไม่แสดงอะไรออกมา ให้ดูการระบุพาธต่างๆ ให้ละเอียดอีกรอบ และอีกอย่างที่ขาดไม่ได้ก็คือ เครื่องของคุณต้องสามารถแสดง
ไฟล์แฟลชได้
เห็นมั้ยไม่มีไรยาก บทต่อไปจะแสดงการปรับแต่งและใช้งานชาร์ทนี้ให้ลึกอีกระดับ ซึ่งจะทำกับไฟล์ sample.xml ไฟล์เดียว เพราะทุก
สิ่งทุกอย่างอยู่ที่ไฟล์นี้
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 1 เกริ่นนำ
XML/SWF Charts การสร้าง flash กราฟ อันสวยงาม ภาค 1 เกริ่นนำ
สามารถดาวน์โหลดได้ฟรีที่ http://www.maani.us/xml_charts/index.php?menu=Download
XML/SWF Charts นั้นใช้ flash ไฟล์เป็นตัวแสดงผล ซึ่งเขาได้สร้างต้นแบบไว้แล้ว และใช้ xml เป็นตัวกำหนดข้อมูลและ configuration
อันที่จริงแล้ว เราสามารถใช้ไฟล์ php แทน xml ได้ แต่ข้อมูลในไฟล์ก็ต้องเป็นโครงสร้าง xml
XML/SWF Charts มีอยู่ 3 ไลเซ่น คือ
Free License : อนุญาติให้ดาวน์โหลดไปใช้กันได้ฟรีๆ แต่มีข้อจำกัดว่า
- เมื่อคลิกที่ชาร์ทจะลิ้งก์ไปยังเว็บไซต์เจ้าของ XML/SWF Charts คือเว็บ http://www.maani.us
- ไม่สามารถแสดงชาร์ทแบบซื้อกันสองอันใน แผ่นแสดงผลเดียว
- ไม่มี technical support, และไม่มีแจ้งการอัปเดตตัวผลิตภัณฑ์ทางอีเมล์
$45 – Single License : ใช้ได้กับ 1 ชื่อโดเมน จะได้รับสิทธิประโยชน์ ดังนี้
- ใช้ได้กับ 1 ชื่อโดเมน
- สามารถแก้ไขลิ้งก์บนตัวชาร์ท
- สามารถแสดงชาร์ทแบบซ้อนกันได้
- ได้รับการช่วยเหลือจากช่างเทคนิค
- ได้รับแจ้งการอัปเดตตัวโปรดัก
$550 – Bulk License : ใช้ได้ไม่จำกัด และสิทธิประโยชน์ที่จะได้รับ ดังนี้
- ใช้ได้ไม่จำกัด
- สามารถแก้ไขลิ้งก์บนตัวชาร์ท
- สามารถแสดงชาร์ทแบบซ้อนกันได้
- ได้รับการช่วยเหลือจากช่างเทคนิค
- ได้รับแจ้งการอัปเดตตัวโปรดัก
ตัว Free License ถึงจะมีข้อจำกัดดังที่กล่าวมา แต่การแสดงผลที่สวยงามของชาร์ทตัวนี้ ช่างยั่วเอนไซต์ในกระเพาะอาหาร
ถ้าเราไม่อยากให้ user คลิกบนตัวชาร์ท เราก็เขียนคอมเม้นไว้ใต้ชาร์ทซะว่า ***ไม่มีกิจธุระ ห้ามคลิก เท่านี้ก็จบข่าว
บทต่อไปผมจะแสดงวิธีการใช้งานชาร์ตตัวนี้ แบบปูพื้นฐาน