Posts Tagged ‘chart’
รวมฮิต jQuery upload file plugin
สำหรับท่านที่กำลังมองหา AJAX + PHP เพื่อจัดการอัปโหลดไฟล์ หรืออัปโหลดภาพ ขึ้นเซิฟเวอร์ น่าจะโดนใจอย่างแรง
Google Chart API บริการสร้างชาร์ทจากเฮียกู
Google Chart API บริการสร้างชาร์ทจากเฮียกู
ไม่ต้องสนใจโค้ด ไม่ต้องเปลืองเนื้อที่เก็บโค้ด ไม่มีปัญหาเรื่องสร้างไฟล์ภาพไม่ได้ แค่คุณส่งข้อมูลมา เฮียกูจัดฮ่ายยยย….
jpGraph : ลำบากเรื่องคอนฟิก
swf-xml chart : เมื่อคลิกที่ชาร์ท จะลิ้งก์ไปเว็บผู้เป็นเจ้าของ ถ้าไม่อยากให้มีลิ้งก์ ก็ต้องเสียตังซื้อ
นี่คือปัญหาของ ตัวสร้างกราฟยอดนิยม
แต่ของกูเกิลไม่เป็นอย่างนั้น และใช้งานง่ายมาก ลองคลิกที่ลิ้งก์นี้ดู
http://chart.apis.google.com/chart?cht=p3&chd=t:10.0,20.0,50.0&chs=450×200&chl=Fug|Fang|Tangkhwa
แค่ส่งข้อมูลบางอย่างไปให้กูเกิล กูเกิลก็จะส่งชาร์ทกลับมาให้ ตามข้อมูลที่ระบุ
ทีนี้เรามาดูกันว่า URL ด้านบนประกอบไปด้วยอะไรบ้าง
http://chart.apis.google.com/chart? : ระบุว่าจะใช้ Google Chart API
parameters :
cht=p3
cht : chart type ระบุชนิดของชาร์ท p3 จะหมายถึง pie 3 d
chd=t:10.0,20.0,50.0
chd : chart data ข้อมูลตัวชาร์ท โดยค่าจะขึ้นต้นด้วย t: เป็นการระบุการเข้ารหัส แล้วหลังจากนั้นจะเป็นค่าแต่ละค่า คั่นด้วย , ตัวเลขต้องมีทศนิยม 1 ตำแหน่งเสมอ
chs=450×200
chs : chart sizs ระบุขนาดชาร์ทที่จะให้สร้าง โดยระบุเป็น กว้าง X สูง เท่าที่ทดสอบต้องให้ความกว้างมากกว่า สูง ไม่งั้นจะไม่แสดงป้ายกำกับ
chl=Fug|Fang|Tangkhwa
chl : chart label ระบุป้ายแสดงให้กับตัวชาร์ท โดยจะสัมพันธ์กับ chart data
ข้อจำกัด
- แสดงภาษาไทยไม่ได้
- ไม่มีการแสดงหน่วยเปอร์เซ็นต์บนชาร์ท
แต่คิดว่าไม่นานนี้ข้อจำกัดจะหมดไป ยังไงศึกษาไว้ก่อนก็ดี
ข้อมูลเพิ่มเติม
http://code.google.com/apis/chart/
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 ของเราดู ซึ่งจะต้องได้ผลลัพธ์ ดังนี้
