Wednesday, May 21, 2008

Fusionchart+PHP+MySQL แบบทีละ Step คับ

วิธีการแสดงกราฟ Fusionchart v.3 โดยดึงข้อมูลมาจากฐานข้อมูล MySQL โดยใช้ภาษา PHP ครับ

step1. เริ่มจากสร้างฐานข้อมูลที่ชื่อ fusion-test [Download] และสร้างตารางที่ชื่อ data1 และเพิ่มข้อมูลลงไปตามรูปครับ


step2. โหลดกราฟ [download] และ unzip ไว้ในเวป root โดยของผมจะเก็บไว้ที่นี่ C:\AppServ\www\FusionCharts_Evaluation\ จากนั้นก็ลองเรียกดูเลยครับตาม path นี้
http://localhost/FusionCharts_Evaluation/Code/PHP/DBExample/Default.php
ถ้ารันได้แบบนี้ก็โอเคแล้วครับ


หมายเหตุ กราฟที่ผมให้โหลดเป็นตัวที่ผมตัดบางส่วนออกเอาเฉพาะไฟล์ที่เกี่ยวข้องเท่านั้นและแก้ไขเรียบร้อยแล้วน่ะครับโดยใครอยากโหลดเอาไฟล์ทั้งหมดทุกภาษาสามารถโหลดได้ที่เวปนี้ www.fusioncharts.com

โดยกราฟที่ผมต้องการแสดงคือ แสดงจำนวนที่เหลือของสินค้าแต่ละประเภท
ไฟล์ที่ผมแก้ไขมีตามนี้ครับ
1.ไปที่ C:\AppServ\www\FusionCharts_Evaluation\Code\PHP\Includes แก้ไฟล์ DBConn.php ตามนี้
    $hostdb = 'localhost';   // MySQl host
    $userdb = 'root';    // MySQL username
    $passdb = 'Your-Password';    // MySQL password ถ้าไม่มีก็ใส่ ''
    $namedb = 'fusion-test'; // MySQL database name


2.ไปที่ C:\AppServ\www\FusionCharts_Evaluation\Code\PHP\DBExample แก้ไฟล์ Default.php ตามนี้
$strQuery = "select distinct(type) as type_name , 
             sum(amount) as count_amt 
             from data1 
             group by type_name";

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


และหากต้องการเปลี่ยนกราฟแท่งก็แค่แก้ตรงคำสั่ง เปลี่ยนจาก Pie3D.swf เป็น Column3D.swf ตามนี้
echo renderChart("../../FusionCharts/Column3D.swf",
                 "", $strXML, "FactorySum", 600, 300, false, false);



ที่ต้องแก้หลักๆก็มีแค่นี้ครับ คือ query คำสั่งใหม่ แล้วก็ set ค่า label เพื่อส่งค่า xml ให้ตรงกับ query ไปยังตัวกราฟ
เสร็จแล้วค๊าบ ง่ายป่าว อิอิ

4 comments:

mooyaiguru said...

วันนี้เจอเวปนึง http://php-ajax-code.blogspot.com/2007/08/cool-charts-graph-with-ajax-jquery.html it เขียนดีครับแต่ยังไม่ได้ดูรายละเอียดเลย

bluesky said...

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

wasittee kunchoom said...
This comment has been removed by the author.
tonsor be said...

สอบถามหน่อย ครับ เหมือน คอมเม้นข้างบน เราสามารถ สร้าง เป็น กราฟ เส้น ได้รึเปล่า ครับ ขอบคุณ ล่วงหน้า ครับ