added network and timeline examples, updated network docs, updated network example index

9 years ago · d2f2b0aa14
--- a/docs/network/index.html
+++ b/docs/network/index.html
@ -190,7 +190,7 @@
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>
    <p><a href="http://visjs.org/examples/network/01_basic_usage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p>
    <p><a href="http://visjs.org/examples/network/basic_usage.html" target="_blank">The result of the code above will be the basic example which is shown here.</a></p>

    <br>
    </div>
@ -1439,8 +1439,7 @@ var network = new vis.Network(container, data, options);
        <p>
            Network can import data straight from an exported json file from gephi. You can get the JSON exporter here:
            <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
            An example exists showing how to get a JSON file into Vis: <a
                href="../examples/network/30_importing_from_gephi.html">30_importing_from_gephi</a>.
            An example exists showing how to get a JSON file into Vis:
        </p>

        <p>
@ -1449,7 +1448,7 @@ var network = new vis.Network(container, data, options);

 <pre class="prettyprint lang-js">
 // load the JSON file containing the Gephi network.
 var gephiJSON = loadJSON("./data/WorldCup2014.json"); // code in example 30
 var gephiJSON = loadJSON("./datasources/WorldCup2014.json"); // code in <a href="../examples/network/data/importing_from_gephi.html">importing_from_gephi</a>.

 // you can customize the result like with these options. These are explained below.
 // These are the default options.
--- a/examples/network/events/interactionEvents.html
+++ b/examples/network/events/interactionEvents.html
@ -61,6 +61,18 @@
        params.event = "[original event]";
        document.getElementById('eventSpan').innerHTML = '<h2>oncontext (right click) event:</h2>' + JSON.stringify(params, null, 4);
    });
    network.on("dragStart", function (params) {
        params.event = "[original event]";
        document.getElementById('eventSpan').innerHTML = '<h2>dragStart event:</h2>' + JSON.stringify(params, null, 4);
    });
    network.on("dragging", function (params) {
        params.event = "[original event]";
        document.getElementById('eventSpan').innerHTML = '<h2>dragging event:</h2>' + JSON.stringify(params, null, 4);
    });
    network.on("dragEnd", function (params) {
        params.event = "[original event]";
        document.getElementById('eventSpan').innerHTML = '<h2>dragEnd event:</h2>' + JSON.stringify(params, null, 4);
    });
    network.on("zoom", function (params) {
        document.getElementById('eventSpan').innerHTML = '<h2>zoom event:</h2>' + JSON.stringify(params, null, 4);
    });
--- a/examples/network/layout/hierarchical_layout_methods.html
+++ b/examples/network/layout/hierarchical_layout_methods.html
--- a/examples/timeline/12_custom_styling.html
+++ b/examples/timeline/12_custom_styling.html
@ -0,0 +1,100 @@
 <!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">
    body {
      font-family:  purisa, 'comic sans', cursive;
    }

    .vis-timeline {
      border: 2px solid purple;
      font-family:  purisa, 'comic sans', cursive;
      font-size: 12pt;
      background: #ffecea;
    }

    .vis-item {
      border-color: #F991A3;
      background-color: pink;
      font-size: 15pt;
      color: purple;
      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
    }

    .vis-item,
    .vis-item.vis-line {
      border-width: 3px;
    }

    .vis-item.vis-dot {
      border-width: 10px;
      border-radius: 10px;
    }

    .vis-item.vis-selected {
      border-color: green;
      background-color: lightgreen;
    }

    .vis-time-axis .vis-text {
      color: purple;
      padding-top: 10px;
      padding-left: 10px;
    }

    .vis-time-axis .vis-text.vis-major {
      font-weight: bold;
    }

    .vis-time-axis .vis-grid.vis-minor {
      border-width: 2px;
      border-color: pink;
    }

    .vis-time-axis .vis-grid.vis-major {
      border-width: 2px;
      border-color: #F991A3;
    }
  </style>

  <script src="../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  The style of the Timeline can be fully customized via CSS:
 </p>
 <div id="visualization"></div>

 <script type="text/javascript">
  var container = document.getElementById('visualization');

  // note that months are zero-based in the JavaScript Date object
  var items = new vis.DataSet([
    {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="img/community-users-icon.png" style="width:32px; height:32px;">'},
    {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>
--- a/examples/timeline/basicUsage.html
+++ b/examples/timeline/basicUsage.html
@ -0,0 +1,45 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  A basic timeline. You can move and zoom the timeline, and select items.
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {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', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/dataHandling/dataSerialization.html
+++ b/examples/timeline/dataHandling/dataSerialization.html
@ -0,0 +1,121 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Data serialization</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    textarea {
      width: 800px;
      height: 200px;
    }

    .buttons {
      margin: 20px 0;
    }

    .buttons input {
      padding: 10px;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <h1>Serialization and deserialization</h1>

 <p>This example shows how to serialize and deserialize JSON data, and load this in the Timeline via a DataSet. Serialization and deserialization is needed when loading or saving data from a server.</p>

 <textarea id="data">
 [
  {"id": 1, "content": "item 1<br>start", "start": "2014-01-23"},
  {"id": 2, "content": "item 2", "start": "2014-01-18"},
  {"id": 3, "content": "item 3", "start": "2014-01-21"},
  {"id": 4, "content": "item 4", "start": "2014-01-19", "end": "2014-01-24"},
  {"id": 5, "content": "item 5", "start": "2014-01-28", "type": "point"},
  {"id": 6, "content": "item 6", "start": "2014-01-26"}
 ]
 </textarea>

 <div class="buttons">
  <input type="button" id="load" value="&darr; Load" title="Load data from textarea into the Timeline">
  <input type="button" id="save" value="&uarr; Save" title="Save data from the Timeline into the textarea">
 </div>

 <div id="visualization"></div>

 <script>
  var txtData = document.getElementById('data');
  var btnLoad = document.getElementById('load');
  var btnSave = document.getElementById('save');

  // Create an empty DataSet.
  // This DataSet is used for two way data binding with the Timeline.
  var items = new vis.DataSet();

  // create a timeline
  var container = document.getElementById('visualization');
  var options = {
    editable: true
  };
  var timeline = new vis.Timeline(container, items, options);

  function loadData () {
    // get and deserialize the data
    var data = JSON.parse(txtData.value);

    // update the data in the DataSet
    //
    // Note: when retrieving updated data from a server instead of a complete
    // new set of data, one can simply update the existing data like:
    //
    //   items.update(data);
    //
    // Existing items will then be updated, and new items will be added.
    items.clear();
    items.add(data);

    // adjust the timeline window such that we see the loaded data
    timeline.fit();
  }
  btnLoad.onclick = loadData;

  function saveData() {
    // get the data from the DataSet
    // Note that we specify the output type of the fields start and end
    // as ISODate, which is safely serializable. Other serializable types
    // are Number (unix timestamp) or ASPDate.
    //
    // Alternatively, it is possible to configure the DataSet to convert
    // the output automatically to ISODates like:
    //
    //   var options = {
    //     type: {start: 'ISODate', end: 'ISODate'}
    //   };
    //   var items = new vis.DataSet(options);
    //   // now items.get() will automatically convert start and end to ISO dates.
    //
    var data = items.get({
      type: {
        start: 'ISODate',
        end: 'ISODate'
      }
    });

    // serialize the data and put it in the textarea
    txtData.value = JSON.stringify(data, null, 2);
  }
  btnSave.onclick = saveData;

  // load the initial data
  loadData();
 </script>
 </body>
 </html>
--- a/examples/timeline/dataHandling/loadExternalData.html
+++ b/examples/timeline/dataHandling/loadExternalData.html
@ -0,0 +1,58 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | External data</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <!-- Load jquery for ajax support -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  This demo shows how to load external data via an ajax call.
 </p>
 <div id="visualization"></div>
 <div id="loading">loading...</div>

 <script type="text/javascript">
  // load data via an ajax request. When the data is in, load the timeline
  $.ajax({
    url: '../resources/data/basic.json',
    success: function (data) {
      // hide the "loading..." message
      document.getElementById('loading').style.display = 'none';

      // DOM element where the Timeline will be attached
      var container = document.getElementById('visualization');

      // Create a DataSet (allows two way data-binding)
      var items = new vis.DataSet(data);

      // Configuration for the Timeline
      var options = {};

      // Create a Timeline
      var timeline = new vis.Timeline(container, items, options);
    },
    error: function (err) {
      console.log('Error', err);
      if (err.status === 0) {
        alert('Failed to load data/basic.json.\nPlease run this example on a server.');
      }
      else {
        alert('Failed to load data/basic.json.');
      }
    }
  });
 </script>
 </body>
 </html>
--- a/examples/timeline/editing/customSnappingOfItems.html
+++ b/examples/timeline/editing/customSnappingOfItems.html
@ -0,0 +1,55 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Custom snapping</title>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  When moving the items in on the Timeline below, they will snap to full hours,
  independent of being zoomed in or out.
 </p>
 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'A', start: '2015-02-09T04:00:00'},
    {id: 2, content: 'B', start: '2015-02-09T14:00:00'},
    {id: 3, content: 'C', start: '2015-02-09T16:00:00'},
    {id: 4, content: 'D', start: '2015-02-09T17:00:00'},
    {id: 5, content: 'E', start: '2015-02-10T03:00:00'}
  ]);

  // Configuration for the Timeline
  var options = {
    editable: true,

    // always snap to full hours, independent of the scale
    snap: function (date, scale, step) {
      var hour = 60 * 60 * 1000;
      return Math.round(date / hour) * hour;
    }

    // to configure no snapping at all:
    //
    //   snap: null
    //
    // or let the snap function return the date unchanged:
    //
    //   snap: function (date, scale, step) {
    //     return date;
    //   }
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/editing/editingItems.html
+++ b/examples/timeline/editing/editingItems.html
@ -0,0 +1,77 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Manipulation example</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>An editable timeline allows to drag items around, create new items, and remove items. Changes are logged in the browser console.</p>

 <div id="visualization"></div>

 <script>
  // create a dataset with items
  // we specify the type of the fields `start` and `end` here to be strings
  // containing an ISO date. The fields will be outputted as ISO dates
  // automatically getting data from the DataSet via items.get().
  var items = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  // add items to the DataSet
  items.add([
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  // log changes to the console
  items.on('*', function (event, properties) {
    console.log(event, properties.items);
  });

  var container = document.getElementById('visualization');
  var options = {
    start: '2014-01-10',
    end: '2014-02-10',
    height: '300px',

    // allow selecting multiple items using ctrl+click, shift+click, or hold.
    multiselect: true,

    // allow manipulation of items
    editable: true,

    /* alternatively, enable/disable individual actions:

    editable: {
      add: true,
      updateTime: true,
      updateGroup: true,
      remove: true
    },

    */

    showCurrentTime: true
  };

  var timeline = new vis.Timeline(container, items, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/editing/editingItemsCallbacks.html
+++ b/examples/timeline/editing/editingItemsCallbacks.html
@ -0,0 +1,108 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Manipulation callbacks</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p style="max-width: 800px;">
  This example shows how to use callback functions <code>onAdd</code>, <code>onMove</code>, <code>onMoving</code>, <code>onUpdate</code>, and <code>onRemove</code>. The <code>onMoving</code> function updates an item while dragging, and can be used to prevent the item from being drawn at disallowed or infeasible timeslots. In this example, the items cannot be moved outside of the month April 2013. The other callback functions are called after an add, move, update, or remove action has taken place, and can be used to cancel these actions.
 </p>

 <div id="visualization"></div>
 <p></p>
 <div id="log"></div>

 <script type="text/javascript">
  // note that months are zero-based in the JavaScript Date object, so month 3 is April
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: new Date(2013, 3, 20)},
    {id: 2, content: 'item 2', start: new Date(2013, 3, 14)},
    {id: 3, content: 'item 3', start: new Date(2013, 3, 18)},
    {id: 4, content: 'item 4', start: new Date(2013, 3, 16), end: new Date(2013, 3, 19)},
    {id: 5, content: 'item 5', start: new Date(2013, 3, 25)},
    {id: 6, content: 'item 6', start: new Date(2013, 3, 27)}
  ]);

  var min = new Date(2013, 3, 1); // 1 april
  var max = new Date(2013, 3, 30, 23, 59, 59); // 30 april

  var container = document.getElementById('visualization');
  var options = {
    editable: true,

    onAdd: function (item, callback) {
      item.content = prompt('Enter text content for new item:', item.content);
      if (item.content != null) {
        callback(item); // send back adjusted new item
      }
      else {
        callback(null); // cancel item creation
      }
    },

    onMove: function (item, callback) {
      if (confirm('Do you really want to move the item to\n' +
          'start: ' + item.start + '\n' +
          'end: ' + item.end + '?')) {
        callback(item); // send back item as confirmation (can be changed)
      }
      else {
        callback(null); // cancel editing item
      }
    },

    onMoving: function (item, callback) {
      if (item.start < min) item.start = min;
      if (item.start > max) item.start = max;
      if (item.end   > max) item.end   = max;

      callback(item); // send back the (possibly) changed item
    },

    onUpdate: function (item, callback) {
      item.content = prompt('Edit items text:', item.content);
      if (item.content != null) {
        callback(item); // send back adjusted item
      }
      else {
        callback(null); // cancel updating the item
      }
    },

    onRemove: function (item, callback) {
      if (confirm('Remove item ' + item.content + '?')) {
        callback(item); // confirm deletion
      }
      else {
        callback(null); // cancel deletion
      }
    }
  };
  var timeline = new vis.Timeline(container, items, options);

  items.on('*', function (event, properties) {
    logEvent(event, properties);
  });

  function logEvent(event, properties) {
    var log = document.getElementById('log');
    var msg = document.createElement('div');
    msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
        'properties=' + JSON.stringify(properties);
    log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
  }

 </script>
 </body>
 </html>
--- a/examples/timeline/editing/updateDataOnEvent.html
+++ b/examples/timeline/editing/updateDataOnEvent.html
@ -0,0 +1,90 @@
 <html>
 <head>
  <title>Timeline | Update data on event</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" />
  <script src="../../googleAnalytics.js"></script>
 </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
  };

  // create a timeline
  var container = document.getElementById('mytimeline');
  timeline = new vis.Timeline(container, data, options);

  timeline.addCustomTime(new Date());

  // 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, {animation: false});

 </script>

 </body>
 </html>
--- a/examples/timeline/groups/groups.html
+++ b/examples/timeline/groups/groups.html
@ -0,0 +1,74 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Group example</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  This example demonstrate using groups. Note that a DataSet is used for both
  items and groups, allowing to dynamically add, update or remove both items
  and groups via the DataSet.
 </p>
 <div id="visualization"></div>

 <script>
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var groupCount = 3;
  var itemCount = 20;

  // create a data set with groups
  var names = ['John', 'Alston', 'Lee', 'Grant'];
  var groups = new vis.DataSet();
  for (var g = 0; g < groupCount; g++) {
    groups.add({id: g, content: names[g]});
  }

  // create a dataset with items
  var items = new vis.DataSet();
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var group = Math.floor(Math.random() * groupCount);
    items.add({
      id: i,
      group: group,
      content: 'item ' + i +
          ' <span style="color:#97B0F8;">(' + names[group] + ')</span>',
      start: start,
      type: 'box'
    });
  }

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    groupOrder: 'content'  // groupOrder can be a property name or a sorting function
  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);

 </script>
 </body>
 </html>
--- a/examples/timeline/groups/groupsOrdering.html
+++ b/examples/timeline/groups/groupsOrdering.html
@ -0,0 +1,68 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Groups ordering</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    #visualization {
      box-sizing: border-box;
      width: 100%;
      height: 300px;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  This example demonstrates custom ordering of groups.
 </p>
 <div id="visualization"></div>

 <script>
  var groups = new vis.DataSet([
    {id: 0, content: 'First', value: 1},
    {id: 1, content: 'Third', value: 3},
    {id: 2, content: 'Second', value: 2}
  ]);

  // create a dataset with items
  // note that months are zero-based in the JavaScript Date object, so month 3 is April
  var items = new vis.DataSet([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)}
  ]);

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    // option groupOrder can be a property name or a sort function
    // the sort function must compare two groups and return a value
    //     > 0 when a > b
    //     < 0 when a < b
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    },
    editable: true
  };

  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setGroups(groups);
  timeline.setItems(items);

 </script>
 </body>
 </html>
