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.
106 lines
3.0 KiB
106 lines
3.0 KiB
<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>
|