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

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

การใส่ 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 บาท หรือ ระบุจำนวน