Javascript 点击谷歌图表上的事件_Javascript_Php_Jquery_Timeline_Timeline.js

Javascript 点击谷歌图表上的事件

javascript php jquery

Javascript 点击谷歌图表上的事件,javascript,php,jquery,timeline,timeline.js,Javascript,Php,Jquery,Timeline,Timeline.js,我做错了什么，我想不出是什么！我试图做一个功能，点击打开一个弹出窗口或一个div，我可以在其中显示相同的更多关于特定产品的信息点击链接到可以看到示例的站点：这是我的密码： <html> <head> <title>Graphical Display - SKAI</title>  <meta content="True"

我做错了什么，我想不出是什么！我试图做一个功能，点击打开一个弹出窗口或一个div，我可以在其中显示相同的更多关于特定产品的信息点击

链接到可以看到示例的站点：

这是我的密码：

<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>


图形显示-SKAI
/*页面的样式*/
html，正文{
字体：10pt arial；
}
#我的时间表{
}
#新的{
位置：绝对位置；
左：25px；
顶部：8px；
文本转换：大写；
颜色：白色；
字体大小：粗体；
字体大小：10px；
文字装饰：无；
}
/*时间轴的自定义样式*/
分区时间线-帧{
边框颜色：#5D99C3；
边界半径：5px；
-moz边框半径：5px；/*适用于Firefox 3.6及更高版本*/
}
纵轴{
边框颜色：#5D99C3；
背景色：#5D99C3；
过滤器：progid:DXImageTransform.Microsoft.gradient（用于IE的startColorstr='#5D99C3'，endColorstr='#3A6DA0'）；/**/
背景：-webkit渐变（线性、左上、左下、从（#5D99C3）到（#3A6DA0））；/*适用于webkit浏览器*/
背景：-moz线性渐变（顶部，#5D99C3，#3A6DA0）；/*适用于firefox 3.6+*/
}
div.timeline-axis-grid{
}
div.timeline-group-axis{
边框颜色：#5D99C3；
}
div.timeline-axis-text{
颜色：白色；
}
div.timeline-groups-text{
颜色：#4d；
}
分区时间线-事件{
颜色：#000；
最大高度：50px；
}
分区时间线-事件-内容{
字体大小：12px；
}
var时间线=未定义；
var数据=未定义；
函数getSelectedRow（）{
var行=未定义；
var sel=timeline.getSelection（）；
如果（选择长度）{
如果（选择[0]。行！=未定义）{
row=sel[0]。行；
}
}
返回行；
}
加载（“可视化”，“1”）；
setOnLoadCallback（drawVisualization）；
函数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([
]);
//指定选项
变量选项={
宽度：“100%”，
身高：“99%”，
布局：“盒子”，
axisOnTop：是的，
eventMargin:15，//事件之间的最小间距
eventMarginAxis:15，//事件和轴之间的最小间距
“min”：新日期（'2013-06-01'），//可见范围下限
“max”：新日期（'2013-06-30'），//可见范围上限
可编辑：false，
showNavigation：没错，
重叠网格线：true
};
//实例化我们的时间线对象。
timeline=newlinks.timeline（document.getElementById（'mytimeline'）；
//用创建的数据和选项绘制时间线
时间线。绘制（数据、选项）；
//设置自定义的可见范围
var start=新日期（now.getTime（）-4*60*60*1000）；
var end=新日期（now.getTime（）+8*60*60*1000）；
timeline.setVisibleChartRange（开始、结束）；
函数onselect（）{
var sel=mytimeline.getSelection（）；
如果（选择长度）{
如果（选择[0]。行！=未定义）{
var row=sel[0]。行；
document.title=“事件”+行+“选定”；
}
}
}
google.visualization.events.addListener（mytimeline，'select'，onselect）；
//或者，当不使用Google API时：
//links.events.addListener（mytimeline，'select'，onselect）；
}

您可以使用jquery，例如调用Google托管的jquery：

然后尝试使用此功能：

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

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


});

上面的代码将提醒已单击项目的产品名称。

用您需要的任何操作替换警报：）

我仍然面临一些困难，我在页面上粘贴了相同的代码，但仍然无法工作。我不擅长javascript，所以如果你能告诉我在哪里粘贴脚本或一个工作示例，我会很满意。你有没有包括jquery库？如果没有，请将其添加到页面标题中