12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394 |
- <html>
- <head>
- <title>Timeline demo</title>
- <style>
- 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() - 1 * 60 * 1000),
- new Date(),
- 'Dynamic event']]);
- // specify options
- options = {
- 'width': "100%",
- 'height': "auto",
- 'style': "box",
- 'showCustomTime': true
- };
- // Instantiate our timeline object.
- timeline = new links.Timeline(document.getElementById('mytimeline'));
-
- // Add event listeners
- google.visualization.events.addListener(timeline, 'timechange', onTimeChange);
-
- // Draw our timeline with the created data and options
- timeline.draw(data, options);
- // 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>
|