Нажмите событие в Google диаграммах

Я сделал что-то неправильно, и я не могу понять, что! Я пытаюсь сделать функцию, которая при нажатии открывается, чтобы открыть всплывающее окно или div, в котором я могу отобразить ту же самую информацию об этом конкретном продукте.Нажмите событие в Google диаграммах

Ссылка на сайт, где вы можете увидеть пример: http://trego.al/skai/schedule/

Вот мой код:

<html> 
<head> 
<title>Graphical Display - SKAI</title> 

<!-- for mobile devices like android and iphone --> 
<meta content="True" name="HandheldFriendly" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 

<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript" src="graph/timeline.js"></script> 
<link rel="stylesheet" type="text/css" href="graph/timeline.css"> 

<style type="text/css"> 
     /* Styles for the page */ 
    html, body { 
     font: 10pt arial; 
    } 

    #mytimeline { 
    } 

    #new { 
     position: absolute; 
     left: 25px; 
     top: 8px; 

     text-transform: uppercase; 
     color: white; 
     font-weight: bold; 
     font-size: 10px; 
     text-decoration: none; 
    } 

     /* Custom styles for the Timeline */ 
    div.timeline-frame { 
     border-color: #5D99C3; 

     border-radius: 5px; 
     -moz-border-radius: 5px; /* For Firefox 3.6 and older */ 
    } 
    div.timeline-axis { 
     border-color: #5D99C3; 
     background-color: #5D99C3; 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5D99C3', endColorstr='#3A6DA0'); /* for IE */ 
     background: -webkit-gradient(linear, left top, left bottom, from(#5D99C3), to(#3A6DA0)); /* for webkit browsers */ 
     background: -moz-linear-gradient(top, #5D99C3, #3A6DA0); /* for firefox 3.6+ */ 
    } 
    div.timeline-axis-grid { 
    } 
    div.timeline-groups-axis { 
     border-color: #5D99C3; 
    } 
    div.timeline-axis-text { 
     color: white; 
    } 
    div.timeline-groups-text { 
     color: #4D4D4D; 
    } 
    div.timeline-event { 
     color: #000; 
     max-height:50px; 
    } 
    div.timeline-event-content { 
    font-size:12px; 
    } 

</style> 

<script type="text/javascript"> 
    var timeline = undefined; 
    var data = undefined; 

     function getSelectedRow() { 
      var row = undefined; 
      var sel = timeline.getSelection(); 
      if (sel.length) { 
       if (sel[0].row != undefined) { 
        row = sel[0].row; 
       } 
      } 
      return row; 
     } 


    google.load("visualization", "1"); 

     google.setOnLoadCallback(drawVisualization); 
     function drawVisualization() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'group'); 
      data.addColumn('string', 'content'); 
      data.addColumn('datetime', 'start'); 
      data.addColumn('datetime', 'end'); 
      data.addRows([ 

<?php 
$host="******"; //replace with your hostname 
$username="******"; //replace with your username 
$password="******"; //replace with your password 
$db_name="******"; //replace with your database 
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB"); 

$sql = "SELECT ac,flt,start,end FROM schedule"; //replace emp_info with your table name 

$result = mysql_query($sql) or die(mysql_error()); 


while($row = mysql_fetch_array($result)){ 
echo "['". $row['ac']. "','". $row['flt']. "', new Date(". $row['start']. "), new Date(". $row['end']. ")], "; 
} 


?>    

      ]); 

     // specify options 
     var options = { 
      width: "100%", 
      height: "99%", 
      layout: "box", 
      axisOnTop: true, 
      eventMargin: 15,     // minimal margin between events 
      eventMarginAxis: 15,     // minimal margin between events and the axis 
      "min": new Date('2013-06-01'),  // lower limit of visible range 
      "max": new Date('2013-06-30'),  // upper limit of visible range 
      editable: false, 
      showNavigation: true, 
      OverlappingGridLines: true 
     }; 

     // Instantiate our timeline object. 
     timeline = new links.Timeline(document.getElementById('mytimeline')); 

     // Draw our timeline with the created data and options 
     timeline.draw(data, options); 

     // Set a customized visible range 
     var start = new Date(now.getTime() - 4 * 60 * 60 * 1000); 
     var end = new Date(now.getTime() + 8 * 60 * 60 * 1000); 
     timeline.setVisibleChartRange(start, end); 

function onselect() { 
    var sel = mytimeline.getSelection(); 
    if (sel.length) { 
    if (sel[0].row != undefined) { 
     var row = sel[0].row; 
     document.title = "event " + row + " selected"; 
    } 
    } 
} 

google.visualization.events.addListener(mytimeline, 'select', onselect); 
// Or, when not using the Google API: 
// links.events.addListener(mytimeline, 'select', onselect); 

    } 


</script> 

</head> 

<body onresize="timeline.redraw();" style="background:#F9F8F6"> 

<div id="mytimeline" style="background:#fff;min-width:900px;"></div> 

<div id="info"></div> 

</body> 
</html>

источник

2015-02-04 Mobile Solutions

Вы можете использовать JQuery, например, назвать Google принимал JQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js

затем попробуйте использовать эту функцию:

$(".timeline-event").on("click", function() { 

alert($(this).children('div').text()); 


});

Вышеуказанный код будет предупреждать имя продукта для щелкнутого элемента. Замените оповещение любыми действиями :)

источник

2015-02-04 09:49:40 Anas

все еще я столкнулся с некоторыми трудностями, я вставляю один и тот же код на странице, но все еще не работаю. я не очень хорошо разбираюсь в javascript, поэтому, если вы можете показать мне, где вставить скрипт или рабочий пример, будет отлично –

вы включили библиотеку jquery? если не добавить это в свой заголовок страницы – Anas

Нажмите событие в Google диаграммах

ответ

Смежные вопросы