You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.0 KiB
91 lines
3.0 KiB
<html>
|
|
<head>
|
|
<title>Timeline demo</title>
|
|
|
|
<style type="text/css">
|
|
body {font: 10pt arial;}
|
|
</style>
|
|
|
|
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
|
<script type="text/javascript" src="../timeline.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
|
|
|
<script type="text/javascript">
|
|
google.load("visualization", "1");
|
|
|
|
var data = undefined;
|
|
var timeline = undefined;
|
|
|
|
// Set callback to run when API is loaded
|
|
google.setOnLoadCallback(drawVisualization);
|
|
|
|
function onTimeChange(event) {
|
|
document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
|
|
|
|
// adjust the end date of the event in the data table
|
|
var start = data.getValue(0, 0);
|
|
if (event.time > start) {
|
|
data.setValue(0, 1, new Date(event.time));
|
|
var now = new Date();
|
|
if (event.time < now) {
|
|
data.setValue(0, 2, "Dynamic Event (past)");
|
|
}
|
|
else if (event.time > now) {
|
|
data.setValue(0, 2, "Dynamic Event (future)");
|
|
}
|
|
else {
|
|
data.setValue(0, 2, "Dynamic Event (now)");
|
|
}
|
|
timeline.redraw();
|
|
}
|
|
}
|
|
|
|
// Called when the Visualization API is loaded.
|
|
function drawVisualization() {
|
|
// Create and populate a data table.
|
|
data = new google.visualization.DataTable();
|
|
data.addColumn('datetime', 'start');
|
|
data.addColumn('datetime', 'end');
|
|
data.addColumn('string', 'content');
|
|
data.addRows([[
|
|
new Date((new Date()).getTime() - 60 * 1000),
|
|
new Date(),
|
|
'Dynamic event']]);
|
|
|
|
// specify options
|
|
var options = {
|
|
'showCustomTime': true
|
|
};
|
|
|
|
// Instantiate our timeline object.
|
|
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
|
|
|
// Add event listeners
|
|
google.visualization.events.addListener(timeline, 'timechange', onTimeChange);
|
|
|
|
// Draw our timeline with the created data and options
|
|
timeline.draw(data);
|
|
|
|
// set a custom range from -2 minute to +3 minutes current time
|
|
var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
|
|
var end = new Date((new Date()).getTime() + 3 * 60 * 1000);
|
|
timeline.setVisibleChartRange(start, end);
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<p style="width: 600px;">
|
|
When the custom time bar is shown, the user can drag this bar to a specific
|
|
time. The Timeline sends an event that the custom time is changed, after
|
|
which the contents of the timeline can be changed according to the specified
|
|
time in past or future.
|
|
</p>
|
|
|
|
<div id="customTime"> </div>
|
|
<p></p>
|
|
|
|
<div id="mytimeline"></div>
|
|
|
|
</body>
|
|
</html>
|