|
|
<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>
|
