สร้างกราฟบด้วยวิธีง่ายๆโดยใช้ FusionCharts

FusionCharts (www.fusioncharts.com) เป็นเครื่องมือช่วยสร้างกราฟเพื่อแสดงผลบนเว็บเพจ กราฟที่ออกมาจะมีลักษณะเป็น Flash ที่สวยงามและมีลูกเล่น เราสามารถใส่ link หรือข้อความลักษณะ tooltip ให้แสดงผลเวลาผู้ใช้ลากเมาส์ไปชี้ได้
FusionCharts สามารถเรียกใช้ได้ด้วยเว็บสคริปหลายภาษา ไม่ว่าผู้ใช้จะพัฒนาเว็บแอพพลิเคชั่นด้วย ASP, PHP, JSP หรือ Javascript ก็ใช้บริการได้ ที่สำคัญคือเจ้า FusionCharts มันให้บริการฟรี !!
การใช้งาน FusionCharts ก็ง่ายมากครับ ผมจะแสดงตัวอย่างการเรียกใช้ด้วย PHP นะครับ
1. ขั้นแรกเลยไปดาวน์โหลด FusionCharts รุ่นใช้ฟรี ที่นี่
2. ในโฟลเดอร์ที่ดาวน์โหลดมาจะมีไฟล์ชื่อ Index.html หน้านี้มีประโยชน์มากครับ ลองกดเข้าไปจะมีตัวอย่างการใช้งานมากมาย
3. การติดตั้งง่ายมากครับ เราสร้างโฟลเดอร์หนึ่งในเว็บแอพพลิเคชั่นที่เราจะเรียกใช้ขึ้นมาก่อน ผมตั้งชื่อว่า fusioncharts
4. ทีนี้กลับไปโฟลเดอร์ที่เราดาวน์โหลดมา ก็อปปี้โฟลเดอร์ชื่อ Chart มาไว้ในโฟลเดอร์ fusioncharts ในขั้นตอนที่แล้ว ไฟล์ swf ในโฟลเดอร์นี้เองที่จะใช้ในการสร้างกราฟขึ้นมา แต่ละตัวก็จะสร้างในลักษณะต่างกันไป เช่น FCF_Bar2D.swf จะใช้สร้างแผนภูมิแท่งแนวนอน FCF_Pie3D.swf ใช้สร้างแผนภูมิวงกลมสามมิติ เป็นต้น
5. เราจะใช้ PHP ในการวาดกราฟ ดังนั้นให้ก็อปปี้ FusionCharts.php ในโฟลเดอร์ Code/PHP/Includes/ มาด้วยนะครับ
6. คราวนี้มาลองสร้างกราฟง่ายๆ กันดีกว่า ผมจะสร้างในลักษณะแผนภูมิแท่งแนวตั้งสามมิติที่เป็นชุดๆ ตามรูปนี้

โค้ด php เป็นแบบนี้ครับ
<?php
include_once("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("Charts/FCF_MSColumn3D.swf", "", $strXML, "child", 600, 300);
?>
อธิบาย
include_once("FusionCharts.php");
ไฟล์ FusionCharts.php เป็นไฟล์ที่เก็บ Function ให้เราเรียกใช้ในการสร้าง Chart เราจึงต้องแนบมาด้วย
$strXML เป็นตัวแปร String ที่เราใช้สร้าง FusionCharts ขึ้นมา FusionCharts จะสร้างโดยใช้ XML ในรูปแบบตรงกับที่เขากำหนดมา กราฟแต่ละอย่างจะมีการเรียกใช้ XML นี้ต่างกันแต่ก็จะคล้ายๆ กัน
แต่ละ Tag ของ XML เราสามารถใส่ Attribute เพื่อปรับแต่งค่าต่างๆ อย่างเช่น ใส่สี เปลี่ยนขนาดตัวอักษร เหมือนกับแท็กของ HTML นั่นแหละครับ
ลักษณะโครงสร้างของ XML ของกราฟแต่ละแบบ รวมถึง Option ต่างๆ พร้อมตัวอย่างการเรียกใช้ เราดูได้จาก http://docs.fusioncharts.com/free หรือไฟล์ Index.html ในขั้นตอนที่ 2 ก็ได้ครับ ในหัวข้อ Chart XML API
echo renderChartHTML("Charts/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 ได้  แต่นอกนั้นก็นับว่ามันทำงานกับภาษาไทยได้ดีครับ