mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[ADD] new timeline widget
This commit is contained in:
Laurent Mignon
committed by
Tom Blauwendraat
Tom Blauwendraat
parent
765c0c4670
commit
7f985f06fe
51
static/lib/timeline/examples/data.php
Normal file
51
static/lib/timeline/examples/data.php
Normal file
@@ -0,0 +1,51 @@
|
||||
<?php
|
||||
|
||||
// in the reply we must fill in the request id that came with the request
|
||||
$reqId = getReqId();
|
||||
|
||||
echo "
|
||||
google.visualization.Query.setResponse({
|
||||
version:'0.6',
|
||||
reqId:'$reqId',
|
||||
status:'ok',
|
||||
table:{
|
||||
cols:[{id:'start',
|
||||
label:'',
|
||||
type:'datetime'},
|
||||
{id:'end',
|
||||
label:'',
|
||||
type:'datetime'},
|
||||
{id:'content',
|
||||
label:'',
|
||||
type:'string'}
|
||||
],
|
||||
rows:[{c:[{v:new Date(2010, 7, 19)}, {v:null}, {v:'Conversation'}]},
|
||||
{c:[{v:new Date(2010, 7, 20)}, {v:null}, {v:'Official start'}]},
|
||||
{c:[{v:new Date(2010, 7, 23)}, {v:null}, {v:'Memo'}]},
|
||||
{c:[{v:new Date(2010, 8, 2, 12, 0, 0)}, {v:null}, {v:'Report'}]},
|
||||
{c:[{v:new Date(2010, 8, 6)}, {v:new Date(2010, 8, 12)}, {v:'Bla bla'}]}
|
||||
]
|
||||
}
|
||||
});
|
||||
";
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Retrieve the request id from the get/post data
|
||||
* @return {number} $reqId The request id, or 0 if not found
|
||||
*/
|
||||
function getReqId() {
|
||||
$reqId = 0;
|
||||
|
||||
foreach ($_REQUEST as $req) {
|
||||
if (substr($req, 0,6) == "reqId:") {
|
||||
$reqId = substr($req, 6);
|
||||
}
|
||||
}
|
||||
|
||||
return $reqId;
|
||||
}
|
||||
|
||||
|
||||
?>
|
||||
87
static/lib/timeline/examples/default.css
Normal file
87
static/lib/timeline/examples/default.css
Normal file
@@ -0,0 +1,87 @@
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body, td, th {
|
||||
font-family: arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
color: #4D4D4D;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
#container {
|
||||
margin: 0 auto;
|
||||
padding-bottom: 50px;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 180%;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
margin: 1em 0 1em 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #a0c0f0;
|
||||
color: #2B7CE9;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 140%;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: #2B7CE9;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:visited {
|
||||
color: #2E60A4;
|
||||
}
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none 0;
|
||||
border-top: 1px solid #abc;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
pre {
|
||||
display: block;
|
||||
font-size: 10pt;
|
||||
line-height: 1.5em;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
pre, code {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
table
|
||||
{
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
border: 1px solid lightgray;
|
||||
background-color: #E5E5E5;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
td {
|
||||
border: 1px solid lightgray;
|
||||
padding: 5px;
|
||||
vertical-align: top;
|
||||
}
|
||||
71
static/lib/timeline/examples/example01_basis.html
Normal file
71
static/lib/timeline/examples/example01_basis.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<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">
|
||||
var timeline;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
data.addRows([
|
||||
[new Date(2010,7,23), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , 'Memo<br>' +
|
||||
'<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , 'Phone call<br>' +
|
||||
'<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,4,12,0,0), , 'Report<br>' +
|
||||
'<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
"style": "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
205
static/lib/timeline/examples/example02_interactive.html
Normal file
205
static/lib/timeline/examples/example02_interactive.html
Normal file
@@ -0,0 +1,205 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: verdana, sans, arial;
|
||||
font-size: 10pt;
|
||||
}
|
||||
</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 timeline;
|
||||
var data;
|
||||
|
||||
function getSelectedRow() {
|
||||
var row = undefined;
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
row = sel[0].row;
|
||||
}
|
||||
}
|
||||
return row;
|
||||
}
|
||||
|
||||
// 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(2011,1,23), , '<div>Conversation</div><img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011,1,23,23,0,0), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011,1,24,16,0,0), , 'Report'],
|
||||
[new Date(2011,1,26), new Date(2011,2,2), 'Traject A'],
|
||||
[new Date(2011,1,27), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2011,1,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011,1,28), new Date(2011,2,3), 'Traject B'],
|
||||
[new Date(2011,2,4,12,0,0), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
//height: "auto",
|
||||
editable: true, // enable dragging and editing items
|
||||
//axisOnTop: true,
|
||||
style: "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Add event listeners
|
||||
google.visualization.events.addListener(timeline, 'select', onselect);
|
||||
google.visualization.events.addListener(timeline, 'change', onchange);
|
||||
google.visualization.events.addListener(timeline, 'add', onadd);
|
||||
google.visualization.events.addListener(timeline, 'edit', onedit);
|
||||
google.visualization.events.addListener(timeline, 'delete', ondelete);
|
||||
google.visualization.events.addListener(timeline, 'rangechange', onrangechange);
|
||||
google.visualization.events.addListener(timeline, 'rangechanged', onrangechanged);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
onrangechange();
|
||||
}
|
||||
|
||||
// Make a callback function for the select item
|
||||
var onselect = function (event) {
|
||||
var row = getSelectedRow();
|
||||
|
||||
if (row != undefined) {
|
||||
document.getElementById("info").innerHTML += "item " + row + " selected<br>";
|
||||
// Note: you can retrieve the contents of the selected row with
|
||||
// data.getValue(row, 2);
|
||||
}
|
||||
else {
|
||||
document.getElementById("info").innerHTML += "no item selected<br>";
|
||||
}
|
||||
};
|
||||
|
||||
// callback function for the change item
|
||||
var onchange = function () {
|
||||
var row = getSelectedRow();
|
||||
document.getElementById("info").innerHTML += "item " + row + " changed<br>";
|
||||
};
|
||||
|
||||
// callback function for the delete item
|
||||
var ondelete = function () {
|
||||
var row = getSelectedRow();
|
||||
document.getElementById("info").innerHTML += "item " + row + " deleted<br>";
|
||||
};
|
||||
|
||||
// callback function for the edit item
|
||||
var onedit = function () {
|
||||
var row = getSelectedRow();
|
||||
document.getElementById("info").innerHTML += "item " + row + " edit<br>";
|
||||
var content = data.getValue(row, 2);
|
||||
var newContent = prompt("Enter content", content);
|
||||
if (newContent != undefined) {
|
||||
data.setValue(row, 2, newContent);
|
||||
}
|
||||
timeline.redraw();
|
||||
};
|
||||
|
||||
// callback function for the add item
|
||||
var onadd = function () {
|
||||
var row = getSelectedRow();
|
||||
document.getElementById("info").innerHTML += "item " + row + " created<br>";
|
||||
var content = data.getValue(row, 2);
|
||||
var newContent = prompt("Enter content", content);
|
||||
if (newContent != undefined) {
|
||||
data.setValue(row, 2, newContent);
|
||||
timeline.redraw();
|
||||
}
|
||||
else {
|
||||
// cancel adding the item
|
||||
timeline.cancelAdd();
|
||||
}
|
||||
};
|
||||
|
||||
function onrangechange() {
|
||||
// adjust the values of startDate and endDate
|
||||
var range = timeline.getVisibleChartRange();
|
||||
document.getElementById('startDate').value = dateFormat(range.start);
|
||||
document.getElementById('endDate').value = dateFormat(range.end);
|
||||
}
|
||||
|
||||
function onrangechanged() {
|
||||
document.getElementById("info").innerHTML += "range changed<br>";
|
||||
}
|
||||
|
||||
// adjust start and end time.
|
||||
function setTime() {
|
||||
if (!timeline) return;
|
||||
|
||||
var newStartDate = new Date(document.getElementById('startDate').value);
|
||||
var newEndDate = new Date(document.getElementById('endDate').value);
|
||||
timeline.setVisibleChartRange(newStartDate, newEndDate);
|
||||
}
|
||||
|
||||
// set the visible range to the current time
|
||||
function setCurrentTime() {
|
||||
if (!timeline) return;
|
||||
|
||||
timeline.setVisibleChartRangeNow();
|
||||
onrangechange();
|
||||
}
|
||||
|
||||
// Format given date as "yyyy-mm-dd hh:ii:ss"
|
||||
// @param datetime A Date object.
|
||||
function dateFormat(date) {
|
||||
var datetime = date.getFullYear() + "-" +
|
||||
((date.getMonth() < 9) ? "0" : "") + (date.getMonth() + 1) + "-" +
|
||||
((date.getDate() < 10) ? "0" : "") + date.getDate() + " " +
|
||||
((date.getHours() < 10) ? "0" : "") + date.getHours() + ":" +
|
||||
((date.getMinutes() < 10) ? "0" : "") + date.getMinutes() + ":" +
|
||||
((date.getSeconds() < 10) ? "0" : "") + date.getSeconds();
|
||||
return datetime;
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>This page demonstrates the timeline visualization.</p>
|
||||
<ul>
|
||||
<li>Click and drag on the time axis to move the timeline, scroll to zoom the timeline</li>
|
||||
<li>Click and drag an item to change its date, double-click to change its text</li>
|
||||
<li>Click or drag on an empty spot in the timeline to create a new item</li>
|
||||
</ul>
|
||||
<p>
|
||||
Starttime: <input type="text" id="startDate" value="">
|
||||
Endtime: <input type="text" id="endDate" value="">
|
||||
<input type="button" id="setRange" value="Set" onclick="setTime();">
|
||||
<input type="button" id="setCurrentTime" value="Current time" onclick="setCurrentTime();">
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
125
static/lib/timeline/examples/example03_performance.html
Normal file
125
static/lib/timeline/examples/example03_performance.html
Normal file
@@ -0,0 +1,125 @@
|
||||
<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>
|
||||
80
static/lib/timeline/examples/example04_format_dot.html
Executable file
80
static/lib/timeline/examples/example04_format_dot.html
Executable file
@@ -0,0 +1,80 @@
|
||||
<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">
|
||||
var timeline;
|
||||
var data;
|
||||
var options;
|
||||
|
||||
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.addRows([
|
||||
[new Date(1939,8,1), , 'German Invasion of Poland'],
|
||||
[new Date(1940,4,10), , 'Battle of France and the Low Countries'],
|
||||
[new Date(1940,7,13), , 'Battle of Britain - RAF vs. Luftwaffe'],
|
||||
[new Date(1941,1,14), , 'German Afrika Korps arrives in North Africa'],
|
||||
[new Date(1941,5,22), , 'Third Reich Invades the USSR'],
|
||||
[new Date(1941,11,7), , 'Japanese Attack Pearl Harbor'],
|
||||
[new Date(1942,5,4), , 'Battle of Midway in the Pacific'],
|
||||
[new Date(1942,10,8), , 'Americans open Second Front in North Africa'],
|
||||
[new Date(1942,10,19), , 'Battle of Stalingrad in Russia'],
|
||||
[new Date(1943,6,5), , 'Battle of Kursk - Last German Offensive on Eastern Front'],
|
||||
[new Date(1943,6,10), , 'Anglo-American Landings in Sicily'],
|
||||
[new Date(1944,2,8), , 'Japanese Attack British India'],
|
||||
[new Date(1944,5,6), , 'D-Day - Allied Invasion of Normandy'],
|
||||
[new Date(1944,5,22), , 'Destruction of Army Group Center in Byelorussia'],
|
||||
[new Date(1944,7,1), , 'The Warsaw Uprising in Occupied Poland'],
|
||||
[new Date(1944,9,20), , 'American Liberation of the Philippines'],
|
||||
[new Date(1944,11,16), , 'Battle of the Bulge in the Ardennes'],
|
||||
[new Date(1944,1,19), , 'American Landings on Iwo Jima'],
|
||||
[new Date(1945,3,1), , 'US Invasion of Okinawa'],
|
||||
[new Date(1945,3,16), ,'Battle of Berlin - End of the Third Reich']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
options = {
|
||||
'width': '100%',
|
||||
'height': 'auto',
|
||||
'start': new Date(1942, 6, 1),
|
||||
'end': new Date(1946, 6, 1),
|
||||
'editable': false,
|
||||
'animate': false,
|
||||
'style': 'dot'
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>World War II timeline</h1>
|
||||
<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
|
||||
<div id="mytimeline" style="background-color: #FAFAFA;"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
174
static/lib/timeline/examples/example05_format_custom_html.html
Executable file
174
static/lib/timeline/examples/example05_format_custom_html.html
Executable file
@@ -0,0 +1,174 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<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">
|
||||
body {font: 11pt arial;}
|
||||
input {font: 11pt arial;}
|
||||
|
||||
div.myParagraph {
|
||||
width: 200px;
|
||||
white-space: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
// Called when the timelineualization 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');
|
||||
|
||||
function addRow(startDate, endDate, content, backgroundColor, borderColor)
|
||||
{
|
||||
// we make our own customized layout for the events
|
||||
|
||||
if (backgroundColor == undefined)
|
||||
backgroundColor = "yellow";
|
||||
if (borderColor == undefined)
|
||||
borderColor = "gold";
|
||||
|
||||
var fill = endDate ? "pink" : "yellow";
|
||||
var div = '<div style="background-color:' + backgroundColor +
|
||||
'; border:1px solid ' + borderColor + ';padding:5px;">' +
|
||||
content + '</div>';
|
||||
|
||||
data.addRows([
|
||||
[startDate, endDate, div]
|
||||
]);
|
||||
}
|
||||
|
||||
data.addRows([
|
||||
[
|
||||
new Date(2010, 7, 19),
|
||||
null,
|
||||
'Some html<br>containing an image<br>' +
|
||||
'<img src="img/notes-edit-icon.png">'
|
||||
],
|
||||
[
|
||||
new Date(2010, 7, 23),
|
||||
null,
|
||||
'<h3>Lorem ipsum</h3>' +
|
||||
'<div class="myParagraph">' +
|
||||
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget sem arcu. Pellentesque habitant morbi tristique senectus et netus et.' +
|
||||
'</div>'
|
||||
],
|
||||
[
|
||||
new Date(2010, 7, 22),
|
||||
new Date(2010, 7, 30),
|
||||
'This text contains some <span style="font-weight: bold;">bold</span> text,<br>' +
|
||||
'some <span style="font-style: italic;">italic</span> text,<br>' +
|
||||
'and some <span style="color: red;">red</span> text.'
|
||||
],
|
||||
[
|
||||
new Date(2010, 7, 29),
|
||||
null,
|
||||
'<div style="text-align:left;">There are a few limitations<br>' +
|
||||
'<ul>' +
|
||||
'<li>A box can have either non-wrapped text and a<br>flexible width, or a fixed width and wrapping text.</li>' +
|
||||
'<li>A range cannot automatically wrap text</li>' +
|
||||
'<li>The css styles <i>min-width</i> and <i>max-width</i><br>are not working well together with the timeline.</li>' +
|
||||
'</ul></div>'
|
||||
]
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "75%",
|
||||
height: "auto",
|
||||
start: new Date(2010, 7, 17),
|
||||
end: new Date(2010, 8, 2),
|
||||
style: "box" // optional. choose "dot" (default), "box", or "none"
|
||||
};
|
||||
|
||||
// Instantiate our table object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Attach event listeners
|
||||
google.visualization.events.addListener(timeline, 'select', onselect);
|
||||
google.visualization.events.addListener(timeline, 'rangechange', onrangechange);
|
||||
|
||||
// Draw our table with the data we created locally.
|
||||
timeline.draw(data);
|
||||
|
||||
// Set the scale by hand. Autoscaling will be disabled.
|
||||
// Note: you can achieve the same by specifying scale and step in the
|
||||
// options for the timeline.
|
||||
timeline.setScale(links.Timeline.StepDate.SCALE.DAY, 1);
|
||||
}
|
||||
|
||||
// adjust start and end time.
|
||||
function setTime() {
|
||||
if (!timeline) return;
|
||||
|
||||
var newStartDate = new Date(document.getElementById('startDate').value);
|
||||
var newEndDate = new Date(document.getElementById('endDate').value);
|
||||
timeline.setVisibleChartRange(newStartDate, newEndDate);
|
||||
timeline.redraw();
|
||||
}
|
||||
|
||||
function onrangechange() {
|
||||
// adjust the values of startDate and endDate
|
||||
var range = timeline.getVisibleChartRange();
|
||||
document.getElementById('startDate').value = dateFormat(range.start);
|
||||
document.getElementById('endDate').value = dateFormat(range.end);
|
||||
}
|
||||
|
||||
function onselect() {
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
alert("event " + row + " selected");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Format given date as "yyyy-mm-dd hh:ii:ss"
|
||||
// @param datetime A Date object.
|
||||
function dateFormat(date) {
|
||||
var datetime = date.getFullYear() + "-" +
|
||||
((date.getMonth() < 9) ? "0" : "") + (date.getMonth() + 1) + "-" +
|
||||
((date.getDate() < 10) ? "0" : "") + date.getDate() + " " +
|
||||
((date.getHours() < 10) ? "0" : "") + date.getHours() + ":" +
|
||||
((date.getMinutes() < 10) ? "0" : "") + date.getMinutes() + ":" +
|
||||
((date.getSeconds() < 10) ? "0" : "") + date.getSeconds();
|
||||
return datetime;
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onresize="if (timeline) {timeline.redraw();}">
|
||||
<p>This page demonstrates the timeline visualization.</p>
|
||||
<p>Click and drag to move the timeline, scroll to zoom the timeline.</p>
|
||||
<p>
|
||||
Starttime: <input type="text" id="startDate" value="2010-08-16">
|
||||
Endtime: <input type="text" id="endDate" value="2010-09-07">
|
||||
<input type="button" id="setStartDate" value="set" onclick="setTime();">
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
138
static/lib/timeline/examples/example06_format_custom_css.html
Normal file
138
static/lib/timeline/examples/example06_format_custom_css.html
Normal file
@@ -0,0 +1,138 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<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">
|
||||
body {font: 10pt arial;}
|
||||
|
||||
div.timeline-frame {
|
||||
border-color: purple;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
div.timeline-canvas {
|
||||
background-color: #FFF4F7;
|
||||
}
|
||||
|
||||
div.timeline-event {
|
||||
border-color: #F991A3;
|
||||
background-color: pink;
|
||||
}
|
||||
div.timeline-event-selected {
|
||||
border-color: orange;
|
||||
background-color: yellow;
|
||||
}
|
||||
div.timeline-event-box {
|
||||
font-size: 12pt;
|
||||
font-family: purisa, cursive;
|
||||
color: purple;
|
||||
border-width: 3px;
|
||||
}
|
||||
div.timeline-event-line {
|
||||
border-width: 3px;
|
||||
}
|
||||
div.timeline-event-dot {
|
||||
border-width: 8px;
|
||||
border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
}
|
||||
div.timeline-event-range {
|
||||
font-size: 12pt;
|
||||
font-family: purisa, cursive;
|
||||
color: purple;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
div.timeline-axis {
|
||||
border-color: purple;
|
||||
border-width: 2px;
|
||||
}
|
||||
div.timeline-axis-grid {
|
||||
border-width: 2px;
|
||||
}
|
||||
div.timeline-axis-grid-minor {
|
||||
border-color: #FFD7DD;
|
||||
}
|
||||
div.timeline-axis-grid-major {
|
||||
border-color: pink;
|
||||
}
|
||||
|
||||
div.timeline-axis-text {
|
||||
font-family: purisa, cursive;
|
||||
font-size: 15px;
|
||||
color: purple;
|
||||
}
|
||||
div.timeline-axis-text-minor {
|
||||
padding-top: 15px;
|
||||
}
|
||||
div.timeline-axis-text-major {
|
||||
font-weight: bold;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
var timeline;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create and populate a data table.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
data.addRows([
|
||||
[new Date(2010,7,23), , '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,4,12,00,00), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "400px",
|
||||
editable: true, // make the events draggable
|
||||
eventMargin: 15,
|
||||
showButtonNew: false,
|
||||
style: "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>This page demonstrates the timeline visualization with custom css.</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
166
static/lib/timeline/examples/example07_confirm_changes.html
Normal file
166
static/lib/timeline/examples/example07_confirm_changes.html
Normal file
@@ -0,0 +1,166 @@
|
||||
<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">
|
||||
var timeline = undefined;
|
||||
var data = undefined;
|
||||
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
function getSelectedRow() {
|
||||
var row = undefined;
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
row = sel[0].row;
|
||||
}
|
||||
}
|
||||
return row;
|
||||
}
|
||||
|
||||
// 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(2010,07,23), , '<div>Conversation</div><img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,07,23,23,00,00), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,07,24,16,00,00), , 'Report'],
|
||||
[new Date(2010,07,26), new Date(2010,08,02), 'Traject A'],
|
||||
[new Date(2010,07,28), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,07,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,07,31), new Date(2010,08,03), 'Traject B'],
|
||||
[new Date(2010,08,04,12,00,00), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
editable: true // make the events dragable
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Make a callback function for the select event
|
||||
var onselect = function (event) {
|
||||
var row = getSelectedRow();
|
||||
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 onchanged = function (event) {
|
||||
// retrieve the changed row
|
||||
var row = getSelectedRow();
|
||||
|
||||
if (row != undefined) {
|
||||
// request approval from the user.
|
||||
// You can choose your own approval mechanism here, for example
|
||||
// send data to a server which responds with approved/denied
|
||||
var approve = confirm("Are you sure you want to move the event?");
|
||||
|
||||
if (approve) {
|
||||
document.getElementById("info").innerHTML += "event " + row + " changed<br>";
|
||||
} else {
|
||||
// new date NOT approved. cancel the change
|
||||
timeline.cancelChange();
|
||||
|
||||
document.getElementById("info").innerHTML += "change of event " + row + " cancelled<br>";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// callback function for the delete event
|
||||
var ondelete = function (event) {
|
||||
// retrieve the row to be deleted
|
||||
var row = getSelectedRow();
|
||||
|
||||
if (row != undefined) {
|
||||
// request approval from the user.
|
||||
// You can choose your own approval mechanism here, for example
|
||||
// send data to a server which responds with approved/denied
|
||||
var approve = confirm("Are you sure you want to delete the event?");
|
||||
|
||||
if (approve) {
|
||||
document.getElementById("info").innerHTML += "event " + row + " deleted<br>";
|
||||
} else {
|
||||
// new date NOT approved. cancel the change
|
||||
timeline.cancelDelete();
|
||||
|
||||
document.getElementById("info").innerHTML += "deleting event " + row + " cancelled<br>";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// callback function for adding an event
|
||||
var onadd = function (event) {
|
||||
// retrieve the row to be deleted
|
||||
var row = getSelectedRow();
|
||||
|
||||
if (row != undefined) {
|
||||
// request approval from the user.
|
||||
// You can choose your own approval mechanism here, for example
|
||||
// send data to a server which responds with approved/denied
|
||||
var title = prompt("Enter a title for the new event", "New event");
|
||||
|
||||
if (title != undefined) {
|
||||
data.setValue(row, 2, title);
|
||||
document.getElementById("info").innerHTML += "event " + row + " created<br>";
|
||||
timeline.redraw();
|
||||
} else {
|
||||
// cancel adding a new event
|
||||
timeline.cancelAdd();
|
||||
|
||||
document.getElementById("info").innerHTML += "creating event " + row + " cancelled<br>";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Add event listeners
|
||||
google.visualization.events.addListener(timeline, 'select', onselect);
|
||||
google.visualization.events.addListener(timeline, 'changed', onchanged);
|
||||
google.visualization.events.addListener(timeline, 'delete', ondelete);
|
||||
google.visualization.events.addListener(timeline, 'add', onadd);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>This page demonstrates the timeline visualization.</p>
|
||||
<p>Click and drag to move the timeline, scroll to zoom the timeline.
|
||||
Click and drag events to change there date.
|
||||
You will be asked for confirmation before changes are actually applied.</p>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
99
static/lib/timeline/examples/example08_calendar.html
Normal file
99
static/lib/timeline/examples/example08_calendar.html
Normal file
@@ -0,0 +1,99 @@
|
||||
<!--
|
||||
http://code.google.com/apis/gdata/samples/cal_sample.html
|
||||
-->
|
||||
|
||||
<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">
|
||||
var cal;
|
||||
|
||||
// load the google calendar feed
|
||||
function insertAgenda(calendar) {
|
||||
cal = calendar;
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json-in-script&callback=insertAgenda&orderby=starttime&max-results=20&singleevents=true&sortorder=ascending&futureevents=true"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
/**
|
||||
* Parse a date like "2010-10-07T17:00:00.000-07:00" or "2010-10-07"
|
||||
* @param {string} googledate
|
||||
* @return {Date}
|
||||
*/
|
||||
function parseGoogleDate(googledate) {
|
||||
var year = parseInt(googledate.substr(0,4), 10);
|
||||
var month = parseInt(googledate.substr(5,2), 10) - 1;
|
||||
var date = parseInt(googledate.substr(8,2), 10);
|
||||
var dateObj;
|
||||
|
||||
if (googledate.length <= 10) {
|
||||
dateObj = new Date(year, month, date);
|
||||
} else {
|
||||
var hour = parseInt(googledate.substr(11,2), 10) - parseInt(googledate.substr(25,2), 10);
|
||||
var minute = parseInt(googledate.substr(14,2), 10) - parseInt(googledate.substr(28,2), 10);
|
||||
var second = parseInt(googledate.substr(17,2), 10);
|
||||
|
||||
dateObj = new Date(year, month, date, hour, minute, second);
|
||||
dateObj.setMinutes(dateObj.getMinutes() - dateObj.getTimezoneOffset());
|
||||
}
|
||||
return dateObj;
|
||||
}
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create and populate a data table.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
for (i = 0; i < cal.feed.entry.length; i++) {
|
||||
var start = parseGoogleDate(cal.feed.entry[i].gd$when[0].startTime);
|
||||
var end = parseGoogleDate(cal.feed.entry[i].gd$when[0].endTime);
|
||||
var title = cal.feed.entry[i].title.$t;
|
||||
var content = cal.feed.entry[i].content.$t;
|
||||
var href = cal.feed.entry[i].link[0].href;
|
||||
|
||||
var eventcontent = "<a href='" + href + "'>" + title + "</a>";
|
||||
data.addRow([start, undefined, eventcontent]);
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': "100%",
|
||||
'height': "auto",
|
||||
'style': "dot"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Google upcoming events</h1>
|
||||
<div id="mytimeline"></div>
|
||||
</body>
|
||||
</html>
|
||||
196
static/lib/timeline/examples/example09_editable.html
Normal file
196
static/lib/timeline/examples/example09_editable.html
Normal file
@@ -0,0 +1,196 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {font: 10pt arial;}
|
||||
#mytimeline {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</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">
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
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.addRows([
|
||||
[new Date(2010,7,23), , '<div>Conversation</div><img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,4,12,0,0), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': "100%",
|
||||
'height': "300px",
|
||||
'editable': true, // make the events dragable
|
||||
'layout': "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Make a callback function for the select event
|
||||
var onselect = function (event) {
|
||||
var row = undefined;
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
}
|
||||
}
|
||||
|
||||
if (row != undefined) {
|
||||
var content = data.getValue(row, 2);
|
||||
document.getElementById("txtContent").value = content;
|
||||
document.getElementById("info").innerHTML += "event " + row + " selected<br>";
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// 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>";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// callback function for the delete event
|
||||
var ondelete = function () {
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
document.getElementById("info").innerHTML += "event " + row + " deleted<br>";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// callback function for the add event
|
||||
var onadd = function () {
|
||||
var count = data.getNumberOfRows();
|
||||
document.getElementById("info").innerHTML += "event " + (count-1) + " added<br>";
|
||||
};
|
||||
|
||||
// Add event listeners
|
||||
google.visualization.events.addListener(timeline, 'select', onselect);
|
||||
google.visualization.events.addListener(timeline, 'change', onchange);
|
||||
google.visualization.events.addListener(timeline, 'delete', ondelete);
|
||||
google.visualization.events.addListener(timeline, 'add', onadd);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add a new event
|
||||
*/
|
||||
function add() {
|
||||
var range = timeline.getVisibleChartRange();
|
||||
var start = new Date((range.start.valueOf() + range.end.valueOf()) / 2);
|
||||
var content = document.getElementById("txtContent").value;
|
||||
|
||||
timeline.addItem({
|
||||
'start': start,
|
||||
'content': content
|
||||
});
|
||||
|
||||
var count = data.getNumberOfRows();
|
||||
timeline.setSelection([{
|
||||
'row': count-1
|
||||
}]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Change the content of the currently selected event
|
||||
*/
|
||||
function change() {
|
||||
// retrieve the selected row
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
}
|
||||
}
|
||||
|
||||
if (row != undefined) {
|
||||
var content = document.getElementById("txtContent").value;
|
||||
timeline.changeItem(row, {
|
||||
'content': content
|
||||
// Note: start, end, and group can be added here too.
|
||||
});
|
||||
} else {
|
||||
alert("First select an event, then press remove again");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete the currently selected event
|
||||
*/
|
||||
function doDelete() {
|
||||
// retrieve the selected row
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
}
|
||||
}
|
||||
|
||||
if (row != undefined) {
|
||||
timeline.deleteItem(row);
|
||||
} else {
|
||||
alert("First select an event, then press remove again");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>This page demonstrates the timeline visualization.</p>
|
||||
<p>Click and drag to move the timeline, scroll to zoom the timeline. Click and drag events to change there date.</p>
|
||||
|
||||
<p>
|
||||
<input type="text" value="New text" id="txtContent">
|
||||
<input type="button" value="Add" title="Add new event" onclick="add();">
|
||||
<input type="button" value="Change" title="Change content of selected event" onclick="change();">
|
||||
<input type="button" value="Delete" title="Delete selected event" onclick="doDelete();">
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
<div id="info"></div>
|
||||
</body>
|
||||
</html>
|
||||
120
static/lib/timeline/examples/example10_link_two_timelines.html
Normal file
120
static/lib/timeline/examples/example10_link_two_timelines.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<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 vis1;
|
||||
var vis2;
|
||||
|
||||
function createTimeline1() {
|
||||
// Create and populate a data table.
|
||||
var data1 = new google.visualization.DataTable();
|
||||
data1.addColumn('datetime', 'start');
|
||||
data1.addColumn('datetime', 'end');
|
||||
data1.addColumn('string', 'content');
|
||||
|
||||
data1.addRows([
|
||||
[new Date(2010,7,23), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , 'Memo<br>' +
|
||||
'<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , 'Phone call<br>' +
|
||||
'<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,1,12,0,0), , 'Report<br>' +
|
||||
'<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
options1 = {width: "100%",
|
||||
height: "300px",
|
||||
layout: "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
vis1 = new links.Timeline(document.getElementById('timeline1'), options1);
|
||||
|
||||
google.visualization.events.addListener(vis1, 'rangechange', onrangechange1);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
vis1.draw(data1);
|
||||
}
|
||||
|
||||
function createTimeline2() {
|
||||
// Create and populate a data table.
|
||||
var data2 = new google.visualization.DataTable();
|
||||
data2.addColumn('datetime', 'start');
|
||||
data2.addColumn('datetime', 'end');
|
||||
data2.addColumn('string', 'content');
|
||||
|
||||
data2.addRows([
|
||||
[new Date(2010,7,23), new Date(2010,7,30), 'Traject C'],
|
||||
[new Date(2010,7,27), new Date(2010,7,31), 'Traject D']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options2 = {
|
||||
width: "100%",
|
||||
height: "300px"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
vis2 = new links.Timeline(document.getElementById('timeline2'), options2);
|
||||
|
||||
google.visualization.events.addListener(vis2, 'rangechange', onrangechange2);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
vis2.draw(data2);
|
||||
|
||||
onrangechange1(); // to set the range equal initially
|
||||
}
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
createTimeline1();
|
||||
createTimeline2();
|
||||
}
|
||||
|
||||
function onrangechange1() {
|
||||
var range = vis1.getVisibleChartRange();
|
||||
vis2.setVisibleChartRange(range.start, range.end);
|
||||
}
|
||||
|
||||
function onrangechange2() {
|
||||
var range = vis2.getVisibleChartRange();
|
||||
vis1.setVisibleChartRange(range.start, range.end);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>When moving one timeline, the other moves along.</p>
|
||||
<div id="timeline1"></div>
|
||||
<br>
|
||||
<div id="timeline2"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
static/lib/timeline/examples/example11_datasource.html
Normal file
106
static/lib/timeline/examples/example11_datasource.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<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 urlSpreadsheet = "https://spreadsheets.google.com/a/almende.org/ccc?key=tpN13qnPm37g3qTXT5Hc9sg&hl=en#gid=0";
|
||||
var urlData = "data.php";
|
||||
|
||||
var initialized = false;
|
||||
var query;
|
||||
var vis;
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(initialize);
|
||||
|
||||
function initialize() {
|
||||
initialized = true;
|
||||
}
|
||||
|
||||
function load(url) {
|
||||
if (!initialized) {
|
||||
alert("One moment please... still busy loading Google Visualization API");
|
||||
return;
|
||||
}
|
||||
|
||||
if (url == undefined) {
|
||||
dataSourceUrl = document.getElementById("dataSourceUrl").value
|
||||
} else {
|
||||
dataSourceUrl = url;
|
||||
}
|
||||
|
||||
// if the entered url is a google spreadsheet url, replace the part
|
||||
// "/ccc?" with "/tq?" in order to retrieve a neat data query result
|
||||
if (dataSourceUrl.indexOf("/ccc?")) {
|
||||
dataSourceUrl.replace("/ccc?", "/tq?");
|
||||
}
|
||||
|
||||
var handleQueryResponse = function(response) {
|
||||
if (response.isError()) {
|
||||
alert('Error in query: ' + response.getMessage() + ', ' + response.getDetailedMessage());
|
||||
return;
|
||||
}
|
||||
|
||||
// retrieve the data from the query response
|
||||
var data = response.getDataTable();
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
editable: true,
|
||||
layout: "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
vis = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
vis.draw(data);
|
||||
}
|
||||
|
||||
query && query.abort();
|
||||
query = new google.visualization.Query(dataSourceUrl);
|
||||
query.send(handleQueryResponse);
|
||||
}
|
||||
|
||||
function loadDataHtml() {
|
||||
document.getElementById("dataSourceUrl").value = urlData;
|
||||
load(urlData);
|
||||
}
|
||||
|
||||
function loadSpreadSheet() {
|
||||
document.getElementById("dataSourceUrl").value = urlSpreadsheet;
|
||||
load(urlSpreadsheet);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p>Enter a datasource and click the button "Go".</p>
|
||||
<p>
|
||||
Datasource: <input type="text" id="dataSourceUrl" value="data.php" style="width: 600px;">
|
||||
<input type="button" value="Go" onclick="load();">
|
||||
</p>
|
||||
<p>
|
||||
Examples:
|
||||
</p>
|
||||
<p>
|
||||
<a href="javascript:loadDataHtml();">Open data.php</a> (Works only if you run the example on a PHP server)<br>
|
||||
<a href="javascript:loadSpreadSheet();">Open a Google spreadsheet</a>
|
||||
(or <a href="" onclick="window.open(urlSpreadsheet); return false;">view</a> this sheet)<br>
|
||||
</p>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
72
static/lib/timeline/examples/example12_millisecondscale.html
Normal file
72
static/lib/timeline/examples/example12_millisecondscale.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<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);
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create and populate a data table.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
var t = new Date(2010,7,23,16,30,15);
|
||||
|
||||
data.addRows([
|
||||
[new Date(t.getTime()+15), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(t.getTime()+16), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(t.getTime()+18), , 'Report'],
|
||||
[new Date(t.getTime()+20), new Date(t.getTime()+26), 'Traject A'],
|
||||
[new Date(t.getTime()+22), , 'Memo<br>' +
|
||||
'<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(t.getTime()+23), , 'Phone call<br>' +
|
||||
'<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(t.getTime()+24), new Date(t.getTime()+27), 'Traject B'],
|
||||
[new Date(t.getTime()+29), , 'Report<br>' +
|
||||
'<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
editable: true,
|
||||
style: "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
var vis = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
vis.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
144
static/lib/timeline/examples/example13_grouping.html
Executable file
144
static/lib/timeline/examples/example13_grouping.html
Executable file
@@ -0,0 +1,144 @@
|
||||
<html >
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<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">
|
||||
body {font: 10pt arial;}
|
||||
|
||||
div.timeline-frame {
|
||||
border-color: #103E9C;
|
||||
}
|
||||
|
||||
div.timeline-axis {
|
||||
border-color: #103E9C;
|
||||
|
||||
background-color: #EEEFF1;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#EEEFF1'); /* for IE */
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#EEEFF1)); /* for webkit browsers */
|
||||
background: -moz-linear-gradient(top, #F9F9F9, #EEEFF1); /* for firefox 3.6+ */
|
||||
}
|
||||
|
||||
div.timeline-axis-text {
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
}
|
||||
|
||||
div.timeline-event {
|
||||
border: none;
|
||||
background-color: white;
|
||||
}
|
||||
div.timeline-event-selected {
|
||||
background-color: #C0D8E1;
|
||||
}
|
||||
div.timeline-event-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.timeline-groups-axis {
|
||||
border-color: #103E9C;
|
||||
}
|
||||
div.timeline-groups-text {
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
}
|
||||
|
||||
div.order {
|
||||
border: 1px solid #FB3738;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
|
||||
padding: 2px;
|
||||
margin:1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline = null;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
data.addColumn('string', 'group');
|
||||
|
||||
var order = 1;
|
||||
for (var truck = 11; truck < 15; truck++) {
|
||||
var date = new Date(2010, 12, 14, 8, 0, 0);
|
||||
for (var i = 0; i < 10; i++) {
|
||||
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
|
||||
var start = new Date(date);
|
||||
|
||||
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
|
||||
var end = new Date(date);
|
||||
|
||||
var orderText = "Order " + order;
|
||||
if (Math.random() < 0.25) {
|
||||
orderText = "<img src='img/product-icon.png' style='width:32px; height:32px; vertical-align: middle'> " + orderText;
|
||||
}
|
||||
orderText = "<div title='Order " + order + "' class='order'>" + orderText + "</div>";
|
||||
|
||||
var truckText = "<img src='img/truck-icon.png' style='width:24px; height:24px; vertical-align: middle'>" +
|
||||
"Truck " + truck;
|
||||
data.addRow([start, end, orderText, truckText]);
|
||||
order++;
|
||||
}
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
//height: "300px",
|
||||
height: "auto",
|
||||
layout: "box",
|
||||
editable: true,
|
||||
eventMargin: 5, // minimal margin between events
|
||||
eventMarginAxis: 0, // minimal margin beteen events and the axis
|
||||
showMajorLabels: false,
|
||||
axisOnTop: true,
|
||||
// groupsWidth : "200px",
|
||||
groupsChangeable : true,
|
||||
groupsOnRight: false,
|
||||
stackEvents: false
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Grouping example</h1>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
91
static/lib/timeline/examples/example14_past_and_future.html
Normal file
91
static/lib/timeline/examples/example14_past_and_future.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<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>
|
||||
201
static/lib/timeline/examples/example15_mobile.html
Normal file
201
static/lib/timeline/examples/example15_mobile.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<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>
|
||||
159
static/lib/timeline/examples/example16_performance_grouping.html
Normal file
159
static/lib/timeline/examples/example16_performance_grouping.html
Normal file
@@ -0,0 +1,159 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
|
||||
<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">
|
||||
body {
|
||||
color: #4D4D4D;
|
||||
font: 10pt arial;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline = null;
|
||||
var data = null;
|
||||
var order = 1;
|
||||
var truck = 1;
|
||||
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
stackEvents: false,
|
||||
start: new Date(),
|
||||
end: new Date(1000*60*60*24 + (new Date()).valueOf()),
|
||||
editable: true,
|
||||
animate: false,
|
||||
eventMargin: 10, // minimal margin between events
|
||||
eventMarginAxis: 5, // minimal margin between events and the axis
|
||||
showMajorLabels: true,
|
||||
cluster: true,
|
||||
axisOnTop: true,
|
||||
snapEvents: true,
|
||||
dragAreaWidth: 20
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// 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');
|
||||
|
||||
addData();
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
|
||||
google.visualization.events.addListener(timeline, 'select',
|
||||
function () {
|
||||
//console.log('select', timeline.getSelection()[0]);
|
||||
}
|
||||
);
|
||||
|
||||
google.visualization.events.addListener(timeline, 'edit',
|
||||
function() {
|
||||
//console.log('edit')
|
||||
}
|
||||
);
|
||||
|
||||
google.visualization.events.addListener(timeline, 'change',
|
||||
function() {
|
||||
//console.log('change')
|
||||
//timeline.cancelChange();
|
||||
}
|
||||
);
|
||||
|
||||
google.visualization.events.addListener(timeline, 'add',
|
||||
function() {
|
||||
//console.log('add')
|
||||
//timeline.cancelAdd();
|
||||
}
|
||||
);
|
||||
|
||||
/*
|
||||
console.profile();
|
||||
var count = 10;
|
||||
for (var i = 0; i < count; i++) {
|
||||
timeline.redraw();
|
||||
}
|
||||
console.profileEnd();
|
||||
//*/
|
||||
}
|
||||
|
||||
/**
|
||||
* Get URL parameter
|
||||
* http://www.netlobo.com/url_query_string_javascript.html
|
||||
*/
|
||||
function gup( name ) {
|
||||
name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
|
||||
var regexS = "[\\?&]"+name+"=([^&#]*)";
|
||||
var regex = new RegExp( regexS );
|
||||
var results = regex.exec( window.location.href );
|
||||
if( results == null )
|
||||
return "";
|
||||
else
|
||||
return results[1];
|
||||
}
|
||||
|
||||
var count = (Number(gup('count')) || 100);
|
||||
|
||||
function addData() {
|
||||
for (var j = 0; j < 4; j++) {
|
||||
var date = new Date();
|
||||
for (var i = 0; i < count/4; i++) {
|
||||
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
|
||||
var start = new Date(date);
|
||||
|
||||
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
|
||||
var end = new Date(date);
|
||||
|
||||
var orderText = "Order " + order;
|
||||
var truckText = "Truck " + truck;
|
||||
data.addRow([start, end, orderText, truckText]);
|
||||
order++;
|
||||
}
|
||||
truck++;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onresize="/*timeline.checkResize();*/">
|
||||
<h1>Timeline grouping performance</h1>
|
||||
|
||||
<p>
|
||||
Choose a number of items:
|
||||
<a href="?count=20">20</a>,
|
||||
<a href="?count=100">100</a>,
|
||||
<a href="?count=1000">1000</a>,
|
||||
<a href="?count=10000">10000</a>
|
||||
<p>
|
||||
<p>
|
||||
Current number of items: <span id='count'>100</span>
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<div id="info"></div>
|
||||
|
||||
<script>
|
||||
document.getElementById('count').innerHTML = count;
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
103
static/lib/timeline/examples/example17_json_data.html
Normal file
103
static/lib/timeline/examples/example17_json_data.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline JSON data</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 10pt;
|
||||
font-family: verdana, sans, arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create a JSON data table
|
||||
data = [
|
||||
{
|
||||
'start': new Date(2010,7,23),
|
||||
'content': 'Conversation<br><img src="img/comments-icon.png" style="width:32px; height:32px;">'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,23,23,0,0),
|
||||
'content': 'Mail from boss<br><img src="img/mail-icon.png" style="width:32px; height:32px;">'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,24,16,0,0),
|
||||
'content': 'Report'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,26),
|
||||
'end': new Date(2010,8,2),
|
||||
'content': 'Traject A'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,28),
|
||||
'content': 'Memo<br><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,29),
|
||||
'content': 'Phone call<br><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,31),
|
||||
'end': new Date(2010,8,3),
|
||||
'content': 'Traject B'
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,8,4,12,0,0),
|
||||
'content': 'Report<br><img src="img/attachment-icon.png" style="width:32px; height:32px;">'
|
||||
}
|
||||
];
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': '100%',
|
||||
'height': '300px',
|
||||
'editable': true, // enable dragging and editing events
|
||||
'style': 'box'
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
function onRangeChanged(properties) {
|
||||
document.getElementById('info').innerHTML += 'rangechanged ' +
|
||||
properties.start + ' - ' + properties.end + '<br>';
|
||||
}
|
||||
|
||||
// attach an event listener using the links events handler
|
||||
links.events.addListener(timeline, 'rangechanged', onRangeChanged);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="drawVisualization();">
|
||||
<h1>Timeline JSON data</h1>
|
||||
<p>
|
||||
This demo shows how to feed the Timeline with JSON data.
|
||||
No Google DataTable is used, and therefore the Google JSAPI is
|
||||
not needed by the Timeline, which can thus be used offline.
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
<div id="info"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
49
static/lib/timeline/examples/example18_limit_range.html
Normal file
49
static/lib/timeline/examples/example18_limit_range.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
function drawVisualization() {
|
||||
// create and populate an array with data
|
||||
var data = [
|
||||
{'start': new Date(2012, 4, 25), 'content': 'First'},
|
||||
{'start': new Date(2012, 4, 26), 'content': 'Last'}
|
||||
];
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
"min": new Date(2012, 0, 1), // lower limit of visible range
|
||||
"max": new Date(2013, 0, 1), // upper limit of visible range
|
||||
"zoomMin": 1000 * 60 * 60 * 24, // one day in milliseconds
|
||||
"zoomMax": 1000 * 60 * 60 * 24 * 31 * 3 // about three months in milliseconds
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="drawVisualization();">
|
||||
<p>
|
||||
The visible range is limited in this demo:
|
||||
</p>
|
||||
<ul>
|
||||
<li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
|
||||
<li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
|
||||
<li>visible interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
|
||||
<li>visible interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
|
||||
</ul>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
</body>
|
||||
</html>
|
||||
145
static/lib/timeline/examples/example19_bar_graph.html
Normal file
145
static/lib/timeline/examples/example19_bar_graph.html
Normal file
@@ -0,0 +1,145 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<style type="text/css">
|
||||
body {font: 10pt arial;}
|
||||
|
||||
div.timeline-event {
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
div.timeline-event-selected {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
div.timeline-event-content {
|
||||
margin: 0;
|
||||
}
|
||||
div.timeline-event-range {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
div.bar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: white;
|
||||
/* height and color is set for each individual bar */
|
||||
}
|
||||
div.requirement {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-top: 2px solid gray;
|
||||
background: #e5e5e5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
|
||||
/**
|
||||
* Calculate the color based on the given value.
|
||||
* @param {number} H Hue, a value be between 0 and 360
|
||||
* @param {number} S Saturation, a value between 0 and 1
|
||||
* @param {number} V Value, a value between 0 and 1
|
||||
*/
|
||||
var hsv2rgb = function(H, S, V) {
|
||||
var R, G, B, C, Hi, X;
|
||||
|
||||
C = V * S;
|
||||
Hi = Math.floor(H/60); // hi = 0,1,2,3,4,5
|
||||
X = C * (1 - Math.abs(((H/60) % 2) - 1));
|
||||
|
||||
switch (Hi) {
|
||||
case 0: R = C; G = X; B = 0; break;
|
||||
case 1: R = X; G = C; B = 0; break;
|
||||
case 2: R = 0; G = C; B = X; break;
|
||||
case 3: R = 0; G = X; B = C; break;
|
||||
case 4: R = X; G = 0; B = C; break;
|
||||
case 5: R = C; G = 0; B = X; break;
|
||||
|
||||
default: R = 0; G = 0; B = 0; break;
|
||||
}
|
||||
|
||||
return "RGB(" + parseInt(R*255) + "," + parseInt(G*255) + "," + parseInt(B*255) + ")";
|
||||
};
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create and populate a data table.
|
||||
var data = [];
|
||||
|
||||
var maxNum = 20;
|
||||
var d = new Date(2012, 6, 5);
|
||||
for (var i = 0; i < 20; i++) {
|
||||
var hours = Math.round(1 + Math.random() * 7);
|
||||
var start = new Date(d);
|
||||
var end = new Date(d);
|
||||
end.setHours(end.getHours() + hours);
|
||||
|
||||
// create item with minimum requirement
|
||||
var num = Math.round(Math.random() * maxNum); // number of members available
|
||||
var height = Math.round(num / maxNum * 80 + 20); // a percentage, with a lower bound on 20%
|
||||
var style = 'height:' + height + 'px;';
|
||||
var requirement = '<div class="requirement" style="' + style + '" ' +
|
||||
'title="Minimum requirement: ' + num + ' people"></div>';
|
||||
|
||||
// create item with actual number
|
||||
num = Math.round(Math.random() * maxNum); // number of members available
|
||||
height = Math.round(num / maxNum * 70 + 20); // a percentage, with a lower bound on 20%
|
||||
var hue = Math.min(Math.max(height, 20), 80) * 1.2; // hue between 0 (red) and 120 (green)
|
||||
var color = hsv2rgb(hue, 0.95, 0.95);
|
||||
var borderColor = hsv2rgb(hue, 0.9, 0.9);
|
||||
style = 'height:' + height + 'px;' +
|
||||
'background-color: ' + color + ';' +
|
||||
'border-top: 2px solid ' + borderColor + ';';
|
||||
var actual = '<div class="bar" style="' + style + '" ' +
|
||||
' title="Actual: ' + num + ' people">' + num + '</div>';
|
||||
var item = {
|
||||
'group': 'Team',
|
||||
'start': start,
|
||||
'end': end,
|
||||
'content': requirement + actual
|
||||
};
|
||||
data.push(item);
|
||||
|
||||
d = new Date(end);
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
"style": "box",
|
||||
"stackEvents": false
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="drawVisualization();">
|
||||
<h1>Timeline - Bar Graph Example</h1>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
127
static/lib/timeline/examples/example20_custom_class_names.html
Executable file
127
static/lib/timeline/examples/example20_custom_class_names.html
Executable file
@@ -0,0 +1,127 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font: 14pt arial;
|
||||
}
|
||||
input {
|
||||
font: 14pt arial;
|
||||
}
|
||||
|
||||
/* custom styles for individual items, load this after timeline.css */
|
||||
|
||||
div.green {
|
||||
background-color: greenyellow;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
/* create a custom sized dot at the bottom of the red item */
|
||||
div.red {
|
||||
background-color: red;
|
||||
border-color: darkred;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
box-shadow: 0 0 10px gray;
|
||||
}
|
||||
div.timeline-event-dot.red {
|
||||
border-radius: 10px;
|
||||
border-width: 10px;
|
||||
}
|
||||
div.timeline-event-line.red {
|
||||
border-width: 5px;
|
||||
}
|
||||
div.timeline-event-box.red {
|
||||
border-radius: 0;
|
||||
border-width: 2px;
|
||||
font-size: 24pt;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
div.orange {
|
||||
background-color: gold;
|
||||
border-color: orange;
|
||||
}
|
||||
div.timeline-event-selected.orange {
|
||||
/* custom colors for selected orange items */
|
||||
background-color: orange;
|
||||
border-color: orangered;
|
||||
}
|
||||
|
||||
div.magenta {
|
||||
background-color: magenta;
|
||||
border-color: purple;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* our custom classes overrule the styles for selected events,
|
||||
so lets define a new style for the selected events */
|
||||
div.timeline-event-selected {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
box-shadow: 0 0 10px gray;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
// Called when the page is loaded
|
||||
function drawVisualization() {
|
||||
// Create and populate a data table.
|
||||
data = [
|
||||
{
|
||||
'start': new Date(2012,7,19),
|
||||
'content': 'default'
|
||||
},
|
||||
{
|
||||
'start': new Date(2012,7,23),
|
||||
'content': 'green',
|
||||
'className': 'green'
|
||||
},
|
||||
{
|
||||
'start': new Date(2012,7,29),
|
||||
'content': 'red',
|
||||
'className': 'red'
|
||||
},
|
||||
{
|
||||
'start': new Date(2012,7,27),
|
||||
'end': new Date(2012,8,1),
|
||||
'content': 'orange',
|
||||
'className': 'orange'
|
||||
},
|
||||
{
|
||||
'start': new Date(2012,8,2),
|
||||
'content': 'magenta',
|
||||
'className': 'magenta'
|
||||
}
|
||||
];
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
//'editable': true
|
||||
};
|
||||
|
||||
// Instantiate our table object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our table with the data we created locally.
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawVisualization()">
|
||||
<p>This page demonstrates the timeline visualization with custom css classes
|
||||
for individual items.</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,117 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline animate visible range</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 10pt;
|
||||
font-family: verdana, sans, arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create a JSON data table
|
||||
data = [];
|
||||
for (var i = 0; i < 10; i++) {
|
||||
var date = new Date(2012, i, 1);
|
||||
data.push({
|
||||
"start": date,
|
||||
"content": "item " + i
|
||||
});
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': '100%',
|
||||
'height': '300px',
|
||||
'showCustomTime': true
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// cancel any running animation as soon as the user changes the range
|
||||
links.events.addListener(timeline, 'rangechange', function (properties) {
|
||||
animateCancel();
|
||||
});
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
// create a simple animation
|
||||
var animateTimeout = undefined;
|
||||
var animateFinal = undefined;
|
||||
function animateTo(date) {
|
||||
// get the new final date
|
||||
animateFinal = date.valueOf();
|
||||
timeline.setCustomTime(date);
|
||||
|
||||
// cancel any running animation
|
||||
animateCancel();
|
||||
|
||||
// animate towards the final date
|
||||
var animate = function () {
|
||||
var range = timeline.getVisibleChartRange();
|
||||
var current = (range.start.getTime() + range.end.getTime())/ 2;
|
||||
var width = (range.end.getTime() - range.start.getTime());
|
||||
var minDiff = Math.max(width / 1000, 1);
|
||||
var diff = (animateFinal - current);
|
||||
if (Math.abs(diff) > minDiff) {
|
||||
// move towards the final date
|
||||
var start = new Date(range.start.getTime() + diff / 4);
|
||||
var end = new Date(range.end.getTime() + diff / 4);
|
||||
timeline.setVisibleChartRange(start, end);
|
||||
|
||||
// start next timer
|
||||
animateTimeout = setTimeout(animate, 50);
|
||||
}
|
||||
};
|
||||
animate();
|
||||
}
|
||||
function animateCancel () {
|
||||
if (animateTimeout) {
|
||||
clearTimeout(animateTimeout);
|
||||
animateTimeout = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function go () {
|
||||
// interpret the value as a date formatted as "yyyy-MM-dd"
|
||||
var v = document.getElementById('animateDate').value.split('-');
|
||||
var date = new Date(v[0], v[1], v[2]);
|
||||
if (date.toString() == "Invalid Date") {
|
||||
alert("Invalid Date");
|
||||
}
|
||||
else {
|
||||
animateTo(date);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="drawVisualization();">
|
||||
<h1>Timeline - animate visible range</h1>
|
||||
<p>
|
||||
This demo shows how to to animate the timeline visible range to another date
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<input id="animateDate" value="2012-09-13" placeholder="yyyy-MM-dd">
|
||||
<button id="go" onclick="go()">Animate to</button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
106
static/lib/timeline/examples/example22_clustering.html
Normal file
106
static/lib/timeline/examples/example22_clustering.html
Normal file
@@ -0,0 +1,106 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline clustering demo</title>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 10pt;
|
||||
font-family: verdana, sans, arial, sans-serif;
|
||||
color: #4d4d4d;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
// Called when the Visualization API is loaded.
|
||||
function drawVisualization() {
|
||||
// Create a JSON data table
|
||||
data = [];
|
||||
|
||||
// an item every month
|
||||
var i, iMax = 1000;
|
||||
var num = 0;
|
||||
var date = new Date(2012, 0, 1);
|
||||
for (i = 0; i < iMax; i++) {
|
||||
date.setMonth(date.getMonth() + 1);
|
||||
data.push({
|
||||
"start": new Date(date),
|
||||
"content": "item " + num
|
||||
});
|
||||
num++;
|
||||
}
|
||||
|
||||
// an item every day
|
||||
date = new Date(2012, 3, 1);
|
||||
for (i = 0; i < iMax; i++) {
|
||||
date.setDate(date.getDate() + 1);
|
||||
data.push({
|
||||
"start": new Date(date),
|
||||
"content": "item " + num
|
||||
});
|
||||
num++;
|
||||
}
|
||||
|
||||
// an item every hour
|
||||
date = new Date(2012, 6, 1);
|
||||
for (i = 0; i < iMax; i++) {
|
||||
date.setHours(date.getHours() + 1);
|
||||
data.push({
|
||||
"start": new Date(date),
|
||||
"content": "item " + num
|
||||
});
|
||||
num++;
|
||||
}
|
||||
|
||||
// items on the same spot
|
||||
date = new Date(2012, 9, 1);
|
||||
for (i = 0; i < iMax; i++) {
|
||||
data.push({
|
||||
"start": new Date(date),
|
||||
"content": "item " + num
|
||||
});
|
||||
num++;
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': '100%',
|
||||
'height': '300px',
|
||||
'start': new Date(2012, 0, 1),
|
||||
'end': new Date(2012, 11, 31),
|
||||
'cluster': true,
|
||||
// 'axisOnTop': true,
|
||||
'editable': true
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body onload="drawVisualization();">
|
||||
<h1>Timeline - clustering demo</h1>
|
||||
<p>
|
||||
When too much items are being displayed, Timeline will smartly cluster
|
||||
the items together. This both:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>keeps the amount of displayed information limited for the user,</li>
|
||||
<li>and prevents the browser from getting overloaded</li>
|
||||
</ul>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,100 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline</title>
|
||||
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="../timeline.css">
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-size: 10pt;
|
||||
font-family: verdana, sans, arial, sans-serif;
|
||||
}
|
||||
div.readonly {
|
||||
background-color: #ff4500;
|
||||
border-color: red;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Timeline - editable/read-only events</h1>
|
||||
<p style="max-width: 600px;">
|
||||
In the demo below, events are made editable or read-only on an individual
|
||||
basis.
|
||||
To check whether an item is editable, the Timeline first checks
|
||||
if the item has the field 'editable' defined, and if not, uses the global
|
||||
options.editable.
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// Create some JSON data
|
||||
var data = [
|
||||
{
|
||||
'start': new Date(2010,7,23),
|
||||
'content': 'Editable',
|
||||
'editable': true
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,23,23,0,0),
|
||||
'content': 'Editable',
|
||||
'editable': true
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,24,16,0,0),
|
||||
'content': 'Read-only',
|
||||
'className': 'readonly',
|
||||
'editable': false
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,26),
|
||||
'end': new Date(2010,8,2),
|
||||
'content': 'Read-only',
|
||||
'className': 'readonly',
|
||||
'editable': false
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,28),
|
||||
'content': 'Editable',
|
||||
'editable': true
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,29),
|
||||
'content': 'Read-only',
|
||||
'className': 'readonly',
|
||||
'editable': false
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,7,31),
|
||||
'end': new Date(2010,8,3),
|
||||
'content': 'Editable',
|
||||
'editable': true
|
||||
},
|
||||
{
|
||||
'start': new Date(2010,8,4,12,0,0),
|
||||
'className': 'readonly',
|
||||
'content': 'Read-only',
|
||||
'editable': false
|
||||
}
|
||||
];
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
'width': '100%',
|
||||
'height': '300px',
|
||||
'editable': true, // enable dragging and editing events
|
||||
'style': 'box'
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
var timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
182
static/lib/timeline/examples/example25_new_item_type.html
Normal file
182
static/lib/timeline/examples/example25_new_item_type.html
Normal file
@@ -0,0 +1,182 @@
|
||||
<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">
|
||||
|
||||
<style type="text/css">
|
||||
.item-line
|
||||
{
|
||||
border-left-width: 3px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
/**
|
||||
* @constructor links.Timeline.ItemLine
|
||||
* @extends links.Timeline.Item
|
||||
* User defined item type "line".
|
||||
*/
|
||||
var ItemLine = function (data, options) {
|
||||
links.Timeline.Item.call(this, data, options);
|
||||
};
|
||||
|
||||
ItemLine.prototype = new links.Timeline.Item();
|
||||
|
||||
ItemLine.prototype.createDOM = function () {
|
||||
var _this = this;
|
||||
var divLine = document.createElement("DIV");
|
||||
divLine.style.position = "absolute";
|
||||
divLine.style.width = "0px";
|
||||
|
||||
this.dom = divLine;
|
||||
this.updateDOM();
|
||||
|
||||
return divLine;
|
||||
};
|
||||
|
||||
ItemLine.prototype.showDOM = function (container) {
|
||||
var dom = this.dom;
|
||||
if (!dom) {
|
||||
dom = this.createDOM();
|
||||
}
|
||||
|
||||
if (dom.parentNode != container) {
|
||||
if (dom.parentNode) {
|
||||
this.hideDOM();
|
||||
}
|
||||
|
||||
container.insertBefore(dom, container.firstChild);
|
||||
this.rendered = true;
|
||||
}
|
||||
};
|
||||
|
||||
ItemLine.prototype.hideDOM = function () {
|
||||
var dom = this.dom;
|
||||
if (dom) {
|
||||
var parent = dom.parentNode;
|
||||
if (parent) {
|
||||
parent.removeChild(dom);
|
||||
this.rendered = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ItemLine.prototype.updateDOM = function () {
|
||||
var divLine = this.dom;
|
||||
if (divLine) {
|
||||
|
||||
// update class
|
||||
divLine.className = "timeline-event item-line";
|
||||
|
||||
if (this.isCluster) {
|
||||
links.Timeline.addClassName(divLine, 'timeline-event-cluster');
|
||||
}
|
||||
|
||||
// add item specific class name when provided
|
||||
if (this.className) {
|
||||
links.Timeline.addClassName(divLine, this.className);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ItemLine.prototype.updatePosition = function (timeline) {
|
||||
var dom = this.dom;
|
||||
if (dom) {
|
||||
var left = timeline.timeToScreen(this.start),
|
||||
axisOnTop = timeline.options.axisOnTop,
|
||||
axisTop = timeline.size.axis.top,
|
||||
axisHeight = timeline.size.axis.height
|
||||
|
||||
dom.style.left = (left - this.lineWidth / 2) + "px";
|
||||
dom.style.top = "0px";
|
||||
dom.style.height = axisTop + "px";
|
||||
}
|
||||
};
|
||||
|
||||
ItemLine.prototype.isVisible = function (start, end) {
|
||||
if (this.cluster) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (this.start > start)
|
||||
&& (this.start < end);
|
||||
};
|
||||
|
||||
ItemLine.prototype.setPosition = function (left, right) {
|
||||
var dom = this.dom;
|
||||
dom.style.left = (left - this.lineWidth / 2) + "px";
|
||||
};
|
||||
|
||||
ItemLine.prototype.getRight = function (timeline) {
|
||||
return timeline.timeToScreen(this.start);
|
||||
};
|
||||
|
||||
var timeline;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
data.addRows([
|
||||
[new Date(2010,7,23), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , 'Memo<br>' +
|
||||
'<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , 'Phone call<br>' +
|
||||
'<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,4,12,0,0), , 'Report<br>' +
|
||||
'<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
"style": "line"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
timeline.addItemType('line', ItemLine);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
93
static/lib/timeline/examples/example26_localization.html
Normal file
93
static/lib/timeline/examples/example26_localization.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline localization demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font: 10pt verdana;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
|
||||
<script type="text/javascript" src="../timeline.js"></script>
|
||||
<script type="text/javascript" src="../timeline-locales.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 timeline;
|
||||
var data;
|
||||
|
||||
// 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(2011, 01, 23), , '<div>Conversation</div><img src="../examples/img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011, 01, 23, 23, 00, 00), , '<div>Mail from boss</div><img src="../examples/img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011, 01, 24, 16, 00, 00), , '<span onclick="alert(\'test\')">Click here!</span>'],
|
||||
[new Date(2011, 01, 26), new Date(2011, 02, 02), 'Traject A'],
|
||||
[new Date(2011, 01, 27), , '<div>Memo</div><img src="../examples/img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2011, 01, 28), new Date(2011, 02, 03), 'Traject B'],
|
||||
[new Date(2011, 02, 04, 12, 00, 00), , '<div>Report</div><img src="../examples/img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "200px",
|
||||
editable: true, // enable dragging and editing events
|
||||
enableKeys: true,
|
||||
axisOnTop: false,
|
||||
showNavigation: true,
|
||||
showButtonNew: true,
|
||||
animate: true,
|
||||
animateZoom: true,
|
||||
layout: "box"
|
||||
};
|
||||
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline1'), options);
|
||||
options.locale = "de";
|
||||
timeline.draw(data);
|
||||
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline2'), options);
|
||||
options.locale = "es";
|
||||
timeline.draw(data);
|
||||
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline3'), options);
|
||||
options.locale = "ru";
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p><strong>This page demonstrates the timeline localization (i18n text).</strong></p>
|
||||
|
||||
<p><strong>German Timeline</strong></p>
|
||||
<div id="mytimeline1"></div>
|
||||
|
||||
<p><strong>Spanish Timeline</strong></p>
|
||||
<div id="mytimeline2"></div>
|
||||
|
||||
<p><strong>Russian Timeline</strong></p>
|
||||
<div id="mytimeline3"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;">DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;">TpdkDesign.net</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
110
static/lib/timeline/examples/example27_jquery_themeroller.html
Normal file
110
static/lib/timeline/examples/example27_jquery_themeroller.html
Normal file
@@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Timeline jQuery Themeroller demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<script type="text/javascript" src="../lib/jquery-1.9.1.js"></script>
|
||||
<script type="text/javascript" src="../lib/jquery-ui.js"></script>
|
||||
<script type="text/javascript" src="../lib/jquery.themeswitcher.js"></script>
|
||||
|
||||
<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-theme.css">
|
||||
|
||||
<style>
|
||||
body,
|
||||
.ui-widget,
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button,
|
||||
.ui-widget-header,
|
||||
.ui-widget-content,
|
||||
.ui-widget-header .ui-widget-header,
|
||||
.ui-widget-content .ui-widget-content {
|
||||
font-family: Arial, "Trebuchet MS", Verdana, sans-serif !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#switcher").themeswitcher({
|
||||
imgpath: "../img/themeswitcher/",
|
||||
loadtheme: "sunny"
|
||||
});
|
||||
});
|
||||
|
||||
google.load("visualization", "1");
|
||||
|
||||
// Set callback to run when API is loaded
|
||||
google.setOnLoadCallback(drawVisualization);
|
||||
|
||||
var timeline;
|
||||
var data;
|
||||
|
||||
function getSelectedRow() {
|
||||
var row = undefined
|
||||
var sel = timeline.getSelection();
|
||||
if (sel.length) {
|
||||
if (sel[0].row != undefined) {
|
||||
var row = sel[0].row;
|
||||
}
|
||||
}
|
||||
return row;
|
||||
}
|
||||
|
||||
// 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(2011, 01, 23), , '<div>Conversation</div><img src="../examples/img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011, 01, 23, 23, 00, 00), , '<div>Mail from boss</div><img src="../examples/img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2011, 01, 24, 16, 00, 00), , '<span onclick="alert(\'test\')">Click here!</span>'],
|
||||
[new Date(2011, 01, 26), new Date(2011, 02, 02), 'Traject A'],
|
||||
[new Date(2011, 01, 27), , '<div>Memo</div><img src="../examples/img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2011, 01, 28), new Date(2011, 02, 03), 'Traject B'],
|
||||
[new Date(2011, 02, 04, 12, 00, 00), , '<div>Report</div><img src="../examples/img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
editable: true, // enable dragging and editing events
|
||||
enableKeys: true,
|
||||
axisOnTop: false,
|
||||
showNavigation: true,
|
||||
showButtonNew: true,
|
||||
animate: true,
|
||||
animateZoom: true,
|
||||
layout: "box"
|
||||
};
|
||||
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1><strong>This page demonstrates the timeline intergation with jQuery Themeroller CSS framework.</strong></h1>
|
||||
|
||||
<p>
|
||||
|
||||
<div id="switcher"></div>
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;">DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;">TpdkDesign.net</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
120
static/lib/timeline/examples/example28_custom_controls.html
Normal file
120
static/lib/timeline/examples/example28_custom_controls.html
Normal file
@@ -0,0 +1,120 @@
|
||||
<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">
|
||||
var timeline;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
|
||||
data.addRows([
|
||||
[new Date(), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,24,16,0,0), , 'Report'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],
|
||||
[new Date(2010,7,28), , 'Memo<br>' +
|
||||
'<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
|
||||
[new Date(2010,7,29), , 'Phone call<br>' +
|
||||
'<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
|
||||
[new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],
|
||||
[new Date(2010,8,4,12,0,0), , 'Report<br>' +
|
||||
'<img src="img/attachment-icon.png" style="width:32px; height:32px;">']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
"style": "box"
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Zoom
|
||||
* @param zoomVal
|
||||
*/
|
||||
function zoom(zoomVal) {
|
||||
timeline.zoom(zoomVal);
|
||||
timeline.trigger("rangechange");
|
||||
timeline.trigger("rangechanged");
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjust the visible time range such that all events are visible.
|
||||
*/
|
||||
function adjustVisibleTimeRangeToAccommodateAllEvents() {
|
||||
timeline.setVisibleChartRangeAuto();
|
||||
}
|
||||
|
||||
/**
|
||||
* Move
|
||||
* @param moveVal
|
||||
*/
|
||||
function move(moveVal) {
|
||||
timeline.move(moveVal);
|
||||
timeline.trigger("rangechange");
|
||||
timeline.trigger("rangechanged");
|
||||
}
|
||||
|
||||
/**
|
||||
* Move the visible range such that the current time is located in the center of the timeline.
|
||||
*/
|
||||
function moveToCurrentTime() {
|
||||
timeline.setVisibleChartRangeNow();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>This page demonstrates the timeline zoom and move functions</h1>
|
||||
|
||||
<div>
|
||||
<h2>Zoom controls</h2>
|
||||
<input type="button" value="Zoom in" title="Zoom in" onclick="zoom(0.4);">
|
||||
<input type="button" value="Adjust visible range to accommodate all events" title="Adjust visible range to accommodate all events" onclick="adjustVisibleTimeRangeToAccommodateAllEvents();">
|
||||
<input type="button" value="Zoom out" title="Zoom in" onclick="zoom(-0.4);">
|
||||
</div>
|
||||
<div>
|
||||
<h2>Move controls</h2>
|
||||
<input type="button" value="Move left" title="Move left" onclick="move(-0.2);">
|
||||
<input type="button" value="Move to current time" title="Move to current time" onclick="moveToCurrentTime();">
|
||||
<input type="button" value="Move right" title="Move right" onclick="move(0.2);">
|
||||
</div>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
142
static/lib/timeline/examples/example29_stacking_with_grouping.html
Executable file
142
static/lib/timeline/examples/example29_stacking_with_grouping.html
Executable file
@@ -0,0 +1,142 @@
|
||||
<html >
|
||||
<head>
|
||||
<title>Timeline demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
|
||||
<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">
|
||||
body {font: 10pt arial;}
|
||||
|
||||
div.timeline-frame {
|
||||
border-color: #103E9C;
|
||||
}
|
||||
|
||||
div.timeline-axis {
|
||||
border-color: #103E9C;
|
||||
|
||||
background-color: #EEEFF1;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#EEEFF1'); /* for IE */
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#EEEFF1)); /* for webkit browsers */
|
||||
background: -moz-linear-gradient(top, #F9F9F9, #EEEFF1); /* for firefox 3.6+ */
|
||||
}
|
||||
|
||||
div.timeline-axis-text {
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
}
|
||||
|
||||
div.timeline-event {
|
||||
border: none;
|
||||
background-color: white;
|
||||
}
|
||||
div.timeline-event-selected {
|
||||
background-color: #C0D8E1;
|
||||
}
|
||||
div.timeline-event-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
div.timeline-groups-axis {
|
||||
border-color: #103E9C;
|
||||
}
|
||||
div.timeline-groups-text {
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
}
|
||||
|
||||
div.order {
|
||||
border: 1px solid #FB3738;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
|
||||
font: bold 12px arial ;
|
||||
color: #103E9C;
|
||||
|
||||
padding: 2px;
|
||||
margin:1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var timeline = null;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
data.addColumn('string', 'group');
|
||||
|
||||
var order = 1;
|
||||
for (var truck = 11; truck < 15; truck++) {
|
||||
var date = new Date(2010, 12, 14, 8, 0, 0);
|
||||
for (var i = 0; i < 10; i++) {
|
||||
date.setHours(date.getHours() + 4 * (Math.random() < 0.2));
|
||||
var start = new Date(date);
|
||||
|
||||
date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
|
||||
var end = new Date(date);
|
||||
|
||||
var orderText = "Order " + order;
|
||||
if (Math.random() < 0.25) {
|
||||
orderText = "<img src='img/product-icon.png' style='width:32px; height:32px; vertical-align: middle'> " + orderText;
|
||||
}
|
||||
orderText = "<div title='Order " + order + "' class='order'>" + orderText + "</div>";
|
||||
|
||||
var truckText = "<img src='img/truck-icon.png' style='width:24px; height:24px; vertical-align: middle'>" +
|
||||
"Truck " + truck;
|
||||
data.addRow([start, end, orderText, truckText]);
|
||||
order++;
|
||||
}
|
||||
}
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
layout: "box",
|
||||
editable: false,
|
||||
selectable: false,
|
||||
eventMargin: 10, // minimal margin between events
|
||||
eventMarginAxis: 20, // minimal margin beteen events and the axis
|
||||
showMajorLabels: false,
|
||||
axisOnTop: true,
|
||||
groupsChangeable : false,
|
||||
groupsOnRight: false
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Stacking with grouping example</h1>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
73
static/lib/timeline/examples/example30_floatingRange.html
Normal file
73
static/lib/timeline/examples/example30_floatingRange.html
Normal file
@@ -0,0 +1,73 @@
|
||||
<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">
|
||||
var timeline;
|
||||
|
||||
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.
|
||||
var data = new google.visualization.DataTable();
|
||||
data.addColumn('datetime', 'start');
|
||||
data.addColumn('datetime', 'end');
|
||||
data.addColumn('string', 'content');
|
||||
data.addColumn('string', 'type');
|
||||
|
||||
data.addRows([
|
||||
[new Date(2010,7,23), , 'Conversation<br>' +
|
||||
'<img src="img/comments-icon.png" style="width:32px; height:32px;">', 'box'],
|
||||
[new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' +
|
||||
'<img src="img/mail-icon.png" style="width:32px; height:32px;">', 'box'],
|
||||
[new Date(2010,7,26), new Date(2010,8,2), 'Traject A (default range)', 'range'],
|
||||
[ , new Date(2010,7,26), 'Traject B ( floatingRange no start date )', 'floatingRange'],
|
||||
[new Date(2010,7,31), , 'Traject C ( floatingRange no end date )', 'floatingRange'],
|
||||
[ , , 'Traject D ( floatingRange no start date and no end date )', 'floatingRange']
|
||||
]);
|
||||
|
||||
// specify options
|
||||
var options = {
|
||||
"width": "100%",
|
||||
"height": "300px",
|
||||
'editable': true, // enable dragging and editing events
|
||||
};
|
||||
|
||||
// Instantiate our timeline object.
|
||||
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
|
||||
|
||||
// Draw our timeline with the created data and options
|
||||
timeline.draw(data);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Timeline floatingRange demo</h1>
|
||||
<p>
|
||||
This demo shows how to use floatingRange items.
|
||||
The start and end dates are optional in this type of range.
|
||||
</p>
|
||||
|
||||
<div id="mytimeline"></div>
|
||||
|
||||
<!-- Information about where the used icons come from -->
|
||||
<p style="color:gray; font-size:10px; font-style:italic;">
|
||||
Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
|
||||
and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
|
||||
</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
static/lib/timeline/examples/img/Hardware-Mobile-Phone-icon.png
Normal file
BIN
static/lib/timeline/examples/img/Hardware-Mobile-Phone-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/lib/timeline/examples/img/attachment-icon.png
Executable file
BIN
static/lib/timeline/examples/img/attachment-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/lib/timeline/examples/img/blog-post-edit-icon.png
Executable file
BIN
static/lib/timeline/examples/img/blog-post-edit-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/lib/timeline/examples/img/comments-icon.png
Executable file
BIN
static/lib/timeline/examples/img/comments-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/lib/timeline/examples/img/community-users-icon.png
Executable file
BIN
static/lib/timeline/examples/img/community-users-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
17
static/lib/timeline/examples/img/license.txt
Normal file
17
static/lib/timeline/examples/img/license.txt
Normal file
@@ -0,0 +1,17 @@
|
||||
IMAGE LICENSES
|
||||
|
||||
REFRESH CL
|
||||
http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html
|
||||
|
||||
License: Free for non-commercial use.
|
||||
http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt
|
||||
|
||||
|
||||
|
||||
AESTHETICA 2
|
||||
http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html
|
||||
|
||||
License:
|
||||
DryIcons Terms of Use
|
||||
http://dryicons.com/terms/
|
||||
|
||||
36
static/lib/timeline/examples/img/license_aesthetica-2.txt
Normal file
36
static/lib/timeline/examples/img/license_aesthetica-2.txt
Normal file
@@ -0,0 +1,36 @@
|
||||
Aesthetica Icon Set, version 2.0
|
||||
http://dryicons.com/free-icons/preview/aesthetica-version-2/
|
||||
|
||||
Information
|
||||
----------------------
|
||||
|
||||
This icon set contains 181 quality icons in the following formats:
|
||||
Transparent PNG
|
||||
16 x 16 px
|
||||
24 x 24 px
|
||||
32 x 32 px
|
||||
48 x 48 px
|
||||
128 x 128 px
|
||||
|
||||
|
||||
|
||||
Licensing
|
||||
----------------------
|
||||
|
||||
The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use.
|
||||
The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions:
|
||||
|
||||
* You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com);
|
||||
|
||||
* You must include the correct back link to DryIcons website, which is: http://dryicons.com;
|
||||
|
||||
* You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons);
|
||||
|
||||
* When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes;
|
||||
|
||||
* Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics).
|
||||
|
||||
For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license
|
||||
|
||||
|
||||
The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.
|
||||
26
static/lib/timeline/examples/img/license_refresh-cl.txt
Normal file
26
static/lib/timeline/examples/img/license_refresh-cl.txt
Normal file
@@ -0,0 +1,26 @@
|
||||
RefreshCL Icon Pack by TPDK <20>2005 www.tpdkdesign.net
|
||||
All rights reserved.
|
||||
version 1.0 2005/18/11
|
||||
|
||||
|
||||
Terms of use
|
||||
Theses icons are copyrighted, and for personal use only.
|
||||
Until now, COMMERCIAL USE is strictly forbidden.
|
||||
|
||||
You cannot (non-exhaustive list) :
|
||||
- Use my icons in commercial website
|
||||
- Use my icons in a professional website layout
|
||||
- Sell or distribute those icons
|
||||
|
||||
For any other use, such as :
|
||||
- using in non-commercial website
|
||||
- using icon in free software under GPL licence
|
||||
you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website.
|
||||
I would not be responsible fo any damage you may encounter while using this product.
|
||||
For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net.
|
||||
|
||||
Special thanks to customxp's & crystalxp's teams and members for help and support ;)
|
||||
http://crystalxp.net
|
||||
http://customxp.net
|
||||
http://pngfactory.net
|
||||
visit my deviantart webpage : http://tpdkcasimir.deviantart.com/
|
||||
BIN
static/lib/timeline/examples/img/mail-icon.png
Executable file
BIN
static/lib/timeline/examples/img/mail-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
static/lib/timeline/examples/img/notes-edit-icon.png
Executable file
BIN
static/lib/timeline/examples/img/notes-edit-icon.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/lib/timeline/examples/img/product-icon.png
Normal file
BIN
static/lib/timeline/examples/img/product-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/lib/timeline/examples/img/truck-icon.png
Normal file
BIN
static/lib/timeline/examples/img/truck-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
41
static/lib/timeline/examples/index.html
Normal file
41
static/lib/timeline/examples/index.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<html>
|
||||
<head>
|
||||
<link rel='stylesheet' href='default.css' type='text/css'>
|
||||
</head>
|
||||
<body>
|
||||
<div id="container">
|
||||
|
||||
<h1>Examples</h1>
|
||||
|
||||
<p><a href="example01_basis.html">example01_basis.html</a></p>
|
||||
<p><a href="example02_interactive.html">example02_interactive.html</a></p>
|
||||
<p><a href="example03_performance.html">example03_performance.html</a></p>
|
||||
<p><a href="example04_format_dot.html">example04_format_dot.html</a></p>
|
||||
<p><a href="example05_format_custom_html.html">example05_format_custom_html.html</a></p>
|
||||
<p><a href="example06_format_custom_css.html">example06_format_custom_css.html</a></p>
|
||||
<p><a href="example07_confirm_changes.html">example07_confirm_changes.html</a></p>
|
||||
<p><a href="example08_calendar.html">example08_calendar.html</a></p>
|
||||
<p><a href="example09_editable.html">example09_editable.html</a></p>
|
||||
<p><a href="example10_link_two_timelines.html">example10_link_two_timelines.html</a></p>
|
||||
<p><a href="example11_datasource.html">example11_datasource.html</a></p>
|
||||
<p><a href="example12_millisecondscale.html">example12_millisecondscale.html</a></p>
|
||||
<p><a href="example13_grouping.html">example13_grouping.html</a></p>
|
||||
<p><a href="example14_past_and_future.html">example14_past_and_future.html</a></p>
|
||||
<p><a href="example15_mobile.html">example15_mobile.html</a></p>
|
||||
<p><a href="example16_performance_grouping.html">example16_performance_grouping.html</a></p>
|
||||
<p><a href="example17_json_data.html">example17_json_data.html</a></p>
|
||||
<p><a href="example18_limit_range.html">example18_limit_range.html</a></p>
|
||||
<p><a href="example19_bar_graph.html">example19_bar_graph.html</a></p>
|
||||
<p><a href="example20_custom_class_names.html">example20_custom_class_names.html</a></p>
|
||||
<p><a href="example21_animate_visible_range.html">example21_animate_visible_range.html</a></p>
|
||||
<p><a href="example22_clustering.html">example22_clustering.html</a></p>
|
||||
<p><a href="example24_individual_editable_events.html">example24_individual_editable_events.html</a></p>
|
||||
<p><a href="example25_new_item_type.html">example25_new_item_type.html</a></p>
|
||||
<p><a href="example26_localization.html">example26_localization.html</a></p>
|
||||
<p><a href="example28_custom_controls.html">example28_custom_controls.html</a></p>
|
||||
<p><a href="example29_stacking_with_grouping.html">example29_stacking_with_grouping.html</a></p>
|
||||
<p><a href="example30_floatingRange.html">example30_floatingRange.html</a></p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user