From cfb327a24955afa4fb36662aa67a808ddf74b775 Mon Sep 17 00:00:00 2001
From: jos <wjosdejong@gmail.com>
Date: Fri, 2 May 2014 11:06:11 +0200
Subject: [PATCH] More examples added

---
 examples/timeline/01_basic.html               |   2 +-
 ...3_much_data.html => 03_a_lot_of_data.html} |   1 +
 examples/timeline/11_points.html              |  57 +++++++++
 examples/timeline/12_custom_styling.html      |  88 ++++++++++++++
 examples/timeline/13_past_and_future.html     |  88 ++++++++++++++
 .../timeline/14_a_lot_of_grouped_data.html    | 109 +++++++++++++++++
 examples/timeline/15_item_class_names.html    | 115 ++++++++++++++++++
 examples/timeline/index.html                  |   7 +-
 8 files changed, 465 insertions(+), 2 deletions(-)
 rename examples/timeline/{03_much_data.html => 03_a_lot_of_data.html} (98%)
 create mode 100755 examples/timeline/11_points.html
 create mode 100644 examples/timeline/12_custom_styling.html
 create mode 100644 examples/timeline/13_past_and_future.html
 create mode 100644 examples/timeline/14_a_lot_of_grouped_data.html
 create mode 100755 examples/timeline/15_item_class_names.html
