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

การใส่ 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

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

ลองดูจากคู่มือ จะมีบอกคำสั่ง และวิธีใช้ ประยุกต์ได้เลย

https://developers.google.com/chart/interactive/docs/gallery/linechart#Methods

ส่วนของการใช้งาน event

https://developers.google.com/chart/interactive/docs/events#example

ตัวอย่าง

โค้ด

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</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="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: 850,
        height: 400,
        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: 'ผลการติดตาม'
        });
        chart.draw(data, options);
          
        // When the table is selected, update the orgchart.
        google.visualization.events.addListener(chart, 'select', 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;             
            }            
        });
          
      }
    </script>       
</body>
</html>

ninenik 11-11-2014

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

แล้วถ้าข้อมูลที่ต้องการโชว์ alert เป็นการดึงจากฐานข้อมูล

เช่น
ปี 2004
- แท่งสีน้ำเงิน จะให้ click แล้ว alert "บริษัท AAA"
- แท่งสีแดง จะให้ click แล้ว alert "บริษัท BBB"

ปี 2005
- แท่งสีน้ำเงิน จะให้ click แล้ว alert "บริษัท CCC"
- แท่งสีแดง จะให้ click แล้ว alert "บริษัท DDD"

ตัวอย่างรูปด้านล่าง หนูดึงมาจากฐานข้อมูล แต่ทำ alert ไม่เป็นค่ะ

bsaranya 11-11-2014 10:46

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

ถ้าใช้ข้อมูลจาก คแลัมน์ ก็ต้องเปลี่ยน จาก row เป็น column

ให้ดูในโค้ดส่วนนี้ ค่า

selection[0].column คือ คอลัมของข้อมูลหรือก็คือหัวข้อ ถ้าเทียบกับคำถาม ก็ใช้สำหรับ

อ้างอิงชื่อบริษัท ค่าจากซ้ายไปขวา คือ 1,2,3 ....

selection[0].row คือ แถวของข้อมูล ค่าจะเริ่มจาก 0,1,2,3 .....

        google.visualization.events.addListener(chart, 'select', function() {
            selection = chart.getSelection();
            switch (selection[0].column) {
              case 1: alert("บริษัท AAA"); break;
              case 2: alert("บริษัท BBB"); break;
              case 3: alert("บริษัท CCC"); break;
              case 4: alert("บริษัท DDD"); break;             
            }            
        });

ninenik 11-11-2014

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

ขอบคุณค่ะ

bsaranya 11-11-2014 14:22

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

ถ้า ต้องการเปลี่ยนจากการ alert เป็นกล่อง fancy box แทน ต้องทำยังไงค่ะ

chart.setAction({
          id: 'sample',
          text: 'ผลการติดตาม',
          action: function() {
            var text_alert = [
<? ///โค้ดphp ที่ต้องการโชว์ ?>],

];

selection = chart.getSelection();
alert( text_alert[ selection[0].row][selection[0].column]);
          }
        });

bsaranya 03-12-2014 16:06

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

ได้แล้วค่ะ

chart.setAction({
          id: 'sample',
          text: 'ผลการติดตาม',
          action: function() {
            var text_alert = [
<? ///โค้ดphp ที่ต้องการโชว์ ?>],

];

selection = chart.getSelection();
$.fancybox({
		href: "showActivity.php?id=" + event.id,
		'type' : 'iframe',
		'width' : '40%',
		'height' : '70%',
		'autoScale' : false,
		'transitionIn'	: 'none',
		'transitionOut'	: 'none'
		});
          }
        });

bsaranya 03-12-2014 16:35

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

ขอโทษคะ ขอถามอีกอย่าง คือ ถ้าใช้ fancybox โดยที่ไม่ต้องลิ้งค์ไปอีกหน้านึงได้หรือเปล่าคะ
โชว์แค่ข้อความ ตามรูป โชว์ข้อความ แต่เหมือน ขึ้นว่าหา page ไม่เจอ จะต้องทำยังไงค่ะ

$.fancybox( text_alert[ selection[0].row][selection[0].column],{
		
		'type' : 'iframe',
		'width' : '40%',
		'height' : '70%',
		'autoScale' : false,
		'transitionIn'	: 'none',
		'transitionOut'	: 'none'
		});

bsaranya 03-12-2014 17:26

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

ขอโทษอีกรอบค่ะ ลองใหม่ได้แล้ว
ลองอยู่หลายรอบไม่ได้
เอาข้างล่างออก ก็ใช้ได้เลยค่ะ ขอโทษจริงๆ ที่ถามหลายรอบนะคะ

'type' : 'iframe',
'width' : '40%',
'height' : '70%',
'autoScale' : false,

bsaranya 03-12-2014 17:31

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

รู้สึกคำถามหลังๆ ไม่ได้เข้ามาตอบ เห็นทำได้เองหมด

ninenik 03-12-2014

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

แต่ครั้งนี้คงต้องถามใหม่แล้วคะ
อยากจะให้โชว์ ข้อความที่ลิ้งค์ไปหน้าอื่นได้
ถ้าโชว์แค่ข้อมูลอย่างเดียว ไม่มีปัญหา

chart.setAction({
          id: 'sample',
          text: 'ผลการติดตาม',
          action: function() {
            var text_alert = [
[ <? while($row0 = mysql_fetch_array($q0)){ 
echo "<b>".$row50['cname']."</b>(".$row50['codeQT'].")".$row50['follow']."<br/>";} 
echo "',";
?>],

];

selection = chart.getSelection();

$.fancybox( text_alert[ selection[0].row][selection[0].column],{
		
		'transitionIn'	: 'none',
		'transitionOut'	: 'none'
		});    

          }
        });

แต่ถ้าใส่ลิ้งค์ เพิ่ม หน้าว่างเปล่า ไม่มีอะไรขึ้นเลยค่ะ

<? while($row0 = mysql_fetch_array($q0)){

echo "<b>".$row50['cname']."</b>(".$row50['codeQT'].")".$row50['follow']."<a href='viewQT.php?idx=$row50[codeQT]'>ดูรายละเอียด</a><br/>";}

echo "',";

bsaranya 04-12-2014 14:03

1 2 Next

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

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

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