ด้วยสํานึกในพระมหากรุณาธิคุณสมเด็จพระนางเจ้าสิริกิติ์เป็นล้นพ้นอันหาที่สุดมิได้

การใส่ alert ใน Bar Charts จากตัวอย่าง Google Charts ต้องทำยังไงค่ะ

ถาม-ตอบ แนะนำไอเดีย โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา การใส่ alert ใน Bar Charts จากตัวอย่าง Google Charts ต้องทำยังไงค่ะ

ปัจจุบัน นักพัฒนาสามารถ ใช้ ChatGPT | Gemini | Claude | Perplexity | Deepseek ช่วยในการแก้ไขปัญหาต่างๆ ในการเขียนโปรแกรม หรือหาข้อมูลเพิ่มเติมได้ง่ายและสะดวก แนะนำให้ทุกคนใช้งานเพื่อพัฒนาศักยภาพของตัวเอง

การใส่ alert ใน Bar Charts จากตัวอย่าง Google Charts ต้องทำยังไงค่ะ

จากรูปนะคะ คือต้องการให้ alert ค่าของตัวเองต้องทำยังไงค่ะ คือกดที่แท่งสีแดง ก็ให้ alert อีกข้อความนึง กดสีน้ำเงินก็ให้ alert อีกข้อความนึง ต้องแก้ไข โค้ดส่วนนี้ยังไงค่ะ
switch (selection[0].row) {

case 0: alert("column1"); break;
case 1: alert("column2"); break;
case 2: alert("column3"); break;
case 3: alert("column4"); break;

}

<html>
  <head>
    <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', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);
var options = { 
		  title: "ผลการติดตามลูกค้า",
		hAxis: {title: 'Win Probability', titleTextStyle: {color: 'red'}},
        width: 1400,
        height: 500,
        bar: {groupWidth: "70%"},
        legend: { position: 'right', maxLines: 3 },
		tooltip: { trigger: 'selection' }};
		
		
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.setAction({
          id: 'sample',
          text: 'ผลการติดตาม',
          action: function() {
            selection = chart.getSelection();
			
            switch (selection[0].row) {
		

              case 0: alert("column1"); break;
              case 1: alert("column2"); break;
              case 2: alert("column3"); break;
              case 3: alert("column4"); break;
             
              
            }
          }
        });
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Bsaranya 11-11-2014 09:27:38

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 11

ดูโค้ดต่อไปนี้เป็นแนวทาง

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
</head>
<body>


<div id="chart_div" style="width: 900px; height: 500px;"></div>  

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>   
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>       
    <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() {
        // สร้างตัวแปร array เก็บค่า ไว้เรียกใช้งาน
        var dataArray=[
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]            
        ];
        var data = google.visualization.arrayToDataTable(dataArray);
          
        var options = { 
            title: "ผลการติดตามลูกค้า",
            hAxis: {title: 'Win Probability', titleTextStyle: {color: 'red'}},
            width: 850,
            height: 400,
            bar: {groupWidth: "70%"},
            legend: { position: 'right', maxLines: 3 },
            tooltip: { trigger: 'none' }
        };
		
		
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
          
        // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();  
            var key_row=selection[0].row+1;     // หา key array แถวของข้อมูล
            var data_row=dataArray[key_row];  // เก็บค่าข้อมูลของแถวที่ได้
            var key_col=selection[0].column;  // หา key array ของ คอลัมน์ข้อมูล
            var data_col=data_row[key_col];   // เก็บค่าข้อมูลของคอลัมน์ที่ได้
            $.fancybox({
                 closeBtn:false,
                  content:$.ajax({       
                      width:300,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                      data:'dataVal='+data_col,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                      async:false       
                  }).responseText    
            });

        });
          
      }
    </script>       
</body>
</html>

สังเกตเราจะสร้างตัวแปร แยกออกมาอีกที เป็น

        // สร้างตัวแปร array เก็บค่า ไว้เรียกใช้งาน
        var dataArray=[
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]            
        ];
        var data = google.visualization.arrayToDataTable(dataArray);

เพื่อจะได้เรียกใช้งานค่าข้อมูลได้ทีหลัง

มีการกำหนด option และไม่แสดง tooltip แต่จะแสดง เป็น fancybox แทน

tooltip: { trigger: 'none' }

จากโค้ดไม่มีการ setAction ลบออกไปได้

