Question

这是我的代码：

<?php
$host="localhost"; //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());


?>

<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;
        height:25px
    }
    div.timeline-event-content {
    font-size:11px;
    }

</style>

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

    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

while($row = mysql_fetch_array($result)){
echo "['". $row['ac']. "','<span onclick=\"javascript:showDiv()\">". $row['flt']. "</span>',  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: 0,                 // minimal margin beteen events and the axis
            "min": new Date('2013-06-01'),        // lower limit of visible range
            "max": new Date('2013-06-01'),        // 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);
    }


</script>


<script>

    <script type="text/javascript">
        function showDiv() {
            div = document.getElementById('tow');
            div.style.display = "block";
        }
    </script>
</head>

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

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

<div id="tow" style="display:none;position:absolute;top:20%;left:30%;;width:200px;height:350px;background:#837E7C;padding:30px;color:#fff;">

<?php echo $row['ac']; ?>Here should the result be shown

</div>


</body>
</html>

我正在尝试在图表时间线中显示一些信息，例如（http://almende.github.io/chap-links-library/js/timeline/examples/example01_basis.html）

现在不是手动插入所有事件而是将其与MySQL连接，而且工作正常。

我无法做的是，当我点击一个事件时，我想在DIV中显示该事件的一些额外信息，在这种情况下是（div id =“tow”）

Answer 1

在showDiv（）

的JavaScript之前删除未使用的标记

如何将图表时间轴与mysql连接并在DIV中显示其他信息

1 个答案: