|
|
<html><head><title>Timeline mobile demo</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="../timeline.js"></script><link rel="stylesheet" type="text/css" href="../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: 40px; 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: white; border-radius: 5px; } div.timeline-event-content { padding: 5px; }
div.unavailable { background-color: #F03030; /* red */ border-color: #bd2828; /* red */ } div.available { background-color: #1AA11A; /* green */ border-color: #136e13; /* green */ } div.maybe { background-color: #FFA500; /* orange */ border-color: #cc8100; /* orange */ }</style>
<script type="text/javascript"> var timeline = undefined; var data = undefined;
google.load("visualization", "1");
// Set callback to run when API is loaded google.setOnLoadCallback(drawVisualization);
// 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.addColumn('string', 'group'); data.addColumn('string', 'className');
// create some random data var names = ["Algie", "Barney", "Chris"]; for (var n = 0, len = names.length; n < len; n++) { var name = names[n]; var now = new Date(); var end = new Date(now.getTime() - 12 * 60 * 60 * 1000); for (var i = 0; i < 5; i++) { var start = new Date(end.getTime() + Math.round(Math.random() * 5) * 60 * 60 * 1000); var end = new Date(start.getTime() + Math.round(4 + Math.random() * 5) * 60 * 60 * 1000);
var r = Math.round(Math.random() * 2); var availability = (r === 0 ? "Unavailable" : (r === 1 ? "Available" : "Maybe")); var group = availability.toLowerCase(); var content = availability; data.addRow([start, end, content, name, group]); } }
// specify options var options = { width: "100%", height: "99%", layout: "box", axisOnTop: true, eventMargin: 10, // minimal margin between events eventMarginAxis: 0, // minimal margin beteen events and the axis editable: true, showNavigation: true };
// Instantiate our timeline object. timeline = new links.Timeline(document.getElementById('mytimeline'), options);
// register event listeners google.visualization.events.addListener(timeline, 'edit', onEdit);
// Draw our timeline with the created data and options timeline.draw(data);
// 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 getRandomName() { var names = ["Algie", "Barney", "Grant", "Mick", "Langdon"];
var r = Math.round(Math.random() * (names.length - 1)); return names[r]; }
function getSelectedRow() { var row = undefined; var sel = timeline.getSelection(); if (sel.length) { if (sel[0].row != undefined) { row = sel[0].row; } } return row; }
function strip(html) { var tmp = document.createElement("DIV"); tmp.innerHTML = html; return tmp.textContent||tmp.innerText; }
// Make a callback function for the select event var onEdit = function (event) { var row = getSelectedRow(); var content = data.getValue(row, 2); var availability = strip(content); var newAvailability = prompt("Enter status\n\n" + "Choose from: Available, Unavailable, Maybe", availability); if (newAvailability != undefined) { var newContent = newAvailability; data.setValue(row, 2, newContent); data.setValue(row, 4, newAvailability.toLowerCase()); timeline.draw(data); } };
var onNew = function () { alert("Clicking this NEW button should open a popup window where " + "a new status event can be created.\n\n" + "Apperently this is not yet implemented..."); };
</script></head>
<body onresize="timeline.redraw();"><div id="mytimeline"></div>
<a id="new" title="Add new status event" href="javascript:void(0);" onclick="onNew();">+</a>
</body></html>
|