diff --git a/examples/timeline/01_basic.html b/examples/timeline/01_basic.html
index a9b2c2df..5dc030e0 100644
--- a/examples/timeline/01_basic.html
+++ b/examples/timeline/01_basic.html
@@ -23,7 +23,7 @@
     {id: 3, content: 'item 3', start: '2014-04-18'},
     {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
     {id: 5, content: 'item 5', start: '2014-04-25'},
-    {id: 6, content: 'item 6', start: '2014-04-27'}
+    {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
   ];
   var options = {};
   var timeline = new vis.Timeline(container, items, options);
diff --git a/examples/timeline/03_much_data.html b/examples/timeline/03_a_lot_of_data.html
similarity index 98%
rename from examples/timeline/03_much_data.html
rename to examples/timeline/03_a_lot_of_data.html
index 8a81e3f2..fc703309 100644
--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_a_lot_of_data.html
@@ -53,6 +53,7 @@
 
   var container = document.getElementById('visualization');
   var options = {
+    editable: true,
     start: now.clone().add('days', -3),
     end: now.clone().add('days', 11),
     zoomMin: 1000 * 60 * 60 * 24,          // a day
diff --git a/examples/timeline/11_points.html b/examples/timeline/11_points.html
new file mode 100755
index 00000000..2e64e09c
--- /dev/null
+++ b/examples/timeline/11_points.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Points</title>
+
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+<body>
+<h1>World War II timeline</h1>
+<p>Source: <a href="http://www.onwar.com/chrono/index.htm" target="_blank">http://www.onwar.com/chrono/index.htm</a></p>
+<div id="mytimeline" style="background-color: #FAFAFA;"></div>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+
+  var items = [
+    {start: new Date(1939,8,1),  content: 'German Invasion of Poland'},
+    {start: new Date(1940,4,10), content: 'Battle of France and the Low Countries'},
+    {start: new Date(1940,7,13), content: 'Battle of Britain - RAF vs. Luftwaffe'},
+    {start: new Date(1941,1,14), content: 'German Afrika Korps arrives in North Africa'},
+    {start: new Date(1941,5,22), content: 'Third Reich Invades the USSR'},
+    {start: new Date(1941,11,7), content: 'Japanese Attack Pearl Harbor'},
+    {start: new Date(1942,5,4),  content: 'Battle of Midway in the Pacific'},
+    {start: new Date(1942,10,8), content: 'Americans open Second Front in North Africa'},
+    {start: new Date(1942,10,19),content: 'Battle of Stalingrad in Russia'},
+    {start: new Date(1943,6,5),  content: 'Battle of Kursk - Last German Offensive on Eastern Front'},
+    {start: new Date(1943,6,10), content: 'Anglo-American Landings in Sicily'},
+    {start: new Date(1944,2,8),  content: 'Japanese Attack British India'},
+    {start: new Date(1944,5,6),  content: 'D-Day - Allied Invasion of Normandy'},
+    {start: new Date(1944,5,22), content: 'Destruction of Army Group Center in Byelorussia'},
+    {start: new Date(1944,7,1),  content: 'The Warsaw Uprising in Occupied Poland'},
+    {start: new Date(1944,9,20), content: 'American Liberation of the Philippines'},
+    {start: new Date(1944,11,16),content: 'Battle of the Bulge in the Ardennes'},
+    {start: new Date(1944,1,19), content: 'American Landings on Iwo Jima'},
+    {start: new Date(1945,3,1),  content: 'US Invasion of Okinawa'},
+    {start: new Date(1945,3,16), content: 'Battle of Berlin - End of the Third Reich'}
+  ];
+
+  var options = {
+    // Set global item type. Type can also be specified for items individually
+    // Available types: 'box' (default), 'point', 'range', 'rangeoverflow'
+    type: 'point'
+  };
+
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
diff --git a/examples/timeline/12_custom_styling.html b/examples/timeline/12_custom_styling.html
new file mode 100644
index 00000000..0b184e5e
--- /dev/null
+++ b/examples/timeline/12_custom_styling.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Custom styling</title>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    .vis.timeline.rootpanel {
+      border: 2px solid purple;
+      font-family:  purisa, 'comic sans', cursive;
+      font-size: 12pt;
+      background: #ffecea;
+    }
+
+    .vis.timeline .item {
+      border-color: #F991A3;
+      background-color: pink;
+      font-size: 15pt;
+      color: purple;
+      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
+    }
+
+    .vis.timeline .item,
+    .vis.timeline .item.line {
+      border-width: 3px;
+    }
+
+    .vis.timeline .item.dot {
+      border-width: 10px;
+      border-radius: 10px;
+    }
+
+    .vis.timeline .item.selected {
+      border-color: green;
+      background-color: lightgreen;
+    }
+
+    .vis.timeline .timeaxis .text {
+      color: purple;
+      padding-top: 10px;
+      padding-left: 10px;
+    }
+
+    .vis.timeline .timeaxis .text.major {
+      font-weight: bold;
+    }
+
+    .vis.timeline .timeaxis .grid.minor {
+      border-width: 2px;
+      border-color: pink;
+    }
+
+    .vis.timeline .timeaxis .grid.major {
+      border-width: 2px;
+      border-color: #F991A3;
+    }
+  </style>
+
+</head>
+<body>
+
+<div id="visualization"></div>
+
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = [
+    {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">', type: 'point'},
+    {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'},
+    {start: new Date(2010,7,24,16,0,0), content: 'Report'},
+    {start: new Date(2010,7,26), end: new Date(2010,8,2), content: 'Traject A'},
+    {start: new Date(2010,7,28), content: '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'},
+    {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'},
+    {start: new Date(2010,7,31), end: new Date(2010,8,3), content: 'Traject B'},
+    {start: new Date(2010,8,4,12,0,0), content: '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">'}
+  ];
+  var options = {
+    editable: true,
+    margin: {
+      item: 20,
+      axis: 40
+    }
+  };
+  var timeline = new vis.Timeline(container, items, options);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/timeline/13_past_and_future.html b/examples/timeline/13_past_and_future.html
new file mode 100644
index 00000000..019dde17
--- /dev/null
+++ b/examples/timeline/13_past_and_future.html
@@ -0,0 +1,88 @@
+<html>
+<head>
+  <title>Timeline | Past and future</title>
+
+  <style type="text/css">
+    body {
+      font: 11pt verdana;
+    }
+
+    .vis.timeline .item.past {
+      filter: alpha(opacity=50);
+      opacity: 0.5;
+    }
+  </style>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+</head>
+
+<body>
+<p style="width: 600px;">
+  When the custom time bar is shown, the user can drag this bar to a specific
+  time. The Timeline sends an event that the custom time is changed, after
+  which the contents of the timeline can be changed according to the specified
+  time in past or future.
+</p>
+
+<div id="customTime">&nbsp;</div>
+<p></p>
+
+<div id="mytimeline"></div>
+
+
+<script>
+  // create a data set
+  var data = new vis.DataSet([
+    {
+      id: 1,
+      start: new Date((new Date()).getTime() - 60 * 1000),
+      end: new Date(),
+      content: 'Dynamic event'
+    }
+  ]);
+
+  // specify options
+  var options = {
+    showCurrentTime: true,
+    showCustomTime: true
+  };
+
+  // create a timeline
+  var container = document.getElementById('mytimeline');
+  timeline = new vis.Timeline(container, data, options);
+
+  // add event listener
+  timeline.on('timechange', function (event) {
+    document.getElementById("customTime").innerHTML = "Custom Time: " + event.time;
+
+    var item = data.get(1);
+    if (event.time > item.start) {
+      item.end = new Date(event.time);
+      var now = new Date();
+      if (event.time < now) {
+        item.content = "Dynamic event (past)";
+        item.className = 'past';
+      }
+      else if (event.time > now) {
+        item.content = "Dynamic event (future)";
+        item.className = 'future';
+      }
+      else  {
+        item.content = "Dynamic event (now)";
+        item.className = 'now';
+      }
+
+      data.update(item);
+    }
+  });
+
+  // set a custom range from -2 minute to +3 minutes current time
+  var start = new Date((new Date()).getTime() - 2 * 60 * 1000);
+  var end   = new Date((new Date()).getTime() + 3 * 60 * 1000);
+  timeline.setWindow(start, end);
+
+</script>
+
+</body>
+</html>
diff --git a/examples/timeline/14_a_lot_of_grouped_data.html b/examples/timeline/14_a_lot_of_grouped_data.html
new file mode 100644
index 00000000..de4d7b47
--- /dev/null
+++ b/examples/timeline/14_a_lot_of_grouped_data.html
@@ -0,0 +1,109 @@
+<html>
+<head>
+  <title>Timeline | A lot of grouped data</title>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body {
+      color: #4D4D4D;
+      font: 10pt arial;
+    }
+  </style>
+</head>
+
+<body onresize="/*timeline.checkResize();*/">
+<h1>Timeline grouping performance</h1>
+
+<p>
+  Choose a number of items:
+  <a href="?count=100">100</a>,
+  <a href="?count=1000">1000</a>,
+  <a href="?count=10000">10000</a>,
+  <a href="?count=10000">100000</a>
+<p>
+<p>
+  Current number of items: <span id='count'>100</span>
+</p>
+
+<div id="mytimeline"></div>
+
+<script>
+  /**
+   * Get URL parameter
+   * http://www.netlobo.com/url_query_string_javascript.html
+   */
+  function gup( name ) {
+    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
+    var regexS = "[\\?&]"+name+"=([^&#]*)";
+    var regex = new RegExp( regexS );
+    var results = regex.exec( window.location.href );
+    if( results == null )
+      return "";
+    else
+      return results[1];
+  }
+
+  // get selected item count from url parameter
+  var count = (Number(gup('count')) || 1000);
+
+  // create groups
+  var groups = new vis.DataSet([
+    {id: 1, content: 'Truck&nbsp;1'},
+    {id: 2, content: 'Truck&nbsp;2'},
+    {id: 3, content: 'Truck&nbsp;3'},
+    {id: 4, content: 'Truck&nbsp;4'}
+  ]);
+
+  // create items
+  var items = new vis.DataSet();
+
+  var order = 1;
+  var truck = 1;
+  for (var j = 0; j < 4; j++) {
+    var date = new Date();
+    for (var i = 0; i < count/4; i++) {
+      date.setHours(date.getHours() +  4 * (Math.random() < 0.2));
+      var start = new Date(date);
+
+      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
+      var end = new Date(date);
+
+      items.add({
+        id: order,
+        group: truck,
+        start: start,
+        end: end,
+        content: 'Order ' + order
+      });
+
+      order++;
+    }
+    truck++;
+  }
+
+  // specify options
+  var options = {
+    stack: false,
+    start: new Date(),
+    end: new Date(1000*60*60*24 + (new Date()).valueOf()),
+    editable: true,
+    margin: {
+      item: 10, // minimal margin between items
+      axis: 5   // minimal margin between items and the axis
+    },
+    orientation: 'top'
+  };
+
+  // create a Timeline
+  var container = document.getElementById('mytimeline');
+  timeline = new vis.Timeline(container, null, options);
+  timeline.setGroups(groups);
+  timeline.setItems(items);
+
+  document.getElementById('count').innerHTML = count;
+</script>
+
+</body>
+</html>
diff --git a/examples/timeline/15_item_class_names.html b/examples/timeline/15_item_class_names.html
new file mode 100755
index 00000000..43dd348f
--- /dev/null
+++ b/examples/timeline/15_item_class_names.html
@@ -0,0 +1,115 @@
+<html>
+<head>
+  <title>Timeline | Item class names</title>
+
+  <script src="../../dist/vis.js"></script>
+  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
+
+  <style type="text/css">
+    body, input {
+      font: 12pt verdana;
+    }
+
+    /* custom styles for individual items, load this after vis.css */
+
+    .vis.timeline .item.green {
+      background-color: greenyellow;
+      border-color: green;
+    }
+
+    /* create a custom sized dot at the bottom of the red item */
+    .vis.timeline .item.red {
+      background-color: red;
+      border-color: darkred;
+      color: white;
+      font-family: monospace;
+      box-shadow: 0 0 10px gray;
+    }
+    .vis.timeline .item.dot.red {
+      border-radius: 10px;
+      border-width: 10px;
+    }
+    .vis.timeline .item.line.red {
+      border-width: 5px;
+    }
+    .vis.timeline .item.box.red {
+      border-radius: 0;
+      border-width: 2px;
+      font-size: 24pt;
+      font-weight: bold;
+    }
+
+    .vis.timeline .item.orange {
+      background-color: gold;
+      border-color: orange;
+    }
+    .vis.timeline .item.orange.selected {
+      /* custom colors for selected orange items */
+      background-color: orange;
+      border-color: orangered;
+    }
+
+    .vis.timeline .item.magenta {
+      background-color: magenta;
+      border-color: purple;
+      color: white;
+    }
+
+    /* our custom classes overrule the styles for selected events,
+       so lets define a new style for the selected events */
+    .vis.timeline .item.selected {
+      background-color: white;
+      border-color: black;
+      color: black;
+      box-shadow: 0 0 10px gray;
+    }
+  </style>
+
+</head>
+<body>
+<p>This page demonstrates the Timeline with custom css classes for individual items.</p>
+
+<div id="mytimeline"></div>
+
+<script type="text/javascript">
+  // create data
+  var data = [
+    {
+      'start': new Date(2012,7,19),
+      'content': 'default'
+    },
+    {
+      'start': new Date(2012,7,23),
+      'content': 'green',
+      'className': 'green'
+    },
+    {
+      'start': new Date(2012,7,29),
+      'content': 'red',
+      'className': 'red'
+    },
+    {
+      'start': new Date(2012,7,27),
+      'end': new Date(2012,8,1),
+      'content': 'orange',
+      'className': 'orange'
+    },
+    {
+      'start': new Date(2012,8,2),
+      'content': 'magenta',
+      'className': 'magenta'
+    }
+  ];
+
+  // specify options
+  var options = {
+    editable: true
+  };
+
+  // create the timeline
+  var container = document.getElementById('mytimeline');
+  timeline = new vis.Timeline(container, data, options);
+
+</script>
+</body>
+</html>
diff --git a/examples/timeline/index.html b/examples/timeline/index.html
index 8372ce6a..122e148e 100644
--- a/examples/timeline/index.html
+++ b/examples/timeline/index.html
@@ -14,7 +14,7 @@
 
   <p><a href="01_basic.html">01_basic.html</a></p>
   <p><a href="02_interactive.html">02_dataset.html</a></p>
-  <p><a href="03_much_data.html">03_much_data.html</a></p>
+  <p><a href="03_a_lot_of_data.html">03_a_lot_of_data.html</a></p>
   <p><a href="04_html_data.html">04_html_data.html</a></p>
   <p><a href="05_groups.html">05_groups.html</a></p>
   <p><a href="06_event_listeners.html">06_event_listeners.html</a></p>
@@ -22,6 +22,11 @@
   <p><a href="08_edit_items.html">08_edit_items.html</a></p>
   <p><a href="09_order_groups.html">09_order_groups.html</a></p>
   <p><a href="10_limit_move_and_zoom.html">10_limit_range_and_zoom.html</a></p>
+  <p><a href="11_points.html">11_points.html</a></p>
+  <p><a href="12_custom_styling.html">12_custom_styling.html</a></p>
+  <p><a href="13_past_and_future.html">13_past_and_future.html</a></p>
+  <p><a href="14_a_lot_of_grouped_data.html">14_a_lot_of_grouped_data.html</a></p>
+  <p><a href="15_item_class_names.html">15_item_class_names.html</a></p>
 
   <p><a href="requirejs/requirejs_example.html">requirejs_example.html</a></p>
 
