การใช้งาน FusionCharts เบื้องต้น

ในตัวอย่างการใช้งาน FusionCharts เบื้องต้นนี้จะแสดงวิธีการใช้งาน FusionCharts ร่วมกับ PHP และ MySQL ซึ่งมีวิธีการดังต่อไปนี้

ขั้นตอนแรกให้สร้างฐานข้อมูลก่อนโดยในตัวอย่างนี้จะสร้างฐานข้อมูลชื่อ test-fusion และสร้างตารางชื่อ data เพื่อเก็บข้อมูลดังนี้

หรือสร้างฐานข้อมูลชื่อ test-fusion ขึ้นมาก่อน แล้วคัดลอกคำสั่ง sql ต่อไปนี้ไปวางใน MySQL ก็ได้

CREATE TABLE `data` (

  `id` int(11) NOT NULL auto_increment,

  `time` datetime NOT NULL,

  `month` varchar(255) NOT NULL,

  `value` int(11) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;

--

-- dump ตาราง `data`

--

INSERT INTO `data` VALUES (1, '2011-01-10 13:00:00', 'Jan', 11);

INSERT INTO `data` VALUES (2, '2011-01-15 14:00:00', 'Jan', 8);

INSERT INTO `data` VALUES (3, '2011-01-20 15:00:00', 'Jan', 9);

INSERT INTO `data` VALUES (4, '2011-02-01 11:00:00', 'Feb', 5);

INSERT INTO `data` VALUES (5, '2011-02-05 12:00:00', 'Feb', 15);

INSERT INTO `data` VALUES (6, '2011-02-10 13:00:00', 'Feb', 8);

INSERT INTO `data` VALUES (8, '2011-03-01 12:00:00', 'Mar', 6);

INSERT INTO `data` VALUES (7, '2011-02-15 14:00:00', 'Feb', 3);

INSERT INTO `data` VALUES (9, '2011-04-01 10:00:00', 'Jun', 4);

INSERT INTO `data` VALUES (10, '2011-04-10 13:00:00', 'Jun', 9);

จากนั้นให้ดาวน์โหลด FusionCharts ได้จาก http://www.fusioncharts.com เมื่อดาวน์โหลดมาเรียบร้อยแล้ว ให้แตกไฟล์ zip ออกมาจะได้โฟลเดอร์ FusionChartsSuiteEval  แล้วสร้างโฟลเดอร์ใหม่ชื่อ FusionCharts แล้วคัดลอกโฟลเดอร์ Code จาก  FusionChartsSuiteEval/ FusionCharts XT/Code  มาเก็บไว้ในโฟลเดอร์ FusionCharts จากนั้นลบไฟล์ที่ไม่จำเป็นในโฟลเดอร์ Code ทิ้งให้หมดเว้นไว้แต่โฟลเดอร์ FusionCharts กับโฟลเดอร์ PHP ดังภาพ

               ในโฟลเดอร์ PHP ลบไฟล์ที่ไม่จำเป็นในโฟลเดอร์ PHP ทิ้งให้หมดเว้นไว้แต่โฟลเดอร์ DBExample กับโฟลเดอร์ Includes ดังภาพ

จากนั้นเข้าไปยังโฟลเดอร์ Includes และเปิดไฟล์ DBConn แล้วกำหนดค่าที่ใช้ติดต่อกับฐานข้อมูล ซึ่งในตัวอย่างนี้กำหนดค่าดังนี้

    $hostdb = 'localhost';   // MySQl host

    $userdb = 'root';    // MySQL username

    $passdb = '1234';    // MySQL password

    $namedb =  $dbName ? $dbName : 'test-fusion'; // MySQL database name

จากนั้นเข้าไปยังโฟลเดอร์ DBExample แล้วแก้ไขไฟล์ Default โดยให้คอมเม้นท์คำสั่งคิวรี่อันแรกก่อนดังนี้
                 

                      //   $strQuery = "select * from data";

                      //  $result = mysql_query($strQuery) or die(mysql_error());

                       //Iterate through each factory

                     //   if ($result) {

                     //       while($ors = mysql_fetch_array($result)) {

               เมื่อคอมเม้นท์คำสั่งคิวรี่อันแรกเสร็จแล้วให้แก้ไขคำสั่งคิวรี่ที่อยู่ถัดไปด้านล่าง ดังนี้

            $strQuery = "select distinct(month) as month_name, sum(value) as value_data from data group by month_name";

$result2 = mysql_query($strQuery) or die(mysql_error());

                           

if ($result2) {

   while($ors2 = mysql_fetch_array($result2)) {                          

   $strXML .= "<set label='" . $ors2['month_name'] . "' value='" . $ors2['value_data'] ."'/>";

               }

}

   mysql_close($link);

เมื่อเปิดหน้าเว็บเพจจะได้ผลลัพธ์ดังภาพ

 

หากต้องการเปลี่ยนรูปแบบกราฟสามารถแก้ไขได้ที่

echo renderChart("../../FusionCharts/Pie3D.swf", "", $strXML, "FactorySum", 600, 300, false, false);

           การเปลี่ยนข้อความและหน่วยที่แสดงบนกราฟจาก Units เป็นหน่วยที่เราต้องการ สามารถแก้ไขได้ที่

    $strXML = "<chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix='Units' animation=' " . $animateChart . "'>";