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

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

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

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
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 1.47.145.xxx 05-12-2014

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

ไฟล์ get_content.php

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

  Array
(
    [dataVal] => 660
)

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

bsaranya 223.204.255.xxx 06-12-2014 14:28

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

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

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

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

ninenik 1.46.17.xxx 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 223.204.255.xxx 08-12-2014 15:53

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

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

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

bsaranya 223.204.255.xxx 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 223.204.255.xxx 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 171.96.123.xxx 08-12-2014

Prev 1 2

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

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

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