สร้างกราฟบนเว็บเพจง่ายๆ ด้วย FusionCharts

9 May

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 ได้ (แย่จัง) แต่นอกนั้นก็นับว่ามันทำงานกับภาษาไทยได้ดีครับ

17 Responses to “สร้างกราฟบนเว็บเพจง่ายๆ ด้วย FusionCharts”

  1. อรุช May 9, 2009 at 5:32 pm #

    โอ้ แหล่มๆ

  2. พีเนียนตัวเขียว May 9, 2009 at 10:34 pm #

    ทำกราฟได้สวยดีแฮะ

  3. pangpang December 23, 2009 at 8:49 am #

    แต่ทำไมมีค่าเกิน1000 มันแสดงเป็น1k 2000เป็น2k ช่วยบอกวิธีหน่อยครับ

  4. teera_12 December 29, 2009 at 1:07 am #

    ถ้าไม่ต้องการให้มันแสดง 1000 เป็น 1k ให้ใส่ attribute formatNumberScale=’0′ เข้าไปในแท็ก graph ด้วยครับ

    เรื่องอื่นๆ เกี่ยวกับตัวเลข อ่านเพิ่มเติมได้บน http://www.fusioncharts.com/free/docs/ หัวข้อ Advance Charting -> Basic Number Formatting นะครับ

  5. nonoko January 7, 2010 at 11:20 am #

    จะกำหนดช่วงของแกน y ด้วยตนเอง เช่น 0 1 1.5 2 2.5 3 ทำอย่างไรค่ะ ใช้ attribute ตัวไหนค่ะ

  6. teera_12 January 12, 2010 at 1:35 pm #

    ตอบคุณ nonoko

    ผมไม่เคยลองแบ่งสเกลเองแต่คิดว่าน่าจะใช้ attribute ของแท็ก graph สามตัวนี้นะครับ
    yaxismaxvalue -> ค่ามากสุดของแกน y
    yaxisminvalue -> ค่าน้อยสุดของแกน y
    numdivlines -> จำนวนเส้นแบ่งช่วงของแกน y

  7. RoseApple January 27, 2010 at 7:03 pm #

    หากต้องการสร้างกราฟหลาย ๆ กราฟ ในหน้าเว็บเพจเดียว ต้องทำยังไงคะ เพราะลองแสดง 2 กราฟในหน้าเว็บเพจเดียว มันแสดงให้เห็นแค่กราฟเดียวค่ะ และมี Error ขึ้นว่า Cannot redeclare encodedataurl() (previously declared in C:\www\stat\FusionCharts.php:11) in C:\www\stat\FusionCharts.php on line 24

    ช่วยตอบและอธิบายด้วยนะคะ ขอบคุณค่ะ

  8. oracle February 3, 2010 at 3:12 pm #

    ใช้บน debian ได้รึเปล่าเอ่ย

  9. ch February 6, 2010 at 12:12 pm #

    ขอบคุณมากครับ ทำตามปุ๊บได้ปั๊บ

  10. teera_12 February 6, 2010 at 9:11 pm #

    ตอบคุณ RoseApple
    สร้างหลายๆ กราฟในหน้าเดียวได้ครับ ผมลองใช้ echo renderChartHTML หลายๆ ครั้งก็ไม่มีปัญหาอะไร แต่อย่าลืมว่าพารามิเตอร์ตัวที่สี่ต้องไม่ซ้ำกันนะครับ ถ้ายังแก้ไม่ได้ยังไงลองแนบโค้ดมานะครับ

    ตอบคุณ oracle
    ใช้ได้ครับ แต่ภาษาไทยอาจเป็นสี่เหลี่ยมหรือไม่มีวรรณยุกต์ flash บนลีนุกซ์มันยังรองรับภาษาไทยได้ไม่เต็มร้อยน่ะครับ

  11. pong182 March 28, 2010 at 5:27 am #

    ผมขึ้นกราฟหลายๆ กราฟในหน้าเดียวมันเปงอย่างนี้คับ
    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 ไฟล์ มาแสดงในหน้าเดียวกันคับ ผมไม่รู้จะทำอย่างงัยแล้ว กรุณาช่วยแก้ปัญหาให้ผมหน่อยนะคับ จะเป็นพระคุณอย่างยิ่ง

  12. teera_12 March 31, 2010 at 10:53 pm #

    ตอบคุณ pong182

    มีกราฟหลายอันใช้ include(“../FusionChart/FusionCharts.php”); ครั้งเดียวพอครับ เอา include ออกตัวนึงก็น่าจะใช้ได้นะครับ

  13. pong182 May 4, 2010 at 11:11 pm #

    ขอบคุณคับ คุณ teera_12

  14. emolover May 29, 2010 at 12:00 am #

    พอดีทำ กราฟ DB DrillDown อยู่ค่ะ เป็นแบบ pie กับ colum ได้แล้วค่ะ

    แต่อย่างเปลี่ยนเป็นกราฟอย่างอื่นบ้าง เช่น stack แต่ในตัวอย่างที่เค้าให้มา

    เป็นการสร้าง stack จาก array ค่ะ เลยอยากรู้ว่า ถ้าจะสร้าง stack จาก

    database ต้องทำประมาณไหนค่ะ อยากรู้มากเลยค่ะ ช่วยหน่อยนะค่ะ

    ส่งเมลล์หรือแอดเอ็มมาก็ได้ค่ะ supa_4u@hotmail.com

  15. function.in.th June 25, 2010 at 9:52 am #

    ขอบคุณคับ กำลังหาข้อมูลอยู่คับ

  16. Meaw September 6, 2010 at 5:12 pm #

    ขอบคุณมากค่ะ ลองเอาไปทำแล้ว รันในเครื่องตัวเองได้ค่ะ

    แต่พอเอาลง server มันไม่สามารถรัน กราฟ ได้อ่ะค่ะ

    server เป็น windows server 2003 sp2

    ภาษาที่ใช้เขียน เป็น asp ค่ะ เป็นกราฟ แบบรับค่าจากฟอร์มมาแล้ว
    มาทำเป็นกราฟแท่ง มันไม่แสดงค่าในหน้าที่ต้องเป็นกราฟอ่ะค่ะ

  17. teera_12 September 15, 2010 at 4:05 pm #

    ตอบคุณ emolover
    ขออภัยที่ตอบช้าครับ ปกติถ้าเขียนโค้ดเรียกข้อมูลจากดาต้าเบสมันจะคืนค่าเป็นอาเรย์ เราก็สร้าง stack จาก array ตามตัวอย่างได้เลยครับ ถ้ายังมีข้อสงสัยยังไงลองโพสถามอีกทีนะครับ

    ตอบคุณ Meaw
    บนเครื่องตัวเองใช้ภาษา asp เหมือนเครื่องเซอร์เวอร์ใช่ไหมครับ ตัวโค้ดเหมือนกันหรือเปล่า ขอข้อมูลเพิ่มเติมนิดนึงนะครับ

Leave a Reply