การใส่ 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 223.204.255.xxx 11-11-2014 09:27:38

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

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


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


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

 ความคิดเห็นที่ 1
ลองดูจากคู่มือ จะมีบอกคำสั่ง และวิธีใช้ ประยุกต์ได้เลย
 
 
ส่วนของการใช้งาน event
 
 
ตัวอย่าง
 
 
โค้ด
 
<!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 115.87.101.xxx 11-11-2014
 ความคิดเห็นที่ 2
แล้วถ้าข้อมูลที่ต้องการโชว์ alert เป็นการดึงจากฐานข้อมูล

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

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


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


bsaranya 223.204.255.xxx 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 115.87.101.xxx 11-11-2014
 ความคิดเห็นที่ 4
ขอบคุณค่ะ


bsaranya 223.204.255.xxx 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 223.204.255.xxx 03-12-2014 16:06
1 2 3 4 Next






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