You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
145 lines
4.9 KiB
145 lines
4.9 KiB
<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>
|