FusionCharts (www.fusioncharts.com) เป็นเครื่องมือช่วยสร้างกราฟเพื่อแสดงผลบนเว็บเพจ กราฟที่ออกมาจะมีลักษณะเป็น Flash ที่สวยงามและมีลูกเล่น เราสามารถใส่ link หรือข้อความลักษณะ tooltip ให้แสดงผลเวลาผู้ใช้ลากเมาส์ไปชี้ได้
FusionCharts สามารถเรียกใช้ได้ด้วยเว็บสคริปหลายภาษา ไม่ว่าผู้ใช้จะพัฒนาเว็บแอพพลิเคชั่นด้วย ASP, PHP, JSP หรือ Javascript ก็ใช้บริการได้ ที่สำคัญคือเจ้า FusionCharts มันให้บริการฟรี !!
การใช้งาน FusionCharts ก็ง่ายมากครับ ผมจะแสดงตัวอย่างการเรียกใช้ด้วย PHP นะครับ
1. ขั้นแรกเลยไปดาวน์โหลด FusionCharts รุ่นใช้ฟรี ที่นี่
2. ในโฟลเดอร์ที่ดาวน์โหลดมาจะมีไฟล์ชื่อ Index.html หน้านี้มีประโยชน์มากครับ ลองกดเข้าไปจะมีตัวอย่างการใช้งานมากมาย
3. การติดตั้งง่ายมากครับ เราสร้างโฟลเดอร์หนึ่งในเว็บแอพพลิเคชั่นที่เราจะเรียกใช้ขึ้นมาก่อน ผมตั้งชื่อว่า FusionChart
4. ทีนี้กลับไปโฟลเดอร์ที่เราดาวน์โหลดมา ก็อปปี้ทุกอย่างในโฟลเดอร์ชื่อ Chart มาไว้ในโฟลเดอร์ FusionChart ในขั้นตอนที่แล้ว ไฟล์ swf นี้เองที่จะใช้ในการสร้างกราฟขึ้นมา แต่ละตัวก็จะสร้างในลักษณะต่างกันไป เช่น FCF_Bar2D.swf จะใช้สร้างแผนภูมิแท่งแนวนอน FCF_Pie3D.swf ใช้สร้างแผนภูมิวงกลมสามมิติ เป็นต้น
5. เราจะใช้ PHP ในการวาดกราฟ ดังนั้นให้ก็อปปี้ FusionCharts.php ในโฟลเดอร์ Code/PHP/Includes/ มาด้วยนะครับ
6. คราวนี้มาลองสร้างกราฟง่ายๆ กันดีกว่า ผมจะสร้างในลักษณะแผนภูมิแท่งแนวตั้งสามมิติที่เป็นชุดๆ ตามรูปนี้
โค้ด php เป็นแบบนี้ครับ
<?php
include("../FusionChart/FusionCharts.php");
$strXML = "<graph caption='สถิติเด็ก' xAxisName='ปี พ.ศ.' baseFontSize='12' decimalPrecision='0' numberSuffix=' คน'>";
$strXML.= "<categories>";
$strXML.= "<category name='2548' />";
$strXML.= "<category name='2549' />";
$strXML.= "<category name='2550' />";
$strXML.= "<category name='2551' />";
$strXML.= "</categories>";
$strXML.= "<dataset seriesname='เด็กผู้ชาย' color='0000FF'>";
$strXML.= "<set value='25' />";
$strXML.= "<set value='52' />";
$strXML.= "<set value='37' />";
$strXML.= "<set value='60' />";
$strXML.="</dataset>";
$strXML.= "<dataset seriesname='เด็กผู้หญิง' color='FFCCFF'>";
$strXML.= "<set value='20' />";
$strXML.= "<set value='48' />";
$strXML.= "<set value='30' />";
$strXML.= "<set value='62' />";
$strXML.="</dataset>";
$strXML.= "</graph>";
echo renderChartHTML("../FusionChart/FCF_MSColumn3D.swf", "", $strXML, "child", 600, 300);
?>
อธิบาย
include("../FusionChart/FusionCharts.php");
ไฟล์ FusionCharts.php เป็นไฟล์ที่เก็บ Function ให้เราเรียกใช้ในการสร้าง Chart เราจึงต้องแนบมาด้วย
$strXML เป็นตัวแปร String ที่เราใช้สร้าง FusionCharts ขึ้นมา FusionCharts จะสร้างโดยใช้ XML ในรูปแบบตรงกับที่เขากำหนดมา กราฟแต่ละอย่างจะมีการเรียกใช้ XML นี้ต่างกันแต่ก็จะคล้ายๆ กัน
แต่ละ Tag ของ XML เราสามารถใส่ Attribute เพื่อปรับแต่งค่าต่างๆ อย่างเช่น ใส่สี เปลี่ยนขนาดตัวอักษร เหมือนกับแท็กของ HTML นั่นแหละครับ
ลักษณะโครงสร้างของ XML ของกราฟแต่ละแบบ รวมถึง Option ต่างๆ พร้อมตัวอย่างการเรียกใช้ เราดูได้จาก http://www.fusioncharts.com/docs/ หรือไฟล์ Index.html ในขั้นตอนที่ 2 ก็ได้ครับ ในหัวข้อ Chart XML API
echo renderChartHTML("../FusionChart/FCF_MSColumn3D.swf", "", $strXML, "child", 600, 300);
ส่วนนี้เป็นฟังก์ชั่นที่สั่งให้ FusionCharts นำ XML ไปวาดกราฟออกมา
- พารามิเตอร์ตัวแรกจะเป็นไฟล์ swf ตัวที่ตรงกับประเภทกราฟที่เราจะวาด ในที่นี้คือ Multi-Series Column 3D
- ตัวที่สองเป็น URL ที่เราเก็บไฟล์ XML เอาไว้ ในที่นี้เราไม่ใช้ไฟล์ XML แต่เขียนลงไปใน PHP เลย จึงเว้นว่างไว้
- ตัวที่สามเป็น String ในรูปแบบของ XML ในที่นี้คือ $strXML
- ตัวที่สี่เป็น ID ของกราฟ กราฟในแต่ละหน้าห้ามมี ID ซ้ำกัน
- สองตัวสุดท้ายใช้ใส่ขนาดความกว้างและความสูงของกราฟเป็น pixel
เท่าที่ทดลองใช้ FusionCharts ทำงานได้ดี แต่มีปัญหาอยู่เล็กน้อยกรณีที่ใช้ภาษาไทย เราไม่สามารถใช้ภาษาไทยกับชื่อแกน Y ได้ (แย่จัง) แต่นอกนั้นก็นับว่ามันทำงานกับภาษาไทยได้ดีครับ
โอ้ แหล่มๆ
ทำกราฟได้สวยดีแฮะ
แต่ทำไมมีค่าเกิน1000 มันแสดงเป็น1k 2000เป็น2k ช่วยบอกวิธีหน่อยครับ
ถ้าไม่ต้องการให้มันแสดง 1000 เป็น 1k ให้ใส่ attribute formatNumberScale=’0′ เข้าไปในแท็ก graph ด้วยครับ
เรื่องอื่นๆ เกี่ยวกับตัวเลข อ่านเพิ่มเติมได้บน http://www.fusioncharts.com/free/docs/ หัวข้อ Advance Charting -> Basic Number Formatting นะครับ
จะกำหนดช่วงของแกน y ด้วยตนเอง เช่น 0 1 1.5 2 2.5 3 ทำอย่างไรค่ะ ใช้ attribute ตัวไหนค่ะ
ตอบคุณ nonoko
ผมไม่เคยลองแบ่งสเกลเองแต่คิดว่าน่าจะใช้ attribute ของแท็ก graph สามตัวนี้นะครับ
yaxismaxvalue -> ค่ามากสุดของแกน y
yaxisminvalue -> ค่าน้อยสุดของแกน y
numdivlines -> จำนวนเส้นแบ่งช่วงของแกน y
หากต้องการสร้างกราฟหลาย ๆ กราฟ ในหน้าเว็บเพจเดียว ต้องทำยังไงคะ เพราะลองแสดง 2 กราฟในหน้าเว็บเพจเดียว มันแสดงให้เห็นแค่กราฟเดียวค่ะ และมี Error ขึ้นว่า Cannot redeclare encodedataurl() (previously declared in C:\www\stat\FusionCharts.php:11) in C:\www\stat\FusionCharts.php on line 24
ช่วยตอบและอธิบายด้วยนะคะ ขอบคุณค่ะ
ใช้บน debian ได้รึเปล่าเอ่ย
ขอบคุณมากครับ ทำตามปุ๊บได้ปั๊บ
ตอบคุณ RoseApple
สร้างหลายๆ กราฟในหน้าเดียวได้ครับ ผมลองใช้ echo renderChartHTML หลายๆ ครั้งก็ไม่มีปัญหาอะไร แต่อย่าลืมว่าพารามิเตอร์ตัวที่สี่ต้องไม่ซ้ำกันนะครับ ถ้ายังแก้ไม่ได้ยังไงลองแนบโค้ดมานะครับ
ตอบคุณ oracle
ใช้ได้ครับ แต่ภาษาไทยอาจเป็นสี่เหลี่ยมหรือไม่มีวรรณยุกต์ flash บนลีนุกซ์มันยังรองรับภาษาไทยได้ไม่เต็มร้อยน่ะครับ
ผมขึ้นกราฟหลายๆ กราฟในหน้าเดียวมันเปงอย่างนี้คับ
Fatal error: Cannot redeclare encodedataurl() (previously declared in D:\AppServ\www\mis\project_database\FusionChart\FusionCharts.php:11) in D:\AppServ\www\mis\project_database\FusionChart\FusionCharts.php on line 24 ผมลองทำตามวิธีที่บอกมาคือเปลี่ยนพารามิเตอร์ที่เป็นไอดีไม่ให้เหมือนกันแล้ว แต่ก็ยังไม่ออกอยู่ดีคับ ผม include ไฟล์กราฟ 2 ไฟล์ มาแสดงในหน้าเดียวกันคับ ผมไม่รู้จะทำอย่างงัยแล้ว กรุณาช่วยแก้ปัญหาให้ผมหน่อยนะคับ จะเป็นพระคุณอย่างยิ่ง
ตอบคุณ pong182
มีกราฟหลายอันใช้ include(“../FusionChart/FusionCharts.php”); ครั้งเดียวพอครับ เอา include ออกตัวนึงก็น่าจะใช้ได้นะครับ
ขอบคุณคับ คุณ teera_12
พอดีทำ กราฟ DB DrillDown อยู่ค่ะ เป็นแบบ pie กับ colum ได้แล้วค่ะ
แต่อย่างเปลี่ยนเป็นกราฟอย่างอื่นบ้าง เช่น stack แต่ในตัวอย่างที่เค้าให้มา
เป็นการสร้าง stack จาก array ค่ะ เลยอยากรู้ว่า ถ้าจะสร้าง stack จาก
database ต้องทำประมาณไหนค่ะ อยากรู้มากเลยค่ะ ช่วยหน่อยนะค่ะ
ส่งเมลล์หรือแอดเอ็มมาก็ได้ค่ะ supa_4u@hotmail.com
ขอบคุณคับ กำลังหาข้อมูลอยู่คับ
ขอบคุณมากค่ะ ลองเอาไปทำแล้ว รันในเครื่องตัวเองได้ค่ะ
แต่พอเอาลง server มันไม่สามารถรัน กราฟ ได้อ่ะค่ะ
server เป็น windows server 2003 sp2
ภาษาที่ใช้เขียน เป็น asp ค่ะ เป็นกราฟ แบบรับค่าจากฟอร์มมาแล้ว
มาทำเป็นกราฟแท่ง มันไม่แสดงค่าในหน้าที่ต้องเป็นกราฟอ่ะค่ะ