|
|
<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");
// Set callback to run when API is loaded google.setOnLoadCallback(drawVisualization);
var data; var options; var timeline;
function go() { var eventnum = parseInt(document.getElementById("eventnum").value); createEvents(eventnum); }
function createEvents(eventnum) { // clear the table data.removeRows(0, data.getNumberOfRows());
// insert new events var startDate = new Date(2010, 7, 1); var date = new Date(startDate); for (var i = 0; i < eventnum; i++) { data.addRow([new Date(date), null, "event" + i]); date.setDate(date.getDate() + 1); } var endDate = new Date(date);
timeline.setVisibleChartRange(startDate, endDate);
// load the new data in the timeline 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');
// specify options options = { 'width': '100%', 'height': '300px', 'editable': true, // make the events dragable 'style': 'box', 'intervalMax': 1000 * 60 * 60 * 24 * 90, 'start': new Date(2010, 7, 1), 'end': new Date(2010, 10, 1) };
// Instantiate our timeline object. timeline = new links.Timeline(document.getElementById('mytimeline'), options);
// Make a callback function for the select event var onselect = function () { var sel = timeline.getSelection(); if (sel.length) { if (sel[0].row != undefined) { var row = sel[0].row; document.getElementById("info").innerHTML += "event " + row + " selected<br>";
// Note: you can retrieve the contents of the selected row with // data.getValue(row, 2); } } };
// callback function for the change event var onchange = function () { var sel = timeline.getSelection(); if (sel.length) { if (sel[0].row != undefined) { var row = sel[0].row; document.getElementById("info").innerHTML += "event " + row + " changed<br>"; } } };
// Add event listeners google.visualization.events.addListener(timeline, 'select', onselect); google.visualization.events.addListener(timeline, 'change', onchange);
// Draw our timeline with the created data and options timeline.draw(data);
// load initial data go(); } </script></head>
<body><p> You can test the performance of the timeline visualization here. Note that stacking events is relatively heavy.</p>
<form onsubmit='go(); return false;'> number of events: <input type="input" id="eventnum" value="50" size="5"> <input type="submit" value="Go"></form>
<div id="mytimeline"></div><br>
<div id="info"></div></body></html>
|
