audrius/web
1
0
Fork 1
mirror of https://github.com/OCA/web.git synced 2025-02-22 13:21:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

[ADD] new timeline widget

Browse Source
This commit is contained in:
Laurent Mignon
2015-04-27 09:01:55 +02:00
committed by Tom Blauwendraat
parent 765c0c4670
commit 7f985f06fe
205 changed files with 70317 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
static/lib/timeline/examples/example22_clustering.html Normal file
View 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>