ส่วนการแสดง fancybox แสดงในส่วน

        // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();  
            var key_row=selection[0].row+1;     // หา key array แถวของข้อมูล
            var data_row=dataArray[key_row];  // เก็บค่าข้อมูลของแถวที่ได้
            var key_col=selection[0].column;  // หา key array ของ คอลัมน์ข้อมูล
            var data_col=data_row[key_col];   // เก็บค่าข้อมูลของคอลัมน์ที่ได้
            $.fancybox({
                 closeBtn:false,
                  content:$.ajax({       
                      width:300,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                      data:'dataVal='+data_col,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                      async:false       
                  }).responseText    
            });

เมื่อมีการคลิกเลือกที่ bar ใดๆ ก็จะทำการใช้งาน ajax ไปเรียกข้อมูลจากไฟล์ get_content.php
ไฟล์นี้เกำหนด การแสดงได้ตามต้องการ รวมทั้งเราสามารถส่งค่าข้อมูลไปยังไฟล์ เพื่อใช้งานได้

โค้ดไฟล์ get_content.php

<?php
header("Content-type:text/html; charset=UTF-8");          
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);    
// เชื่อมต่อกับฐานข้อมูล    
//$link=mysql_connect("localhost","root",""); // เชื่อมต่อ Server      
//mysql_select_db("test");  // ติดต่อฐานข้อมูล      
//mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล     
?>
<div style="width:300px;">
    ดูตัวแปร ที่ส่งค่ามา 
    <pre>
        <?php print_r($_GET); ?>
    </pre>
    <a href="#">Link 1</a>
</div>

สามารถนำไปประยุกต์เพิ่มเติมได้

ninenik 05-12-2014

ความคิดเห็นที่ 12

ไฟล์ get_content.php

<?php print_r($_GET); ?> 
จะโชว์ว่า 

  Array
(
    [dataVal] => 660
)

แล้วหนูต้อง select * from qt where price = 'xxxx' ยังไงคะ

bsaranya 06-12-2014 14:28

ความคิดเห็นที่ 13

ส่งตัวแปรอะไรมา ก็เอาค่านั้นมา รับเพื่อไปใช้งาน ตามโค้ดเป็นแค่ ดูค่าตัวแปรที่ส่งมา
ก็คือตัวแปร $_GET['dataVal'] ซื่อง เราส่งมามีค่าเท่ากับ 660 เวลาเอาไปใช้ในคำสั่ง sql ก็ประมาณว่า

select * from qt where price = '".$_GET['dataVal']."'

คำสั่ง print_r ตามตัวอย่างแค่ให้ดูค่าตัวแปรที่ส่งมา ว่าถูกต้องหรือไม่

ninenik 06-12-2014

ความคิดเห็นที่ 14

 ถ้าตาม ตย. ของพี่ ค่าจะออกมาตรงๆเลย คือ dataVal=1000 หากคลิกที่กราฟสีน้ำเงินในปี 2004

// สร้างตัวแปร array เก็บค่า ไว้เรียกใช้งาน
var dataArray=[
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
];
var data = google.visualization.arrayToDataTable(dataArray);

แต่ของหนู คือการแสดงผลรวม สมมติ สินค้า50% ฝ่ายขายมี4คน แต่ละคนขายไปเท่าไร

จากรูป
- ฝ่ายขาย1 ขายสินค้า50% ได้ 2อัน
- ฝ่ายขาย2 ขายสินค้า50% ได้ 3อัน
- ฝ่ายขาย3 ขายสินค้า50% ได้ 2อัน
- ฝ่ายขาย4 ขายสินค้า50% ได้ 2อัน

selection = chart.getSelection();
var key_row=selection[0].row+1; // หา key array แถวของข้อมูล
var data_row=dataArray[key_row]; // เก็บค่าข้อมูลของแถวที่ได้
var key_col=selection[0].column; // หา key array ของ คอลัมน์ข้อมูล
var data_col=data_row[key_col]; // เก็บค่าข้อมูลของคอลัมน์ที่ได้
$.fancybox({
closeBtn:false,
content:$.ajax({
width:300,
url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล
data:'dataVal='+data_col, // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
async:false
}).responseText
});

