รวมฮิต 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