Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > ใช้จาวาสคริป วนลูปดึงข้อมูลจากฐานข้อมูลมาสร้าง "กราฟ" ได้รึป่าว ครับ



 

ใช้จาวาสคริป วนลูปดึงข้อมูลจากฐานข้อมูลมาสร้าง "กราฟ" ได้รึป่าว ครับ

 



Topic : 088567



โพสกระทู้ ( 389 )
บทความ ( 0 )



สถานะออฟไลน์




ผมต้องการดึงข้อมูล จากฐานข้อมูล รบกวนแนะนำหน่อย ครับ

Code (JavaScript)
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
        
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'square'],
          ['ASD',  5100],
          ['ARD',  50000], // ผมต้องการดึงข้อมูล จาก 2 ฟิว มาแทน ค่า 2 ค่านี้ โดย ฟิว order_generation แทน Year และ order_sizeแทน square
          ['CSD',  9500],
          ['CRD',  4335],
          ['RD',   11534],
          ['HRG',  6510],
          ['WSG',  7530],        
          ['LBG',  3540],  
          ['LSD',  9510],
          ['RAL',  12519],
          ['OBD',  6510],
          ['PFR',  9510],
          ['FAG',  9530],
          ['SAL',  11140],



        ]);

        var options = {            
          title: 'Model',
          vAxis: {title: "square metre"},
          width: data.getNumberOfRows() * 65,
          bar: {groupWidth: 35},
          tooltip: {textStyle: {color: '#3C6A9D'}, showColorCode: true},
          chartArea : {left:80,top:60,width:"80%", height: "60%"}
          
        };
              
            
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
 <style>


กราฟ
zz

ฐานข้อมูล ครับ
s
//---------------------------------------------
u



Tag : PHP, MySQL, HTML/CSS, Ajax, jQuery, JAVA









ประวัติการแก้ไข
2012-12-26 14:44:17
2012-12-26 14:46:56
2012-12-26 14:58:34
2012-12-26 15:25:31
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-12-26 14:39:49 By : TonsoR View : 4138 Reply : 3
 

 

No. 1



โพสกระทู้ ( 3,844 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์
Twitter Facebook

ทำได้ครับ แนวทางตามตัวอย่างข้างล่าง
ประยุกต์เองน่ะครับ (PHP)
<?php
//  สมมุติว่า ข้อมูลนี้ select มาจาก db น่ะครับ

$hdata = array("ASD", "ARD", "CSD", "CRD", "RD", "HRG", "WSG", "LBG", "LSD", "RAL", "OBD", "PFR","FAG","SAL");
$data=array(5100,50000,9500,4335,11534,6510,7530,3540,9510,12519,6510,9510,9530,11140)
?>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
        
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'square'],
          <?php
            for($i=0;$i<count($hdata);$i++){
              echo "['".$hdata[$i]."',".$data[$i]."],";
            }
          ?>
        ]);

        var options = {            
          title: 'Model',
          vAxis: {title: "square metre"},
          width: data.getNumberOfRows() * 65,
          bar: {groupWidth: 35},
          tooltip: {textStyle: {color: '#3C6A9D'}, showColorCode: true},
          chartArea : {left:80,top:60,width:"80%", height: "60%"}
          
        };
              
            
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
 <div class="chart_div " id="chart_div"></div>


ตัวอย่างผลลัพธ์จากโค้ทนี้
u






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-26 19:52:33 By : mangkunzo
 


 

No. 2



โพสกระทู้ ( 389 )
บทความ ( 0 )



สถานะออฟไลน์


ขอบคุณมากๆ ครับ ผมจะนำไปปรับ ใช้
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-12-28 10:37:23 By : TonsoR
 

 

No. 3



โพสกระทู้ ( 389 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : mangkunzo เมื่อวันที่ 2012-12-26 19:52:33
รายละเอียดของการตอบ ::
รบกวน ถามหน่อย ครับ กราฟนี้ run ใน googleChome ได้ แต่ run ใน IE ไม่ได้ อยากรู้เป็นเพราะอะไร ช่วยตอบที ครับ



ประวัติการแก้ไข
2013-01-29 10:14:50
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2013-01-29 10:11:11 By : TonsoR
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ใช้จาวาสคริป วนลูปดึงข้อมูลจากฐานข้อมูลมาสร้าง "กราฟ" ได้รึป่าว ครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่