ถ้าทำตามโค้ด ตย. จะโชว์ค่า dataVal= ผลรวม (ในที่นี้ถ้าคลิกที่50% ของฝ่ายขายคนที่2 จะขึ้นว่า dataVal=3) แต่ที่ต้องการคือ $sid(รหัสฝ่ายขาย) กับ $probability (ค่าเปอร์เซ็น)
เพื่อที่จะไว้ส่งค่าในหน้า get_content.php

SELECT * FROM quotation where probability in('$_GET[...]') and sid='$_GET[...]'

โค้ดที่หนูลองทำ คือ

var text_alert = [
//////50%////////
	[ <? $sql = "SELECT * FROM sales where sposition !='Store' order by sid "; 
$query = mysql_query($sql) or die ("sql error [".$sql."]");
while($row = mysql_fetch_array($query)){
echo "'','";
$sql50="SELECT * FROM quotation, customer, sales WHERE customer.cid = quotation.cid AND quotation.`sid` = sales.sid AND quotation.`sid` = '$row[sid]' AND  `probability` =50"; 
$q50 = mysql_query($sql50) or die ("sql error [".$sql50."]"); 
while($row50 = mysql_fetch_array($q50)){ 
echo $row50['probability'];} /* dataVal จะปรากฏค่านี้  แต่ถ้าอยากได้2ค่า คือ $row50['sid'] กับ $row50['probability']ต้องทำยังไงค่ะ  */
echo "',";
}?>],
];
        // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();  
            var data_col=text_alert[ selection[0].row][selection[0].column];   // เก็บค่าข้อมูลของคอลัมน์ที่ได้
            $.fancybox({
                 closeBtn:false,
                  content:$.ajax({       
                      width:500,
                      url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล       
                      data:'dataVal='+data_col,  // ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล    
                      async:false       
                  }).responseText    
            });

        });

จะได้ตามรูป

** ถ้าอ่านแล้วงง ขอโทษด้วยนะคะ **

bsaranya 08-12-2014 15:53

ความคิดเห็นที่ 15

ขยายความอีกนิด

เมื่อคลิกที่กราฟแต่ละแท่ง
จะขึ้นรายละเอียดของรายการนั้นๆ
เช่น คลิกที่50% ของฝ่ายขายคนที่2 ที่ขึ้นเลข3ในกราฟ
จะต้องโชว์ออกมาว่า 3รายการนี้คือ มีรายละเอียดอะไรบ้าง พร้อม Link ไปรายการนั้นๆ

bsaranya 08-12-2014 15:58

ความคิดเห็นที่ 16

ขอโทษคะ ลืมอีกหนึ่งอย่าง คือ

ค่ารวมแต่ละแท่งมาจาก (อันนี้ยก ตย.มาแต่สินค้า 50% นะคะ) คือผลรวมแต่ละแท่งกราฟคะ

 // สร้างตัวแปร array เก็บค่า ไว้เรียกใช้งาน
        var dataArray=[
          ['Element', <? while($row = mysql_fetch_array($query)){echo "'".$row['sname']."',";}?> ],
        ['50%',<? $query50 = mysql_query($sql) or die ("sql error [".$sql."]");while($rows = mysql_fetch_array($query50)){$sql50="SELECT COUNT( probability ) AS NumT FROM  `quotation` , sales WHERE quotation.`sid` = sales.sid AND quotation.`sid` =  '$rows[sid]' AND  `probability` =50"; $q50 = mysql_query($sql50) or die ("sql error [".$sql50."]"); while($row50 = mysql_fetch_array($q50)){ echo $row50['NumT'].',';}}?>],
 ];
        var data = google.visualization.arrayToDataTable(dataArray);

bsaranya 08-12-2014 16:06

ความคิดเห็นที่ 17

ตรงตัวแปร data เราสามารถส่งค่าไปพร้อมกันหลายๆ ค่าได้

ให้ใช้เป็น

$.fancybox({  
     closeBtn:false,  
      content:$.ajax({         
          width:500,  
          url:'get_content.php',//ใช้ ajax ใน jQuery ดึงข้อมูล         
          data:{
            dataVal1:xxxx,   
            dataVal2:xxxx,   
            dataVal3:xxxx,   
            dataVal4:xxxx
          },
          async:false         
      }).responseText      
});

ส่วนการส่งค่าอื่นนอกจากคาทีเดิมมาแสดงในกราฟ ต้องประยุกต์ซับซ้อนขึ้น ซึ่งน่าจะยาก
และขึ้นกับข้อมูล

ninenik 08-12-2014

Prev 1 2

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน