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