--- a/examples/timeline/groups/subgroups.html
+++ b/examples/timeline/groups/subgroups.html
@ -0,0 +1,76 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Background areas</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }

        .vis-item.vis-background.negative {
            background-color: rgba(255, 0, 0, 0.2);
        }
        .vis-item.vis-background.positive {
            background-color: rgba(105, 255, 98, 0.20);
        }
        .vis-item.vis-background.marker {
            border-left: 2px solid green;
        }
    </style>

    <script src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>This example shows the workings of the subgroups. Subgroups do not use stacking, and only work when stacking is disabled.</p>

 <div id="visualization"></div>

 <script>
    // create a dataset with items
    // we specify the type of the fields `start` and `end` here to be strings
    // containing an ISO date. The fields will be outputted as ISO dates
    // automatically getting data from the DataSet via items.get().
    var items = new vis.DataSet({
        type: { start: 'ISODate', end: 'ISODate' }
    });
    var groups = new vis.DataSet([{
        id: 'bar', content:'bar', subgroupOrder: function (a,b) {return a.subgroupOrder - b.subgroupOrder;}
    },{
        id: 'foo', content:'foo', subgroupOrder: 'subgroupOrder' // this group has no subgroups but this would be the other method to do the sorting.
    }]);
    // add items to the DataSet
    items.add([
        {id: 'A',start: '2014-01-20', end: '2014-01-22', type: 'background', group:'foo'},
        {id: 'B',start: '2014-01-22', end: '2014-01-23', type: 'background', group:'foo', className: 'negative'},
        {id: 0, content: 'no subgroup', start: '2014-01-20', end: '2014-01-22',group:'foo'},

        {id: 'SG_1_1',start: '2014-01-25', end: '2014-01-27', type: 'background', group:'bar', subgroup:'sg_1', subgroupOrder:0},
        {id: 'SG_1_2', start: '2014-01-26', end: '2014-01-27', type: 'background', className: 'positive',group:'bar', subgroup:'sg_1', subgroupOrder:0},
        {id: 1, content: 'subgroup0', start: '2014-01-23 12:00:00', end: '2014-01-26 12:00:00',group:'bar', subgroup:'sg_1', subgroupOrder:0},
        {id: 'SG_2_1', start: '2014-01-27', end: '2014-01-29', type: 'background', group:'bar', subgroup:'sg_2', subgroupOrder:1},
        {id: 'SG_2_2', start: '2014-01-27', end: '2014-01-28', type: 'background', className: 'negative',group:'bar', subgroup:'sg_2', subgroupOrder:1},
        {id: 2, content: 'subgroup1', start: '2014-01-27', end: '2014-01-29',group:'bar', subgroup:'sg_2', subgroupOrder:1},

        {id: 'background', start: '2014-01-29', end: '2014-01-30', type: 'background', className: 'negative',group:'bar'},
        {id: 'background_all', start: '2014-01-31', end: '2014-02-02', type: 'background', className: 'positive'},
    ]);

    var container = document.getElementById('visualization');
    var options = {
        // orientation:'top'
        start: '2014-01-10',
        end: '2014-02-10',
        editable: true,
        stack: false
    };

    var timeline = new vis.Timeline(container, items, groups, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/interaction/animateWindow.html
+++ b/examples/timeline/interaction/animateWindow.html
@ -0,0 +1,96 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Animate window</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
    input {
      margin: 2px 0;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>This example demonstrates functions to programmatically adjust the visible window of the Timeline.</p>

 <p>
  <input type="button" id="window1" value="Set window from 2014-01-01 to 2014-04-01"><br>
  <input type="button" id="window2" value="Set window from 2014-01-01 to 2014-04-01 without animation"><br>
  <input type="button" id="moveTo" value="Move to 2014-02-01"><br>
  <input type="button" id="fit" value="Fit all items"><br>
  <input type="button" id="select" value="Select & focus items 5 and 6"><br>
  <input type="button" id="focus1" value="Focus item 2"><br>
  <input type="button" id="focus2" value="Focus items 5 and 6 (slow and linear animation)"><br>
  <input type="button" id="focus3" value="Focus current selection"><br>
 </p>

 <div id="visualization"></div>

 <script>
  // create a dataset with items
  // we specify the type of the fields `start` and `end` here to be strings
  // containing an ISO date. The fields will be outputted as ISO dates
  // automatically getting data from the DataSet via items.get().
  var items = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  // add items to the DataSet
  items.add([
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    start: '2014-01-10',
    end: '2014-02-10',
    editable: true,
    showCurrentTime: true
  };

  var timeline = new vis.Timeline(container, items, options);

  document.getElementById('window1').onclick = function() {
    timeline.setWindow('2014-01-01', '2014-04-01');
  };
  document.getElementById('window2').onclick = function() {
    timeline.setWindow('2014-01-01', '2014-04-01', {animation: false});
  };
  document.getElementById('fit').onclick = function() {
    timeline.fit();
  };
  document.getElementById('select').onclick = function() {
    timeline.setSelection([5, 6], {
      focus: true
    });
  };
  document.getElementById('focus1').onclick = function() {
    timeline.focus(2);
  };
  document.getElementById('focus2').onclick = function() {
    timeline.focus([5, 6], {animation: {duration: 3000, easingFunction: 'linear'}}); // ms
  };
  document.getElementById('focus3').onclick = function() {
    var selection = timeline.getSelection();
    timeline.focus(selection);
  };
  document.getElementById('moveTo').onclick = function() {
    timeline.moveTo('2014-02-01');
  };

 </script>
 </body>
 </html>
--- a/examples/timeline/interaction/clickToUse.html
+++ b/examples/timeline/interaction/clickToUse.html
@ -0,0 +1,73 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Click to use</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
    #main {
      width: 728px;
      margin: 0 auto;
    }
    .container {
      margin: 10px;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="main">
  <h1>Timeline click to use</h1>
  <p>
    This example demonstrates how to use the <code>clickToUse</code> option: before you can scroll and drag in the timeline, you first have to click in the timeline to activate.
  </p>
 </div>

 <script>
  // create a dataset with items
  // we specify the type of the fields `start` and `end` here to be strings
  // containing an ISO date. The fields will be outputted as ISO dates
  // automatically getting data from the DataSet via items.get().
  var items = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  // add items to the DataSet
  items.add([
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  function createTimeline(main) {
    var main = document.getElementById('main');
    var container = document.createElement('div');
    container.className = 'container';
    main.appendChild(container);

    var options = {
      editable: true,
      clickToUse: true
    };

    return new vis.Timeline(container, items, options);
  }

  var timelines = [];
  for (var i = 0; i < 10; i++) {
    timelines.push(createTimeline());
  }


 </script>
 </body>
 </html>
--- a/examples/timeline/interaction/eventListeners.html
+++ b/examples/timeline/interaction/eventListeners.html
@ -0,0 +1,64 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Event listeners</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
  <p>
    This example listens for events <code>select</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline, and listens for changes in the DataSet (<code>add</code>, <code>update</code>, or <code>remove</code> items).
  </p>
  <div id="visualization"></div>
  <p></p>
  <div id="log"></div>

  <script type="text/javascript">
    var items = new vis.DataSet([
      {id: 1, content: 'item 1', start: '2013-04-20'},
      {id: 2, content: 'item 2', start: '2013-04-14'},
      {id: 3, content: 'item 3', start: '2013-04-18'},
      {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
      {id: 5, content: 'item 5', start: '2013-04-25'},
      {id: 6, content: 'item 6', start: '2013-04-27'}
    ]);

    var container = document.getElementById('visualization');
    var options = {
      editable: true
    };
    var timeline = new vis.Timeline(container, items, options);

    timeline.on('rangechange', function (properties) {
      logEvent('rangechange', properties);
    });
    timeline.on('rangechanged', function (properties) {
      logEvent('rangechanged', properties);
    });
    timeline.on('select', function (properties) {
      logEvent('select', properties);
    });

    items.on('*', function (event, properties) {
      logEvent(event, properties);
    });

    function logEvent(event, properties) {
      var log = document.getElementById('log');
      var msg = document.createElement('div');
      msg.innerHTML = 'event=' + JSON.stringify(event) + ', ' +
          'properties=' + JSON.stringify(properties);
      log.firstChild ? log.insertBefore(msg, log.firstChild) : log.appendChild(msg);
    }

  </script>
 </body>
 </html>
--- a/examples/timeline/interaction/limitMoveAndZoom.html
+++ b/examples/timeline/interaction/limitMoveAndZoom.html
@ -0,0 +1,53 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Limit move and zoom</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  The visible range is limited in this demo:
 </p>
 <ul>
  <li>minimum visible date is limited to 2012-01-01 using option <code>min</code></li>
  <li>maximum visible date is limited to 2013-01-01 (excluded) using option <code>max</code></li>
  <li>visible zoom interval is limited to a minimum of 24 hours using option <code>zoomMin</code></li>
  <li>visible zoom interval is limited to a maximum of about 3 months using option <code>zoomMax</code></li>
 </ul>
 <div id="visualization"></div>

 <script>
  // create some items
  // note that months are zero-based in the JavaScript Date object, so month 4 is May
  var items = new vis.DataSet([
    {'start': new Date(2012, 4, 25), 'content': 'First'},
    {'start': new Date(2012, 4, 26), 'content': 'Last'}
  ]);

  // create visualization
  var container = document.getElementById('visualization');
  var options = {
    height: '300px',
    min: new Date(2012, 0, 1),                // lower limit of visible range
    max: new Date(2013, 0, 1),                // upper limit of visible range
    zoomMin: 1000 * 60 * 60 * 24,             // one day in milliseconds
    zoomMax: 1000 * 60 * 60 * 24 * 31 * 3     // about three months in milliseconds
  };

  // create the timeline
  var timeline = new vis.Timeline(container);
  timeline.setOptions(options);
  timeline.setItems(items);
 </script>
 </body>
 </html>
--- a/examples/timeline/interaction/navigationMenu.html
+++ b/examples/timeline/interaction/navigationMenu.html
@ -0,0 +1,94 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | navigation menu</title>

    <style type="text/css">
        body, html, input {
            font-family: sans-serif;
            font-size: 12pt;
        }

        #visualization {
            position: relative;
        }

        .menu {
            position: absolute;
            top: 0;
            right: 0;
            margin: 10px;
            z-index: 9999;
        }
    </style>

    <script src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
    Create your own navigation menu by creating an overlay with buttons to zoom and move.
 </p>

 <div id="visualization">
    <div class="menu">
        <input type="button" id="zoomIn" value="Zoom in"/>
        <input type="button" id="zoomOut" value="Zoom out"/>
        <input type="button" id="moveLeft" value="Move left"/>
        <input type="button" id="moveRight" value="Move right"/>
    </div>
 </div>

 <script type="text/javascript">
    // create a timeline with some data
    var container = document.getElementById('visualization');
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2014-04-20'},
        {id: 2, content: 'item 2', start: '2014-04-14'},
        {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', type: 'point'}
    ]);
    var options = {};
    var timeline = new vis.Timeline(container, items, options);

    /**
     * Move the timeline a given percentage to left or right
     * @param {Number} percentage   For example 0.1 (left) or -0.1 (right)
     */
    function move (percentage) {
        var range = timeline.getWindow();
        var interval = range.end - range.start;

        timeline.setWindow({
            start: range.start.valueOf() - interval * percentage,
            end:   range.end.valueOf()   - interval * percentage
        });
    }

    /**
     * Zoom the timeline a given percentage in or out
     * @param {Number} percentage   For example 0.1 (zoom out) or -0.1 (zoom in)
     */
    function zoom (percentage) {
        var range = timeline.getWindow();
        var interval = range.end - range.start;

        timeline.setWindow({
            start: range.start.valueOf() - interval * percentage,
            end:   range.end.valueOf()   + interval * percentage
        });
    }

    // attach events to the navigation buttons
    document.getElementById('zoomIn').onclick    = function () { zoom(-0.2); };
    document.getElementById('zoomOut').onclick   = function () { zoom( 0.2); };
    document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
    document.getElementById('moveRight').onclick = function () { move(-0.2); };

 </script>
 </body>
 </html>
--- a/examples/timeline/interaction/setSelection.html
+++ b/examples/timeline/interaction/setSelection.html
@ -0,0 +1,66 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Select items</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>Set selection</h1>
 <p style="max-width: 600px;">
  Enter one or multiple ids of items, then press select to select the items. This demo uses the function <code>Timeline.setSelection(ids)</code>. Optionally, the window can be moved to the selected items.
 </p>

 <p>
  Select item(s): <input type="text" id="selection" value="5, 6"><input type="button" id="select" value="Select"><br>
  <label><input type="checkbox" id="focus" checked> Focus on selection</label>
 </p>
 <div id="visualization"></div>

 <script>
  // create a dataset with items
  // we specify the type of the fields `start` and `end` here to be strings
  // containing an ISO date. The fields will be outputted as ISO dates
  // automatically getting data from the DataSet via items.get().
  var items = new vis.DataSet({
    type: { start: 'ISODate', end: 'ISODate' }
  });

  // add items to the DataSet
  items.add([
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    editable: true
  };

  var timeline = new vis.Timeline(container, items, options);

  var selection = document.getElementById('selection');
  var select = document.getElementById('select');
  var focus = document.getElementById('focus');
  select.onclick = function () {
    var ids = selection.value.split(',').map(function (value) {
      return value.trim();
    });
    timeline.setSelection(ids, {focus: focus.checked});
  };
 </script>
 </body>
 </html>
--- a/examples/timeline/items/backgroundAreas.html
+++ b/examples/timeline/items/backgroundAreas.html
@ -0,0 +1,50 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Background areas</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }

    .vis-item.vis-background.negative {
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>This example demonstrates the item type "background", see "Period A" and "Period B". The background areas can be styled with css.</p>

 <div id="visualization"></div>

 <script>
  var items = new vis.DataSet([
    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    start: '2014-01-10',
    end: '2014-02-10',
    editable: true
  };

  var timeline = new vis.Timeline(container, items, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/items/backgroundAreasWithGroups.html
+++ b/examples/timeline/items/backgroundAreasWithGroups.html
@ -0,0 +1,57 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Background areas with groups</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>This example demonstrates the item type "background" when using groups.</p>
 <ul>
  <li>Background items having a group are displayed in that group</li>
  <li>Background items without a group are spread over the whole timeline</li>
  <li>Background items with a non-existing group are not displayed</li>
 </ul>
 <div id="visualization"></div>

 <script>
  var items = new vis.DataSet([
    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background', group: 1},
    {id: 'B', content: 'Period B', start: '2014-01-23', end: '2014-01-26', type: 'background', group: 2},
    {id: 'C', content: 'Period C', start: '2014-01-27', end: '2014-02-03', type: 'background'}, // no group
    {id: 'D', content: 'Period D', start: '2014-01-14', end: '2014-01-20', type: 'background', group: 'non-existing'},
    {id: 1, content: 'item 1<br>start', start: '2014-01-30', group: 1},
    {id: 2, content: 'item 2', start: '2014-01-18', group: 1},
    {id: 3, content: 'item 3', start: '2014-01-21', group: 2},
    {id: 4, content: 'item 4', start: '2014-01-17', end: '2014-01-21', group: 2},
    {id: 5, content: 'item 5', start: '2014-01-28', type:'point', group: 2},
    {id: 6, content: 'item 6', start: '2014-01-25', group: 2}
  ]);

  var groups = new vis.DataSet([
    {id: 1, content: 'Group 1'},
    {id: 2, content: 'Group 2'}
  ]);

  var container = document.getElementById('visualization');
  var options = {
    start: '2014-01-10',
    end: '2014-02-10',
    editable: true
  };

  var timeline = new vis.Timeline(container, items, groups, options);

 </script>
 </body>
 </html>
--- a/examples/timeline/items/htmlContents.html
+++ b/examples/timeline/items/htmlContents.html
@ -0,0 +1,75 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | HTML data</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
    span {
      color: red;
    }
    span.large {
      font-size: 200%;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  Load HTML contents in the Timeline in various ways.
 </p>
 <div id="visualization"></div>

 <script>
  // create a couple of HTML items in various ways

  var item1 = document.createElement('div');
  item1.appendChild(document.createTextNode('item 1'));

  var item2 = document.createElement('div');
  item2.innerHTML = '<span>item 2</span>';

  var item3 = document.createElement('div');
  var span3 = document.createElement('span');
  span3.className = 'large';
  span3.appendChild(document.createTextNode('item 3'));
  item3.appendChild(span3);

  var item4 = 'item <span class="large">4</span>';

  var item5 = document.createElement('div');
  item5.appendChild(document.createTextNode('item 5'));
  item5.appendChild(document.createElement('br'));
  var img5 = document.createElement('img');
  img5.src = 'img/attachment-icon.png';
  img5.style.width = '48px';
  img5.style.height = '48px';
  item5.appendChild(img5);

  var item6 = 'item6<br><img src="../resources/img/comments-icon.png" style="width: 48px; height: 48px;">';

  var item7 = 'item7<br><a href="http://visjs.org" target="_blank">click here</a>';

  // create data and a Timeline
  var container = document.getElementById('visualization');
  var items = new vis.DataSet([
    {id: 1, content: item1, start: '2013-04-20'},
    {id: 2, content: item2, start: '2013-04-14'},
    {id: 3, content: item3, start: '2013-04-18'},
    {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: item5, start: '2013-04-25'},
    {id: 6, content: item6, start: '2013-04-27'},
    {id: 7, content: item7, start: '2013-04-21'}
  ]);
  var options = {};
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/items/itemOrdering.html
+++ b/examples/timeline/items/itemOrdering.html
@ -0,0 +1,82 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Item ordering</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
    p {
      max-width: 800px;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>Item ordering</h1>
 <p>
  By default, the items displayed on the Timeline are unordered. They are
  stacked in the order that they where loaded. This means that way items are
  stacked can change while moving and zooming the Timeline.
 </p>
 <p>
  To display and stack the items in a controlled order, you can provide a
  custom sorting function via the configuration option <code>order</code>.
 </p>
 <p>
  WARNING: Custom ordering is only suitable for small amounts of items (up to a few
  hundred), as the Timeline has to render <i>all</i> items once on load to
  determine their width and height.
 </p>
 <p>
  <label for="ordering"><input type="checkbox" id="ordering" checked/> Apply custom ordering. Order items by their id.</label>
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet();
  var date = vis.moment('2015-03-02');
  for (var i = 0; i < 100; i++) {
    date.add(Math.round(Math.random() * 2), 'hour');
    items.add({
      id:      i,
      content: 'Item ' + i,
      start:   date.clone(),
      end:     date.clone().add(4, 'hour')
    });
  }

  function customOrder (a, b) {
    // order by id
    return a.id - b.id;
  }

  // Configuration for the Timeline
  var options = {
    order: customOrder,
    editable: true,
    margin: {item: 0}
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);

  var ordering = document.getElementById('ordering');
  ordering.onchange = function () {
    timeline.setOptions({
      order: ordering.checked ? customOrder: null
    });
  };
 </script>
 </body>
 </html>
--- a/examples/timeline/items/pointItems.html
+++ b/examples/timeline/items/pointItems.html
@ -0,0 +1,60 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Point items</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" />
  <script src="../../googleAnalytics.js"></script>
 </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');

  // note that months are zero-based in the JavaScript Date object
  var items = new vis.DataSet([
    {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',
    showMajorLabels: false
  };

  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/items/rangeOverflowItem.html
+++ b/examples/timeline/items/rangeOverflowItem.html
@ -0,0 +1,54 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Range overflow</title>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    .vis-item .vis-item-overflow {
      overflow: visible;
    }
  </style>

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
 </p>
 <pre>
 .vis-item .vis-item-overflow {
  overflow: visible;
 }
 </pre>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1 with overflowing text content', start: '2014-04-20', end: '2014-04-26'},
    {id: 2, content: 'item 2 with overflowing text content', start: '2014-05-14', end: '2014-05-18'},
    {id: 3, content: 'item 3 with overflowing text content', start: '2014-06-18', end: '2014-06-22'},
    {id: 4, content: 'item 4 with overflowing text content', start: '2014-06-16', end: '2014-06-17'},
    {id: 5, content: 'item 5 with overflowing text content', start: '2014-06-25', end: '2014-06-27'},
    {id: 6, content: 'item 6 with overflowing text content', start: '2014-09-27', end: '2014-09-28'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/other/customTimeBars.html
+++ b/examples/timeline/other/customTimeBars.html
@ -0,0 +1,89 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Show current and custom time bars</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  The Timeline has functions to add multiple custom time bars which can be dragged by the user.
 </p>
 <p>
  <input type="button" id="add" value="Add custom vertical bar">
  <input type="text" id="barId" placeholder="custom bar ID">
 </p>
 <p>
  <input type="button" id="remove" value="Remove custom vertical bar">
  <input type="text" id="barIndex" value="1" placeholder="custom bar ID">
 </p>
 <p>
  <code><strong>timechange</strong></code> event, index: <span id="timechangeBar"></span>, time: <span id="timechangeEvent"></span>
 </p>
 <p>
  <code><strong>timechanged</strong></code> event, index: <span id="timechangedBar"></span>, time: <span id="timechangedEvent"></span>
 </p><br>

 <div id="visualization"></div>

 <script type="text/javascript">
  var container = document.getElementById('visualization');
  var items = new vis.DataSet();
  var customDate = new Date();
  var options = {
    showCurrentTime: true,
    start: new Date(Date.now() - 1000 * 60 * 60 * 24),
    end: new Date(Date.now() + 1000 * 60 * 60 * 24 * 6)
  };
  var timeline = new vis.Timeline(container, items, options);

  // Set first time bar
  customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
  timeline.addCustomTime(customDate, '1');

  document.getElementById('add').onclick = function () {
    try {
      customDate = new Date(customDate.getFullYear(), customDate.getMonth(), customDate.getDate() + 1);
      var barId = document.getElementById('barId').value || undefined;
      timeline.addCustomTime(customDate, barId);
      document.getElementById('barId').value = '';
    }
    catch (err) {
      console.log(err);
      alert(err);
    }
  };

  document.getElementById('remove').onclick = function () {
    try {
      timeline.removeCustomTime(document.getElementById('barIndex').value);
      document.getElementById('barIndex').value = '';
    }
    catch (err) {
      console.log(err);
      alert(err);
    }
  };

  timeline.on('timechange', function (properties) {
    document.getElementById('timechangeBar').innerHTML = properties.id;
    document.getElementById('timechangeEvent').innerHTML = properties.time;
  });
  timeline.on('timechanged', function (properties) {
    document.getElementById('timechangedBar').innerHTML = properties.id;
    document.getElementById('timechangedEvent').innerHTML = properties.time;
  });

 </script>
 </body>
 </html>
--- a/examples/timeline/other/dataAttributes.html
+++ b/examples/timeline/other/dataAttributes.html
@ -0,0 +1,44 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  In this example all items get an HTML attribute attached: each item gets an attribute <code>data-id</code>, and items 1 and 6 have an additional attribute <code>data-tooltip</code>.
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {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', type: 'point', tooltip: 'This is item 6'}
  ]);

  // Configuration for the Timeline
  var options = {dataAttributes: ['tooltip', 'id']};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/other/dataAttributesAll.html
+++ b/examples/timeline/other/dataAttributesAll.html
@ -0,0 +1,44 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Basic demo</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  In this example all items get HTML attributes attached: each item gets <code>data-?</code> attributes for each field defined on the JS object.
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20', tooltip: 'This is item 1'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {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', type: 'point', tooltip: 'This is item 6'}
  ]);

  // Configuration for the Timeline
  var options = {dataAttributes: 'all'};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/other/groupsPerformance.html
+++ b/examples/timeline/other/groupsPerformance.html
@ -0,0 +1,110 @@
 <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>
  <script src="../../googleAnalytics.js"></script>
 </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>
--- a/examples/timeline/other/hidingPeriods.html
+++ b/examples/timeline/other/hidingPeriods.html
@ -0,0 +1,53 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | Hiding periods</title>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
    </style>

    <script src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis.css" rel="stylesheet" type="text/css"/>
    <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
    It's possible to hide (recurring) periods from the Timeline. The following example hides weekends and nights.
 </p>
 <div id="visualization"></div>
 <script type="text/javascript">
    // DOM element where the Timeline will be attached
    var container = document.getElementById('visualization');

    // Create a DataSet (allows two way data-binding)
    var items = new vis.DataSet([
        {id: 1, content: 'item 1', start: '2014-04-19'},
        {id: 2, content: 'item 2', start: '2014-04-21'},
        {id: 3, content: 'item 3', start: '2014-04-18'},
        {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-24'},
        {id: 5, content: 'item 5', start: '2014-04-26 12:00:00'},
        {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
    ]);

    // Configuration for the Timeline
    var options = {
        hiddenDates: [
            {start: '2014-03-21 00:00:00', end: '2014-03-28 00:00:00'},
            {start: '2013-10-26 00:00:00', end: '2013-10-28 00:00:00', repeat: 'weekly'}, // daily weekly monthly yearly
            {start: '2013-03-29 20:00:00', end: '2013-03-30 09:00:00', repeat: 'daily'} // daily weekly monthly yearly
        ],
        start: '2014-04-17',
        end: '2014-05-01',
        height: '200px',
        editable: true
    };

    // Create a Timeline
    var timeline = new vis.Timeline(container, items, options);
    timeline.addCustomTime("2014-04-18 13:00:00");
 </script>
 </body>
 </html>
--- a/examples/timeline/other/localization.html
+++ b/examples/timeline/other/localization.html
@ -0,0 +1,66 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Localization</title>

  <style type="text/css">
    body, html, select {
      font-family: sans-serif;
      font-size: 11pt;
    }
  </style>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  To localize the Timeline, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
 </p>

 <p>
  <label for="locale">Select a locale:</label>
  <select id="locale">
    <option value="en" selected>en</option>
    <option value="nl">nl</option>
  </select>
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  var DAY = 24 * 60 * 60 * 1000;

  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: new Date(new Date().valueOf() - DAY)},
    {id: 2, content: 'item 2', start: new Date(new Date().valueOf() + 2 * DAY)}
  ]);

  // Configuration for the Timeline
  var options = {
    showCurrentTime: true
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
  timeline.addCustomTime(new Date());

  timeline.setCustomTime(new Date(new Date().valueOf() + DAY));

  // update the locale when changing the select box value
  var select = document.getElementById('locale');
  select.onchange = function () {
    timeline.setOptions({
      locale: this.value
    });
  };
  select.onchange();
 </script>
 </body>
 </html>
--- a/examples/timeline/other/performance.html
+++ b/examples/timeline/other/performance.html
@ -0,0 +1,65 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | performance</title>

  <style>
    body, html {
      font-family: arial, sans-serif;
      font-size: 11pt;
    }
  </style>

  <!-- note: moment.js must be loaded before vis.js, else vis.js uses its embedded version of moment.js -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  Test the performance with a lot of items. The Timeline can load hundreds of thousands of items, but the performance of rendering them in the browser is limited. Rendering typically runs smooth for up to a few hundreds of items at once (you can set a <code>zoomMax</code> to prevent the user from zooming out too far).
 </p>
 <p>
    <label for="count">Number of items</label>
    <input id="count" value="10000">
    <input id="draw" type="button" value="draw">
 </p>
 <div id="visualization"></div>

 <script>
  // create a dataset with items
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var items = new vis.DataSet({
    type: {start: 'ISODate', end: 'ISODate' }
  });

  // create data
  function createData() {
    var count = parseInt(document.getElementById('count').value) || 100;
    var newData = [];
      var start = now;
    for (var i = 0; i < count; i++) {
      newData.push({id: i, content: 'item ' + i, start: start + 24*3600*1000 * i}); // much much faster than now.clone add days
    }
    items.clear();
    items.add(newData);
  }
  createData();

  document.getElementById('draw').onclick = createData;

  var container = document.getElementById('visualization');
  var options = {
    editable: true,
    start: now.clone().add(-3, 'days'),
    end: now.clone().add(11, 'days'),
    zoomMin: 1000 * 60 * 60 * 24,          // a day
    zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
  };

  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/other/requirejs/requirejs_example.html
+++ b/examples/timeline/other/requirejs/requirejs_example.html
@ -0,0 +1,17 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline require.js demo</title>

  <script data-main="scripts/main" src="scripts/require.js"></script>

  <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css" />
  <script src="../../../googleAnalytics.js"></script>
 </head>
 <body>
 <p>
  This example shows how to load the vis.js library using require.js.
 </p>
 <div id="visualization"></div>
 </body>
 </html>
--- a/examples/timeline/other/requirejs/scripts/main.js
+++ b/examples/timeline/other/requirejs/scripts/main.js
@ -0,0 +1,19 @@
 require.config({
  paths: {
    vis: '../../../../../dist/vis'
  }
 });

 require(['vis'], function (vis) {
  var container = document.getElementById('visualization');
  var data = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2013-04-20'},
    {id: 2, content: 'item 2', start: '2013-04-14'},
    {id: 3, content: 'item 3', start: '2013-04-18'},
    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
    {id: 5, content: 'item 5', start: '2013-04-25'},
    {id: 6, content: 'item 6', start: '2013-04-27'}
  ]);
  var options = {};
  var timeline = new vis.Timeline(container, data, options);
 });
--- a/examples/timeline/other/requirejs/scripts/require.js
+++ b/examples/timeline/other/requirejs/scripts/require.js
@ -0,0 +1,35 @@
 /*
 RequireJS 2.1.2 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
 Available via the MIT or new BSD license.
 see: http://github.com/jrburke/requirejs for details
 */
 var requirejs,require,define;
 (function(Y){function H(b){return"[object Function]"===L.call(b)}function I(b){return"[object Array]"===L.call(b)}function x(b,c){if(b){var d;for(d=0;d<b.length&&(!b[d]||!c(b[d],d,b));d+=1);}}function M(b,c){if(b){var d;for(d=b.length-1;-1<d&&(!b[d]||!c(b[d],d,b));d-=1);}}function r(b,c){return da.call(b,c)}function i(b,c){return r(b,c)&&b[c]}function E(b,c){for(var d in b)if(r(b,d)&&c(b[d],d))break}function Q(b,c,d,i){c&&E(c,function(c,h){if(d||!r(b,h))i&&"string"!==typeof c?(b[h]||(b[h]={}),Q(b[h],
 c,d,i)):b[h]=c});return b}function t(b,c){return function(){return c.apply(b,arguments)}}function Z(b){if(!b)return b;var c=Y;x(b.split("."),function(b){c=c[b]});return c}function J(b,c,d,i){c=Error(c+"\nhttp://requirejs.org/docs/errors.html#"+b);c.requireType=b;c.requireModules=i;d&&(c.originalError=d);return c}function ea(b){function c(a,g,v){var e,n,b,c,d,j,f,h=g&&g.split("/");e=h;var l=m.map,k=l&&l["*"];if(a&&"."===a.charAt(0))if(g){e=i(m.pkgs,g)?h=[g]:h.slice(0,h.length-1);g=a=e.concat(a.split("/"));
 for(e=0;g[e];e+=1)if(n=g[e],"."===n)g.splice(e,1),e-=1;else if(".."===n)if(1===e&&(".."===g[2]||".."===g[0]))break;else 0<e&&(g.splice(e-1,2),e-=2);e=i(m.pkgs,g=a[0]);a=a.join("/");e&&a===g+"/"+e.main&&(a=g)}else 0===a.indexOf("./")&&(a=a.substring(2));if(v&&(h||k)&&l){g=a.split("/");for(e=g.length;0<e;e-=1){b=g.slice(0,e).join("/");if(h)for(n=h.length;0<n;n-=1)if(v=i(l,h.slice(0,n).join("/")))if(v=i(v,b)){c=v;d=e;break}if(c)break;!j&&(k&&i(k,b))&&(j=i(k,b),f=e)}!c&&j&&(c=j,d=f);c&&(g.splice(0,d,
 c),a=g.join("/"))}return a}function d(a){z&&x(document.getElementsByTagName("script"),function(g){if(g.getAttribute("data-requiremodule")===a&&g.getAttribute("data-requirecontext")===j.contextName)return g.parentNode.removeChild(g),!0})}function y(a){var g=i(m.paths,a);if(g&&I(g)&&1<g.length)return d(a),g.shift(),j.require.undef(a),j.require([a]),!0}function f(a){var g,b=a?a.indexOf("!"):-1;-1<b&&(g=a.substring(0,b),a=a.substring(b+1,a.length));return[g,a]}function h(a,g,b,e){var n,u,d=null,h=g?g.name:
 null,l=a,m=!0,k="";a||(m=!1,a="_@r"+(L+=1));a=f(a);d=a[0];a=a[1];d&&(d=c(d,h,e),u=i(p,d));a&&(d?k=u&&u.normalize?u.normalize(a,function(a){return c(a,h,e)}):c(a,h,e):(k=c(a,h,e),a=f(k),d=a[0],k=a[1],b=!0,n=j.nameToUrl(k)));b=d&&!u&&!b?"_unnormalized"+(M+=1):"";return{prefix:d,name:k,parentMap:g,unnormalized:!!b,url:n,originalName:l,isDefine:m,id:(d?d+"!"+k:k)+b}}function q(a){var g=a.id,b=i(k,g);b||(b=k[g]=new j.Module(a));return b}function s(a,g,b){var e=a.id,n=i(k,e);if(r(p,e)&&(!n||n.defineEmitComplete))"defined"===
 g&&b(p[e]);else q(a).on(g,b)}function C(a,g){var b=a.requireModules,e=!1;if(g)g(a);else if(x(b,function(g){if(g=i(k,g))g.error=a,g.events.error&&(e=!0,g.emit("error",a))}),!e)l.onError(a)}function w(){R.length&&(fa.apply(F,[F.length-1,0].concat(R)),R=[])}function A(a,g,b){var e=a.map.id;a.error?a.emit("error",a.error):(g[e]=!0,x(a.depMaps,function(e,c){var d=e.id,h=i(k,d);h&&(!a.depMatched[c]&&!b[d])&&(i(g,d)?(a.defineDep(c,p[d]),a.check()):A(h,g,b))}),b[e]=!0)}function B(){var a,g,b,e,n=(b=1E3*m.waitSeconds)&&
 j.startTime+b<(new Date).getTime(),c=[],h=[],f=!1,l=!0;if(!T){T=!0;E(k,function(b){a=b.map;g=a.id;if(b.enabled&&(a.isDefine||h.push(b),!b.error))if(!b.inited&&n)y(g)?f=e=!0:(c.push(g),d(g));else if(!b.inited&&(b.fetched&&a.isDefine)&&(f=!0,!a.prefix))return l=!1});if(n&&c.length)return b=J("timeout","Load timeout for modules: "+c,null,c),b.contextName=j.contextName,C(b);l&&x(h,function(a){A(a,{},{})});if((!n||e)&&f)if((z||$)&&!U)U=setTimeout(function(){U=0;B()},50);T=!1}}function D(a){r(p,a[0])||
 q(h(a[0],null,!0)).init(a[1],a[2])}function G(a){var a=a.currentTarget||a.srcElement,b=j.onScriptLoad;a.detachEvent&&!V?a.detachEvent("onreadystatechange",b):a.removeEventListener("load",b,!1);b=j.onScriptError;(!a.detachEvent||V)&&a.removeEventListener("error",b,!1);return{node:a,id:a&&a.getAttribute("data-requiremodule")}}function K(){var a;for(w();F.length;){a=F.shift();if(null===a[0])return C(J("mismatch","Mismatched anonymous define() module: "+a[a.length-1]));D(a)}}var T,W,j,N,U,m={waitSeconds:7,
 baseUrl:"./",paths:{},pkgs:{},shim:{},map:{},config:{}},k={},X={},F=[],p={},S={},L=1,M=1;N={require:function(a){return a.require?a.require:a.require=j.makeRequire(a.map)},exports:function(a){a.usingExports=!0;if(a.map.isDefine)return a.exports?a.exports:a.exports=p[a.map.id]={}},module:function(a){return a.module?a.module:a.module={id:a.map.id,uri:a.map.url,config:function(){return m.config&&i(m.config,a.map.id)||{}},exports:p[a.map.id]}}};W=function(a){this.events=i(X,a.id)||{};this.map=a;this.shim=
 i(m.shim,a.id);this.depExports=[];this.depMaps=[];this.depMatched=[];this.pluginMaps={};this.depCount=0};W.prototype={init:function(a,b,c,e){e=e||{};if(!this.inited){this.factory=b;if(c)this.on("error",c);else this.events.error&&(c=t(this,function(a){this.emit("error",a)}));this.depMaps=a&&a.slice(0);this.errback=c;this.inited=!0;this.ignore=e.ignore;e.enabled||this.enabled?this.enable():this.check()}},defineDep:function(a,b){this.depMatched[a]||(this.depMatched[a]=!0,this.depCount-=1,this.depExports[a]=
 b)},fetch:function(){if(!this.fetched){this.fetched=!0;j.startTime=(new Date).getTime();var a=this.map;if(this.shim)j.makeRequire(this.map,{enableBuildCallback:!0})(this.shim.deps||[],t(this,function(){return a.prefix?this.callPlugin():this.load()}));else return a.prefix?this.callPlugin():this.load()}},load:function(){var a=this.map.url;S[a]||(S[a]=!0,j.load(this.map.id,a))},check:function(){if(this.enabled&&!this.enabling){var a,b,c=this.map.id;b=this.depExports;var e=this.exports,n=this.factory;
 if(this.inited)if(this.error)this.emit("error",this.error);else{if(!this.defining){this.defining=!0;if(1>this.depCount&&!this.defined){if(H(n)){if(this.events.error)try{e=j.execCb(c,n,b,e)}catch(d){a=d}else e=j.execCb(c,n,b,e);this.map.isDefine&&((b=this.module)&&void 0!==b.exports&&b.exports!==this.exports?e=b.exports:void 0===e&&this.usingExports&&(e=this.exports));if(a)return a.requireMap=this.map,a.requireModules=[this.map.id],a.requireType="define",C(this.error=a)}else e=n;this.exports=e;if(this.map.isDefine&&
 !this.ignore&&(p[c]=e,l.onResourceLoad))l.onResourceLoad(j,this.map,this.depMaps);delete k[c];this.defined=!0}this.defining=!1;this.defined&&!this.defineEmitted&&(this.defineEmitted=!0,this.emit("defined",this.exports),this.defineEmitComplete=!0)}}else this.fetch()}},callPlugin:function(){var a=this.map,b=a.id,d=h(a.prefix);this.depMaps.push(d);s(d,"defined",t(this,function(e){var n,d;d=this.map.name;var v=this.map.parentMap?this.map.parentMap.name:null,f=j.makeRequire(a.parentMap,{enableBuildCallback:!0,
 skipMap:!0});if(this.map.unnormalized){if(e.normalize&&(d=e.normalize(d,function(a){return c(a,v,!0)})||""),e=h(a.prefix+"!"+d,this.map.parentMap),s(e,"defined",t(this,function(a){this.init([],function(){return a},null,{enabled:!0,ignore:!0})})),d=i(k,e.id)){this.depMaps.push(e);if(this.events.error)d.on("error",t(this,function(a){this.emit("error",a)}));d.enable()}}else n=t(this,function(a){this.init([],function(){return a},null,{enabled:!0})}),n.error=t(this,function(a){this.inited=!0;this.error=
 a;a.requireModules=[b];E(k,function(a){0===a.map.id.indexOf(b+"_unnormalized")&&delete k[a.map.id]});C(a)}),n.fromText=t(this,function(e,c){var d=a.name,u=h(d),v=O;c&&(e=c);v&&(O=!1);q(u);r(m.config,b)&&(m.config[d]=m.config[b]);try{l.exec(e)}catch(k){throw Error("fromText eval for "+d+" failed: "+k);}v&&(O=!0);this.depMaps.push(u);j.completeLoad(d);f([d],n)}),e.load(a.name,f,n,m)}));j.enable(d,this);this.pluginMaps[d.id]=d},enable:function(){this.enabling=this.enabled=!0;x(this.depMaps,t(this,function(a,
 b){var c,e;if("string"===typeof a){a=h(a,this.map.isDefine?this.map:this.map.parentMap,!1,!this.skipMap);this.depMaps[b]=a;if(c=i(N,a.id)){this.depExports[b]=c(this);return}this.depCount+=1;s(a,"defined",t(this,function(a){this.defineDep(b,a);this.check()}));this.errback&&s(a,"error",this.errback)}c=a.id;e=k[c];!r(N,c)&&(e&&!e.enabled)&&j.enable(a,this)}));E(this.pluginMaps,t(this,function(a){var b=i(k,a.id);b&&!b.enabled&&j.enable(a,this)}));this.enabling=!1;this.check()},on:function(a,b){var c=
 this.events[a];c||(c=this.events[a]=[]);c.push(b)},emit:function(a,b){x(this.events[a],function(a){a(b)});"error"===a&&delete this.events[a]}};j={config:m,contextName:b,registry:k,defined:p,urlFetched:S,defQueue:F,Module:W,makeModuleMap:h,nextTick:l.nextTick,configure:function(a){a.baseUrl&&"/"!==a.baseUrl.charAt(a.baseUrl.length-1)&&(a.baseUrl+="/");var b=m.pkgs,c=m.shim,e={paths:!0,config:!0,map:!0};E(a,function(a,b){e[b]?"map"===b?Q(m[b],a,!0,!0):Q(m[b],a,!0):m[b]=a});a.shim&&(E(a.shim,function(a,
 b){I(a)&&(a={deps:a});if((a.exports||a.init)&&!a.exportsFn)a.exportsFn=j.makeShimExports(a);c[b]=a}),m.shim=c);a.packages&&(x(a.packages,function(a){a="string"===typeof a?{name:a}:a;b[a.name]={name:a.name,location:a.location||a.name,main:(a.main||"main").replace(ga,"").replace(aa,"")}}),m.pkgs=b);E(k,function(a,b){!a.inited&&!a.map.unnormalized&&(a.map=h(b))});if(a.deps||a.callback)j.require(a.deps||[],a.callback)},makeShimExports:function(a){return function(){var b;a.init&&(b=a.init.apply(Y,arguments));
 return b||a.exports&&Z(a.exports)}},makeRequire:function(a,d){function f(e,c,u){var i,m;d.enableBuildCallback&&(c&&H(c))&&(c.__requireJsBuild=!0);if("string"===typeof e){if(H(c))return C(J("requireargs","Invalid require call"),u);if(a&&r(N,e))return N[e](k[a.id]);if(l.get)return l.get(j,e,a);i=h(e,a,!1,!0);i=i.id;return!r(p,i)?C(J("notloaded",'Module name "'+i+'" has not been loaded yet for context: '+b+(a?"":". Use require([])"))):p[i]}K();j.nextTick(function(){K();m=q(h(null,a));m.skipMap=d.skipMap;
 m.init(e,c,u,{enabled:!0});B()});return f}d=d||{};Q(f,{isBrowser:z,toUrl:function(b){var d=b.lastIndexOf("."),g=null;-1!==d&&(g=b.substring(d,b.length),b=b.substring(0,d));return j.nameToUrl(c(b,a&&a.id,!0),g)},defined:function(b){return r(p,h(b,a,!1,!0).id)},specified:function(b){b=h(b,a,!1,!0).id;return r(p,b)||r(k,b)}});a||(f.undef=function(b){w();var c=h(b,a,!0),d=i(k,b);delete p[b];delete S[c.url];delete X[b];d&&(d.events.defined&&(X[b]=d.events),delete k[b])});return f},enable:function(a){i(k,
 a.id)&&q(a).enable()},completeLoad:function(a){var b,c,d=i(m.shim,a)||{},h=d.exports;for(w();F.length;){c=F.shift();if(null===c[0]){c[0]=a;if(b)break;b=!0}else c[0]===a&&(b=!0);D(c)}c=i(k,a);if(!b&&!r(p,a)&&c&&!c.inited){if(m.enforceDefine&&(!h||!Z(h)))return y(a)?void 0:C(J("nodefine","No define call for "+a,null,[a]));D([a,d.deps||[],d.exportsFn])}B()},nameToUrl:function(a,b){var c,d,h,f,j,k;if(l.jsExtRegExp.test(a))f=a+(b||"");else{c=m.paths;d=m.pkgs;f=a.split("/");for(j=f.length;0<j;j-=1)if(k=
 f.slice(0,j).join("/"),h=i(d,k),k=i(c,k)){I(k)&&(k=k[0]);f.splice(0,j,k);break}else if(h){c=a===h.name?h.location+"/"+h.main:h.location;f.splice(0,j,c);break}f=f.join("/");f+=b||(/\?/.test(f)?"":".js");f=("/"===f.charAt(0)||f.match(/^[\w\+\.\-]+:/)?"":m.baseUrl)+f}return m.urlArgs?f+((-1===f.indexOf("?")?"?":"&")+m.urlArgs):f},load:function(a,b){l.load(j,a,b)},execCb:function(a,b,c,d){return b.apply(d,c)},onScriptLoad:function(a){if("load"===a.type||ha.test((a.currentTarget||a.srcElement).readyState))P=
 null,a=G(a),j.completeLoad(a.id)},onScriptError:function(a){var b=G(a);if(!y(b.id))return C(J("scripterror","Script error",a,[b.id]))}};j.require=j.makeRequire();return j}var l,w,A,D,s,G,P,K,ba,ca,ia=/(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,ja=/[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g,aa=/\.js$/,ga=/^\.\//;w=Object.prototype;var L=w.toString,da=w.hasOwnProperty,fa=Array.prototype.splice,z=!!("undefined"!==typeof window&&navigator&&document),$=!z&&"undefined"!==typeof importScripts,ha=z&&
 "PLAYSTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/,V="undefined"!==typeof opera&&"[object Opera]"===opera.toString(),B={},q={},R=[],O=!1;if("undefined"===typeof define){if("undefined"!==typeof requirejs){if(H(requirejs))return;q=requirejs;requirejs=void 0}"undefined"!==typeof require&&!H(require)&&(q=require,require=void 0);l=requirejs=function(b,c,d,y){var f,h="_";!I(b)&&"string"!==typeof b&&(f=b,I(c)?(b=c,c=d,d=y):b=[]);f&&f.context&&(h=f.context);(y=i(B,h))||(y=B[h]=l.s.newContext(h));
 f&&y.configure(f);return y.require(b,c,d)};l.config=function(b){return l(b)};l.nextTick="undefined"!==typeof setTimeout?function(b){setTimeout(b,4)}:function(b){b()};require||(require=l);l.version="2.1.2";l.jsExtRegExp=/^\/|:|\?|\.js$/;l.isBrowser=z;w=l.s={contexts:B,newContext:ea};l({});x(["toUrl","undef","defined","specified"],function(b){l[b]=function(){var c=B._;return c.require[b].apply(c,arguments)}});if(z&&(A=w.head=document.getElementsByTagName("head")[0],D=document.getElementsByTagName("base")[0]))A=
 w.head=D.parentNode;l.onError=function(b){throw b;};l.load=function(b,c,d){var i=b&&b.config||{},f;if(z)return f=i.xhtml?document.createElementNS("http://www.w3.org/1999/xhtml","html:script"):document.createElement("script"),f.type=i.scriptType||"text/javascript",f.charset="utf-8",f.async=!0,f.setAttribute("data-requirecontext",b.contextName),f.setAttribute("data-requiremodule",c),f.attachEvent&&!(f.attachEvent.toString&&0>f.attachEvent.toString().indexOf("[native code"))&&!V?(O=!0,f.attachEvent("onreadystatechange",
 b.onScriptLoad)):(f.addEventListener("load",b.onScriptLoad,!1),f.addEventListener("error",b.onScriptError,!1)),f.src=d,K=f,D?A.insertBefore(f,D):A.appendChild(f),K=null,f;$&&(importScripts(d),b.completeLoad(c))};z&&M(document.getElementsByTagName("script"),function(b){A||(A=b.parentNode);if(s=b.getAttribute("data-main"))return q.baseUrl||(G=s.split("/"),ba=G.pop(),ca=G.length?G.join("/")+"/":"./",q.baseUrl=ca,s=ba),s=s.replace(aa,""),q.deps=q.deps?q.deps.concat(s):[s],!0});define=function(b,c,d){var i,
 f;"string"!==typeof b&&(d=c,c=b,b=null);I(c)||(d=c,c=[]);!c.length&&H(d)&&d.length&&(d.toString().replace(ia,"").replace(ja,function(b,d){c.push(d)}),c=(1===d.length?["require"]:["require","exports","module"]).concat(c));if(O){if(!(i=K))P&&"interactive"===P.readyState||M(document.getElementsByTagName("script"),function(b){if("interactive"===b.readyState)return P=b}),i=P;i&&(b||(b=i.getAttribute("data-requiremodule")),f=B[i.getAttribute("data-requirecontext")])}(f?f.defQueue:R).push([b,c,d])};define.amd=
 {jQuery:!0};l.exec=function(b){return eval(b)};l(q)}})(this);
--- a/examples/timeline/resources/data/basic.json
+++ b/examples/timeline/resources/data/basic.json
@ -0,0 +1,34 @@
 [
  {
    "id": 1,
    "content": "item 1",
    "start": "2014-04-20"
  },
  {
    "id": 2,
    "content": "item 2",
    "start": "2014-04-14"
  },
  {
    "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",
    "type": "point"
  }
 ]
--- a/examples/timeline/resources/data/wk2014.json
+++ b/examples/timeline/resources/data/wk2014.json
@ -0,0 +1,152 @@
 [
  {
    "player1": "Brazil",
    "abbr1": "br",
    "score1": "1 (3)",
    "player2": "Chile",
    "abbr2": "cl",
    "score2": "1 (2)",
    "description": "round of 16",
    "start": "2014-06-28 13:00"
  },
  {
    "player1": "Colombia",
    "abbr1": "co",
    "score1": 2,
    "player2": "Uruguay",
    "abbr2": "uy",
    "score2": 0,
    "description": "round of 16",
    "start": "2014-06-28 17:00"
  },
  {
    "player1": "Netherlands",
    "abbr1": "nl",
    "score1": 2,
    "player2": "Mexico",
    "abbr2": "mx",
    "score2": 1,
    "description": "round of 16",
    "start": "2014-06-29 13:00"
  },
  {
    "player1": "Costa Rica",
    "abbr1": "cr",
    "score1": "1 (5)",
    "player2": "Greece",
    "abbr2": "gr",
    "score2": "1 (3)",
    "description": "round of 16",
    "start": "2014-06-29 17:00"
  },
  {
    "player1": "France",
    "abbr1": "fr",
    "score1": 2,
    "player2": "Nigeria",
    "abbr2": "ng",
    "score2": 0,
    "description": "round of 16",
    "start": "2014-06-30 13:00"
  },
  {
    "player1": "Germany",
    "abbr1": "de",
    "score1": 2,
    "player2": "Algeria",
    "abbr2": "dz",
    "score2": 1,
    "description": "round of 16",
    "start": "2014-06-30 17:00"
  },
  {
    "player1": "Argentina",
    "abbr1": "ar",
    "score1": 1,
    "player2": "Switzerland",
    "abbr2": "ch",
    "score2": 0,
    "description": "round of 16",
    "start": "2014-07-01 13:00"
  },
  {
    "player1": "Belgium",
    "abbr1": "be",
    "score1": 2,
    "player2": "USA",
    "abbr2": "us",
    "score2": 1,
    "description": "round of 16",
    "start": "2014-07-01 17:00"
  },
  {
    "player1": "France",
    "abbr1": "fr",
    "score1": 0,
    "player2": "Germany",
    "abbr2": "de",
    "score2": 1,
    "description": "quarter-finals",
    "start": "2014-07-04 13:00"
  },
  {
    "player1": "Brazil",
    "abbr1": "br",
    "score1": 2,
    "player2": "Colombia",
    "abbr2": "co",
    "score2": 1,
    "description": "quarter-finals",
    "start": "2014-07-04 17:00"
  },
  {
    "player1": "Argentina",
    "abbr1": "ar",
    "score1": 1,
    "player2": "Belgium",
    "abbr2": "be",
    "score2": 0,
    "description": "quarter-finals",
    "start": "2014-07-05 13:00"
  },
  {
    "player1": "Netherlands",
    "abbr1": "nl",
    "score1": "0 (4)",
    "player2": "Costa Rica",
    "abbr2": "cr",
    "score2": "0 (3)",
    "description": "quarter-finals",
    "start": "2014-07-05 17:00"
  },
  {
    "player1": "Brazil",
    "abbr1": "br",
    "score1": 1,
    "player2": "Germany",
    "abbr2": "de",
    "score2": 7,
    "description": "semi-finals",
    "start": "2014-07-08 17:00"
  },
  {
    "player1": "Netherlands",
    "abbr1": "nl",
    "score1": "0 (2)",
    "player2": "Argentina",
    "abbr2": "ar",
    "score2": "0 (4)",
    "description": "semi-finals",
    "start": "2014-07-09 17:00"
  },
  {
    "player1": "Germany",
    "score1": 1,
    "abbr1": "de",
    "player2": "Argentina",
    "abbr2": "ar",
    "score2": 0,
    "description": "final",
    "start": "2014-07-13 16:00"
  }
 ]
--- a/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
+++ b/examples/timeline/resources/img/Hardware-Mobile-Phone-icon.png
--- a/examples/timeline/resources/img/attachment-icon.png
+++ b/examples/timeline/resources/img/attachment-icon.png
--- a/examples/timeline/resources/img/blog-post-edit-icon.png
+++ b/examples/timeline/resources/img/blog-post-edit-icon.png
--- a/examples/timeline/resources/img/comments-icon.png
+++ b/examples/timeline/resources/img/comments-icon.png
--- a/examples/timeline/resources/img/community-users-icon.png
+++ b/examples/timeline/resources/img/community-users-icon.png
--- a/examples/timeline/resources/img/license.txt
+++ b/examples/timeline/resources/img/license.txt
@ -0,0 +1,17 @@
 IMAGE LICENSES

 REFRESH CL
 http://www.iconarchive.com/category/system/refresh-cl-icons-by-tpdkdesign.net.html

 License: Free for non-commercial use.
 http://www.iconarchive.com/icons/tpdkdesign.net/refresh-cl/readme_eng.txt



 AESTHETICA 2
 http://www.iconarchive.com/category/application/aesthetica-2-icons-by-dryicons.html

 License: 
 DryIcons Terms of Use
 http://dryicons.com/terms/

--- a/examples/timeline/resources/img/license_aesthetica-2.txt
+++ b/examples/timeline/resources/img/license_aesthetica-2.txt
@ -0,0 +1,36 @@
 Aesthetica Icon Set, version 2.0
 http://dryicons.com/free-icons/preview/aesthetica-version-2/

 Information
 ----------------------

 This icon set contains 181 quality icons in the following formats:
 	Transparent PNG
 		16 x 16 px
 		24 x 24 px
 		32 x 32 px
 		48 x 48 px
 		128 x 128 px
 	


 Licensing
 ----------------------

 The usage of DryIcons' work (icons, icon sets and graphics) is limited to the terms of the "Free License" and "Commercial License" use.
 The DryIcons Free License means that you can use our icons, icon sets and graphics in any publicly accesible web site, web application or any form of presentation publicly accessible through the World Wide Web only according to the DryIcons Free License Terms and Conditions:

 * You must put a back link with credits to http://dryicons.com on every page where DryIcons' Works are used (example: Icons by http://dryicons.com);

 * You must include the correct back link to DryIcons website, which is: http://dryicons.com;

 * You must place the link on an easy-to-see, recognizable place, so there is no confusion about the Original Author of the Works (DryIcons);

 * When copying, or paraphrasing description text (or title) on one of the Works, you must make sure there are no spelling mistakes;

 * Do not try to take credit or imply in any way that you and not DryIcons is the Original Author of the Works (icons, icon sets and graphics).

 For a more detailed look at our Free License Agreement, please follow the link: http://dryicons.com/terms/#free-license


 The DryIcons Commercial License means that you can use our Free Icon Sets and Free Graphics without being obligated to put a back link to DryIcons.com for a certain fee. After you complete yourpayment transaction DryIcons grants you a Commercial License.
--- a/examples/timeline/resources/img/license_refresh-cl.txt
+++ b/examples/timeline/resources/img/license_refresh-cl.txt
@ -0,0 +1,26 @@
 RefreshCL Icon Pack by TPDK ©2005 www.tpdkdesign.net
 All rights reserved.
 version 1.0  2005/18/11


 Terms of use
 Theses icons are copyrighted, and for personal use only.
 Until now, COMMERCIAL USE is strictly forbidden.

 You cannot (non-exhaustive list) :
 - Use my icons in commercial website
 - Use my icons in a professional website layout
 - Sell or distribute those icons

 For any other use, such as :
 - using in non-commercial website
 - using icon in free software under GPL licence
 you need my authorization to use them. If you have my permission, you need to credit me in your terms and put a link to my website.
 I would not be responsible fo any damage you may encounter while using this product.
 For any question or request about the pack, please send me an email to tpdk@tpdkdesign.net.

 Special thanks to customxp's & crystalxp's teams and members for help and support ;)
 http://crystalxp.net
 http://customxp.net
 http://pngfactory.net
 visit my deviantart webpage : http://tpdkcasimir.deviantart.com/
--- a/examples/timeline/resources/img/mail-icon.png
+++ b/examples/timeline/resources/img/mail-icon.png
--- a/examples/timeline/resources/img/notes-edit-icon.png
+++ b/examples/timeline/resources/img/notes-edit-icon.png
--- a/examples/timeline/resources/img/product-icon.png
+++ b/examples/timeline/resources/img/product-icon.png
--- a/examples/timeline/resources/img/truck-icon.png
+++ b/examples/timeline/resources/img/truck-icon.png
--- a/examples/timeline/styling/axisOrientation.html
+++ b/examples/timeline/styling/axisOrientation.html
@ -0,0 +1,75 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Orientation</title>

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }
  </style>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  There are a number of orientation options for the time axis and the items.
 </p>

 <p>
  <label for="axis-orientation">Axis orientation</label>
  <select id="axis-orientation">
    <option value="both">both</option>
    <option value="bottom" selected>bottom</option>
    <option value="top">top</option>
  </select>
 </p>

 <p>
  <label for="item-orientation">Item orientation</label>
  <select id="item-orientation">
    <option value="bottom" selected>bottom</option>
    <option value="top">top</option>
  </select>
 </p>

 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'item 1', start: '2014-04-20'},
    {id: 2, content: 'item 2', start: '2014-04-14'},
    {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', type: 'point'}
  ]);

  // Configuration for the Timeline
  var options = {
    height: 250 // px
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);

  var axisOrientation = document.getElementById('axis-orientation');
  axisOrientation.onchange = function () {
    timeline.setOptions({ orientation: {axis: this.value} });
  };

  var itemOrientation = document.getElementById('item-orientation');
  itemOrientation.onchange = function () {
    timeline.setOptions({ orientation: {item: this.value} });
  };
 </script>
 </body>
 </html>
--- a/examples/timeline/styling/customCss.html
+++ b/examples/timeline/styling/customCss.html
@ -0,0 +1,100 @@
 <!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">
    body {
      font-family:  purisa, 'comic sans', cursive;
    }

    .vis-timeline {
      border: 2px solid purple;
      font-family:  purisa, 'comic sans', cursive;
      font-size: 12pt;
      background: #ffecea;
    }

    .vis-item {
      border-color: #F991A3;
      background-color: pink;
      font-size: 15pt;
      color: purple;
      box-shadow: 5px 5px 20px rgba(128,128,128, 0.5);
    }

    .vis-item,
    .vis-item.vis-line {
      border-width: 3px;
    }

    .vis-item.vis-dot {
      border-width: 10px;
      border-radius: 10px;
    }

    .vis-item.vis-selected {
      border-color: green;
      background-color: lightgreen;
    }

    .vis-time-axis .vis-text {
      color: purple;
      padding-top: 10px;
      padding-left: 10px;
    }

    .vis-time-axis .vis-text.vis-major {
      font-weight: bold;
    }

    .vis-time-axis .vis-grid.vis-minor {
      border-width: 2px;
      border-color: pink;
    }

    .vis-time-axis .vis-grid.vis-major {
      border-width: 2px;
      border-color: #F991A3;
    }
  </style>

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>

 <p>
  The style of the Timeline can be fully customized via CSS:
 </p>
 <div id="visualization"></div>

 <script type="text/javascript">
  var container = document.getElementById('visualization');

  // note that months are zero-based in the JavaScript Date object
  var items = new vis.DataSet([
    {start: new Date(2010,7,23), content: '<div>Conversation</div><img src="../resources/img/community-users-icon.png" style="width:32px; height:32px;">'},
    {start: new Date(2010,7,23,23,0,0), content: '<div>Mail from boss</div><img src="../resources/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="../resources/img/notes-edit-icon.png" style="width:48px; height:48px;">'},
    {start: new Date(2010,7,29), content: '<div>Phone call</div><img src="../resources/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="../resources/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>
--- a/examples/timeline/styling/gridStyling.html
+++ b/examples/timeline/styling/gridStyling.html
@ -0,0 +1,54 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Grid styling</title>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font-family: sans-serif;
    }

    /* alternating column backgrounds */
    .vis-time-axis .vis-grid.vis-odd {
      background: #f5f5f5;
    }

    /* gray background in weekends, white text color */
    .vis-time-axis .vis-grid.vis-saturday,
    .vis-time-axis .vis-grid.vis-sunday {
      background: gray;
    }
    .vis-time-axis .vis-text.vis-saturday,
    .vis-time-axis .vis-text.vis-sunday {
      color: white;
    }
  </style>
  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <div id="visualization"></div>

 <script type="text/javascript">
  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'custom', start: '2015-01-01'},
    {id: 2, content: 'styling', start: '2016-01-01'},
    {id: 3, content: 'of', start: '2017-01-01'},
    {id: 4, content: 'background', start: '2018-01-01'},
    {id: 5, content: 'grid', start: '2019-01-01'}
  ]);

  // Configuration for the Timeline
  var options = {};

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/styling/itemClassNames.html
+++ b/examples/timeline/styling/itemClassNames.html
@ -0,0 +1,117 @@
 <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-item.green {
      background-color: greenyellow;
      border-color: green;
    }

    /* create a custom sized dot at the bottom of the red item */
    .vis-item.red {
      background-color: red;
      border-color: darkred;
      color: white;
      font-family: monospace;
      box-shadow: 0 0 10px gray;
    }
    .vis-item.vis-dot.red {
      border-radius: 10px;
      border-width: 10px;
    }
    .vis-item.vis-line.red {
      border-width: 5px;
    }
    .vis-item.vis-box.red {
      border-radius: 0;
      border-width: 2px;
      font-size: 24pt;
      font-weight: bold;
    }

    .vis-item.orange {
      background-color: gold;
      border-color: orange;
    }
    .vis-item.vis-selected.orange {
      /* custom colors for selected orange items */
      background-color: orange;
      border-color: orangered;
    }

    .vis-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-item.vis-selected {
      background-color: white;
      border-color: black;
      color: black;
      box-shadow: 0 0 10px gray;
    }
  </style>

  <script src="../../googleAnalytics.js"></script>
 </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
  // note that months are zero-based in the JavaScript Date object
  var data = new vis.DataSet([
    {
      '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>
--- a/examples/timeline/styling/itemTemplates.html
+++ b/examples/timeline/styling/itemTemplates.html
@ -0,0 +1,251 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Templates</title>

  <!-- load handlebars for templating, and create a template -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
  <script id="item-template" type="text/x-handlebars-template">
    <table class="score">
      <tr>
        <td colspan="3" class="description">{{description}}</td>
      </tr>
      <tr>
        <td>{{player1}}</td>
        <th>{{score1}} - {{score2}}</th>
        <td>{{player2}}</td>
      </tr>
      <tr>
        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr1}}.png" width="31" height="20" alt="{{abbr1}}"></td>
        <th></th>
        <td><img src="http://flagpedia.net/data/flags/mini/{{abbr2}}.png" width="31" height="20" alt="{{abbr2}}"></td>
      </tr>
    </table>
  </script>

  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

  <style type="text/css">
    body, html {
      font-family: sans-serif;
      font-size: 10pt;
    }

    .vis.timeline .item {
      border-color: #acacac;
      background-color: #efefef;
      box-shadow: 5px 5px 10px rgba(128,128,128, 0.3);
    }

    table .description {
      font-style: italic;
    }

    #visualization {
      position: relative;
      overflow: hidden;
    }

    .logo {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .logo img {
      width: 120px;
    }
  </style>

  <script src="../../googleAnalytics.js"></script>
 </head>
 <body>
 <h1>WK 2014</h1>
 <p style="max-width: 600px;">
  This example demonstrates using templates to format item contents. In this case <a href="http://handlebarsjs.com">handlebars</a> is used as template engine, but you can just use your favorite template engine or manually craft HTML from the data of an item.
 </p>

 <div id="visualization">
  <div class="logo"><img src="http://upload.wikimedia.org/wikipedia/en/e/e8/WC-2014-Brasil.svg"></div>
 </div>

 <script type="text/javascript">
  // create a handlebars template
  var source   = document.getElementById('item-template').innerHTML;
  var template = Handlebars.compile(document.getElementById('item-template').innerHTML);

  // DOM element where the Timeline will be attached
  var container = document.getElementById('visualization');

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    // round of 16
    {
      player1: 'Brazil',
      abbr1: 'br',
      score1: '1 (3)',
      player2: 'Chile',
      abbr2: 'cl',
      score2: '1 (2)',
      description: 'round of 16',
      start: '2014-06-28 13:00'
    },
    {
      player1: 'Colombia',
      abbr1: 'co',
      score1: 2,
      player2: 'Uruguay',
      abbr2: 'uy',
      score2: 0,
      description: 'round of 16',
      start: '2014-06-28 17:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: 2,
      player2: 'Mexico',
      abbr2: 'mx',
      score2: 1,
      description: 'round of 16',
      start: '2014-06-29 13:00'
    },
    {
      player1: 'Costa Rica',
      abbr1: 'cr',
      score1: '1 (5)',
      player2: 'Greece',
      abbr2: 'gr',
      score2: '1 (3)',
      description: 'round of 16',
      start: '2014-06-29 17:00'
    },
    {
      player1: 'France',
      abbr1: 'fr',
      score1: 2,
      player2: 'Nigeria',
      abbr2: 'ng',
      score2: 0,
      description: 'round of 16',
      start: '2014-06-30 13:00'
    },
    {
      player1: 'Germany',
      abbr1: 'de',
      score1: 2,
      player2: 'Algeria',
      abbr2: 'dz',
      score2: 1,
      description: 'round of 16',
      start: '2014-06-30 17:00'
    },
    {
      player1: 'Argentina',
      abbr1: 'ar',
      score1: 1,
      player2: 'Switzerland',
      abbr2: 'ch',
      score2: 0,
      description: 'round of 16',
      start: '2014-07-01 13:00'
    },
    {
      player1: 'Belgium',
      abbr1: 'be',
      score1: 2,
      player2: 'USA',
      abbr2: 'us',
      score2: 1,
      description: 'round of 16',
      start: '2014-07-01 17:00'
    },

    // quarter-finals
    {
      player1: 'France',
      abbr1: 'fr',
      score1: 0,
      player2: 'Germany',
      abbr2: 'de',
      score2: 1,
      description: 'quarter-finals',
      start: '2014-07-04 13:00'
    },
    {
      player1: 'Brazil',
      abbr1: 'br',
      score1: 2,
      player2: 'Colombia',
      abbr2: 'co',
      score2: 1,
      description: 'quarter-finals',
      start: '2014-07-04 17:00'
    },
    {
      player1: 'Argentina',
      abbr1: 'ar',
      score1: 1,
      player2: 'Belgium',
      abbr2: 'be',
      score2: 0,
      description: 'quarter-finals',
      start: '2014-07-05 13:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: '0 (4)',
      player2: 'Costa Rica',
      abbr2: 'cr',
      score2: '0 (3)',
      description: 'quarter-finals',
      start: '2014-07-05 17:00'
    },

    // semi-finals
    {
      player1: 'Brazil',
      abbr1: 'br',
      score1: 1,
      player2: 'Germany',
      abbr2: 'de',
      score2: 7,
      description: 'semi-finals',
      start: '2014-07-08 17:00'
    },
    {
      player1: 'Netherlands',
      abbr1: 'nl',
      score1: '0 (2)',
      player2: 'Argentina',
      abbr2: 'ar',
      score2: '0 (4)',
      description: 'semi-finals',
      start: '2014-07-09 17:00'
    },

    // final
    {
      player1: 'Germany',
      score1: 1,
      abbr1: 'de',
      player2: 'Argentina',
      abbr2: 'ar',
      score2: 0,
      description: 'final',
      start: '2014-07-13 16:00'
    }
  ]);

  // Configuration for the Timeline
  var options = {
    // specify a template for the items
    template: template
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/network_examples.html
+++ b/network_examples.html
@ -23,34 +23,21 @@
    <link href="./css/examples.css" rel="stylesheet" type="text/css" />

    <style>
    </style>
    <script language="JavaScript">
        function loadVis() {
            var nodes = [
                {id: 1, label: 'Node 1'},
                {id: 2, label: 'Node 2'},
                {id: 3, label: 'Node 3'},
                {id: 4, label: 'Node 4'},
                {id: 5, label: 'Node 5'}
            ];

            // create an array with edges
            var edges = [
                {from: 1, to: 2},
                {from: 1, to: 3},
                {from: 2, to: 4},
                {from: 2, to: 5}
            ];

            // create a network
            var container = document.getElementById('visualization');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var network = new vis.Network(container, data, {clickToUse:true, stabilize:false});
        a.exampleLink:before {
            content:'';
            display:inline-block;
            margin-left:15px;
            width: 15px;
            height: 10px;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-left: 5px solid #688fba;
        }
    </script>
        a.exampleLink {
            display:block;
            text-decoration: underline;
        }
    </style>

 </head>
 <body onload="prettyPrint(); loadVis();">
@ -88,276 +75,64 @@
 </div>

 <div class="contentWrapper">
 <h1>Network Examples</h1><a class="btn btn-default" href="#allExamples" role="button">View all examples »</a>  <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>

 <div class="textHTMLContent">This small code example shows the easiest way to get a network up and running. This code has been taken from example 1. The working example is shown next to it. (click it to start interacting with it).</div>
 <pre class="prettyprint lang-html">
 &lt;div id="visualization"&gt;&lt;/div&gt;
 &lt;script type="text/javascript"&gt;
    // create an array with nodes
    var nodes = [
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ];
 <h1>Network Examples</h1>
    We have seperated the examples into groups to make it easier to navigate them. For the documentation, please click the button below: <br><br>
    <a class="btn btn-primary" href="./docs/network.html" role="button">View docs »</a>

    // create an array with edges
    var edges = [
        {from: 1, to: 2},
        {from: 1, to: 3},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ];

    // create a network
    var container = document.getElementById('visualization');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var network = new vis.Network(container, data, {});
 &lt;/script&gt;
 </pre>
 <div id="visualization"></div>

 <h2 id="allExamples">All examples</h2>
 <div class="container-fluid">
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/01_basic_usage.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/1.png" >
            <div class="exampleTitle">basic usage</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/02_random_nodes.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/2.png">
            <div class="exampleTitle">random nodes</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/03_images.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/3.png">
            <div class="exampleTitle">images</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/04_shapes.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/4.png">
            <div class="exampleTitle">shapes</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/05_social_network.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/5.png">
            <div class="exampleTitle">social network</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/06_groups.html">
            <img class="example img-responsive" src="./images/exampleScreenshots/network/6.png">
            <div class="exampleTitle">groups</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/07_selections.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/7.png">
            <div class="exampleTitle">selections</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/08_mobile_friendly.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/8.png">
            <div class="exampleTitle">mobile friendly</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/09_sizing.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/9.png">
            <div class="exampleTitle">sizing</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/10_multiline_text.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/10.png">
            <div class="exampleTitle">multiline text</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/11_custom_style.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/11.png">
            <div class="exampleTitle">custom style</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/12_scalable_images.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/12.png">
            <div class="exampleTitle">scalable images</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/13_dashed_lines.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/13.png">
            <div class="exampleTitle">dashed lines</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/14_dot_language.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/14.png">
            <div class="exampleTitle">dot language</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/15_dot_language_playground.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/15.png">
            <div class="exampleTitle">playground</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/16_dynamic_data.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/16.png">
            <div class="exampleTitle">dynamic data</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/17_network_info.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/17.png">
            <div class="exampleTitle">network info</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/18_fully_random_nodes_clustering.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/18.png">
            <div class="exampleTitle">fully random nodes clustering</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/19_scale_free_graph_clustering.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/19.png">
            <div class="exampleTitle">scale free graph clustering</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/20_navigation.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/20.png">
            <div class="exampleTitle">navigation</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/21_data_manipulation.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/21.png">
            <div class="exampleTitle">data manipulation</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/22_les_miserables.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/22.png">
            <div class="exampleTitle">les miserables</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/23_hierarchical_layout.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/23.png">
            <div class="exampleTitle">hierarchical layout</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/24_hierarchical_layout_userdefined.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/24.png">
            <div class="exampleTitle">hierarchical layout userdefined</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/25_physics_configuration.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/25.png">
            <div class="exampleTitle">physics configuration</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/26_staticSmoothCurves.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/26.png">
            <div class="exampleTitle">static smooth curves</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/27_world_cup_network.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/27.png">
            <div class="exampleTitle">world cup network</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/28_world_cup_network_performance.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/28.png">
            <div class="exampleTitle">world cup network performance</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/29_neighbourhood_highlight.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/29.png">
            <div class="exampleTitle">neighborhood highlight</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/30_importing_from_gephi.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/30.png">
            <div class="exampleTitle">importing from gephi</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/31_localization.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/31.png">
            <div class="exampleTitle">localization</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/32_hierarchicaLayoutMethods.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/32.png">
            <div class="exampleTitle">hierarchical layout methods</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/33_animation.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/33.png">
            <div class="exampleTitle">animation</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/34_circular_images.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/34.png">
            <div class="exampleTitle">circular images</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/35_label_stroke.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/35.png">
            <div class="exampleTitle">label stroke</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/36_HTML_in_Nodes.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/36.png">
            <div class="exampleTitle">HTML in nodes!</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/37_label_alignment.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/37.png">
            <div class="exampleTitle">labelAlignment for edges</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/38_node_as_icon.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/38.png">
            <div class="exampleTitle">node as icon</div>
        </a>
    </div>
    <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/network/graphviz/graphviz_gallery.html">
            <img class="example img-responsive"  src="./images/exampleScreenshots/network/graphviz.png">
            <div class="exampleTitle">graphviz examples</div>
        </a>
    </div>
 <h3>node styles</h3>
    <a class='exampleLink' href="examples/network/nodeStyles/colors.html">colors</a>
    <a class='exampleLink' href="examples/network/nodeStyles/groups.html">groups</a>
    <a class='exampleLink' href="examples/network/nodeStyles/customGroups.html">custom groups</a>
    <a class='exampleLink' href="examples/network/nodeStyles/HTML_in_Nodes.html">HTML in nodes</a>
    <a class='exampleLink' href="examples/network/nodeStyles/icons.html">icons (Fontawesome and Ionicons)</a>
    <a class='exampleLink' href="examples/network/nodeStyles/images.html">images</a>
    <a class='exampleLink' href="examples/network/nodeStyles/circular_images.html">circular images</a>
    <a class='exampleLink' href="examples/network/nodeStyles/shadows.html">node shadows</a>
    <a class='exampleLink' href="examples/network/nodeStyles/shapes.html">node shapes</a>
 <h3>edge styles</h3>
    <a class='exampleLink' href="examples/network/edgeStyles/arrows.html">arrows (also combined with dashes)</a>
    <a class='exampleLink' href="examples/network/edgeStyles/colors.html">different colors</a>
    <a class='exampleLink' href="examples/network/edgeStyles/dashes.html">dashes</a>
    <a class='exampleLink' href="examples/network/edgeStyles/smooth.html">smooth curves</a>
    <a class='exampleLink' href="examples/network/edgeStyles/smoothWorldCup.html">smooth curves in action</a>
 <h3>labels</h3>
    <a class='exampleLink' href="examples/network/labels/label_alignment.html">label alignment (for edges only)</a>
    <a class='exampleLink' href="examples/network/labels/label_background.html">label background</a>
    <a class='exampleLink' href="examples/network/labels/label_color_and_size.html">colors and sizes</a>
    <a class='exampleLink' href="examples/network/labels/label_stroke.html">label stroke</a>
    <a class='exampleLink' href="examples/network/labels/multiline_text.html">multiline text</a>
 <h3>layout</h3>
    <a class='exampleLink' href="examples/network/layout/hierarchical_layout.html">hierarchical layout</a>
    <a class='exampleLink' href="examples/network/layout/hierarchical_layout_methods.html">hierarchical layout - different methods</a>
    <a class='exampleLink' href="examples/network/layout/hierarchical_layout_userdefined.html">hierarchical layout - user defined</a>
    <a class='exampleLink' href="examples/network/layout/randomSeed.html">set the random seed so every network will be the same</a>
 <h3>events</h3>
    <a class='exampleLink' href="examples/network/events/interactionEvents.html">interaction events, click, rightclick, drag etc.</a>
    <a class='exampleLink' href="examples/network/events/physicsEvents.html">physics events, stabilization etc.</a>
    <a class='exampleLink' href="examples/network/events/renderEvents.html">rendering events, use to draw custom items on the canvas.</a>
 <h3>dynamic data</h3>
    <a class='exampleLink' href="examples/network/data/datasets.html">dataset for dynamic data</a>
    <a class='exampleLink' href="examples/network/data/dynamic_data.html">dynamic data, playground</a>
    <a class='exampleLink' href="examples/network/data/importing_from_gephi.html">importing data from gephi</a>
    <a class='exampleLink' href="examples/network/data/scaling_custom.html">scaling the nodes with the value.</a>
    <a class='exampleLink' href="examples/network/data/scaling_nodes_edges.html">scaling the nodes and edges with the value.</a>
    <a class='exampleLink' href="examples/network/data/scaling_nodes_edges_labels.html">scaling the nodes, edges and labels with the value.</a>
 <h3>physics</h3>
    <a class='exampleLink' href="examples/network/physics/physicsConfiguration.html">physics configuration</a>
 <h3>example applications</h3>
    <a class='exampleLink' href="examples/network/exampleApplications/les_miserables.html">les miserables cast</a>
    <a class='exampleLink' href="examples/network/exampleApplications/loadingBar.html">loading bar during stabilization</a>
    <a class='exampleLink' href="examples/network/exampleApplications/neighbourhood_highlight.html">neighbourhood heighlight</a>
    <a class='exampleLink' href="examples/network/exampleApplications/nodeLegend.html">using nodes as a legend</a>
    <a class='exampleLink' href="examples/network/exampleApplications/worldCupPerformance.html">performance test with the worldcup data</a>
 <h3>other</h3>
    <a class='exampleLink' href="examples/network/other/animationShowcase.html">animation showcase</a>
    <a class='exampleLink' href="examples/network/other/clustering.html">clustering possibilities</a>
    <a class='exampleLink' href="examples/network/other/clusteringByZoom.html">clustering by zoom</a>
    <a class='exampleLink' href="examples/network/other/configuration.html">dynamic configuration</a>
    <a class='exampleLink' href="examples/network/other/manipulation.html">manipulation interface and localization</a>
    <a class='exampleLink' href="examples/network/other/navigation.html">navigation buttons and keyboard shortcuts</a>
    <a class='exampleLink' href="examples/network/other/performance.html">performance test with scale free network, customize the amount of nodes</a>
 </div>
 <br />
 <br />