Feat: Improving timeline example overview (#2526)

* Added playground for timline examples * improving timeline examples appearance * remove unnecesary links + added missed exmples
7 years ago · 81d958c161
--- a/css/examples.css
+++ b/css/examples.css
@ -36,7 +36,6 @@ div.textHTMLContent {
    width:800px;
 }


 img.example {
    border:1px solid #dddddd;
    width:250px;
@ -44,6 +43,16 @@ img.example {
    border-radius:10px;
    margin-top:10px;
 }

 img.timeline_example {
    border: 1px solid #dddddd;
    border-radius: 10px;
    margin-top: 10px;
    max-height: 150px;
    width: 100%;
    max-width: 250px;
 }

 div.exampleTitle {
    position:relative;
    top:-7px;
--- a/examples/timeline/editing/individualEditableItems.html
+++ b/examples/timeline/editing/individualEditableItems.html
@ -34,16 +34,21 @@
 <div id="visualization"></div>

 <script>
  // create groups to highligh groupUpdate
  var groups = new vis.DataSet([
    {id: 1, content: 'Group 1'},
    {id: 2, content: 'Group 2'}
  ]);
  // create a DataSet with items
  var items = new vis.DataSet([
    {id: 1, content: 'Editable', editable: true, start: '2010-08-23'},
    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00'},
    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00'},
    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02'},
    {id: 5, content: 'Editable', editable: true, start: '2010-08-28'},
    {id: 6, content: 'Read-only', editable: false, start: '2010-08-29'},
    {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03'},
    {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00'}
    {id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
    {id: 5, content: 'Edit Time Only', editable: { updateTime: true }, start: '2010-08-28', group: 1},
    {id: 6, content: 'Edit Group Only', editable: { updateGroup: true }, start: '2010-08-29', group: 2},
    {id: 7, content: 'Remove Only', editable: { remove: true }, start: '2010-08-31', end: '2010-09-03', group: 1},
    {id: 8, content: 'Default', start: '2010-09-04T12:00:00', group: 2}
  ]);

  var container = document.getElementById('visualization');
@ -51,7 +56,7 @@
    editable: true   // default for all items
  };

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

 </script>
 </body>
--- a/examples/timeline/editing/overrideEditingItems.html
+++ b/examples/timeline/editing/overrideEditingItems.html
@ -0,0 +1,99 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Individual editable items</title>

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

    div.vis-editable,
    div.vis-editable.vis-selected {
      /* custom styling for editable items... */
    }

    div.vis-readonly,
    div.vis-readonly.vis-selected {
      /* custom styling for readonly items... */
      background-color: #ff4500;
      border-color: red;
      color: white;
    }
  </style>

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

 <p>Specify individual items to be editable or readonly. Toggle edit options and override behavior from timeline.editable</p>

 <div id="visualization"></div>
 <p>
 <form>
 Timeline.editable = {</br>
 <input name="add" type="checkbox" checked>add</input></br>
 <input name="remove" type="checkbox" checked>remove</input></br>
 <input name="updateGroup" type="checkbox">updateGroup</input></br>
 <input name="updateTime" type="checkbox" checked>updateTime</input><br>
 <input name="overrideItems" type="checkbox">overrideItems</input><br>
 }
 </form>
 </p>
 <script>
  // create a DataSet with items
  var items = new vis.DataSet([
    {id: 1, content: 'Editable', editable: true, start: '2010-08-23', group: 1},
    {id: 2, content: 'Editable', editable: true, start: '2010-08-23T23:00:00', group: 2},
    {id: 3, content: 'Read-only', editable: false, start: '2010-08-24T16:00:00', group: 1},
    {id: 4, content: 'Read-only', editable: false, start: '2010-08-26', end: '2010-09-02', group: 2},
    {id: 5, content: 'Editable', editable: true, start: '2010-08-28', group: 1},
    {id: 6, content: 'Read-only', editable: false, start: '2010-08-29', group: 2},
    {id: 7, content: 'Editable', editable: true, start: '2010-08-31', end: '2010-09-03', group: 1},
    {id: 8, content: 'Read-only', editable: false, start: '2010-09-04T12:00:00', group: 2},
    {id: 9, content: 'Default', start: '2010-09-04', group: 1},
    {id: 10, content: 'Default', start: '2010-08-24', group: 2}
  ]);

  var groups = [
    {
      id: 1,
      content: 'group 1'
    },
    {
      id: 2,
      content: 'group 2'
    }
  ]

  var container = document.getElementById('visualization');
  var options = {
    editable: {
      add: true,
      remove: true,
      updateGroup: false,
      updateTime: true,
      overrideItems: false
    }  // default for all items
  };

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

  var updateEditOptions = function(e){
    var changedOption = e.target.name;
    var options = { editable: { } };
    options.editable[changedOption] = e.target.checked;
    timeline.setOptions(options);
  };

  var cbs = document.getElementsByTagName("input");
  [].forEach.call(cbs, function(cb){
    cb.onchange = updateEditOptions;
  });

 </script>
 </body>
 </html>
--- a/examples/timeline/groups/groupsEditable.html
+++ b/examples/timeline/groups/groupsEditable.html
@ -28,7 +28,8 @@
 </head>
 <body>
 <p>
  This example demonstrates editable groups (for now only reordering).
  This example demonstrates editable groups (reordering and hiding).
  <button onclick="showAllGroups()">Restore Hidden</button>
 </p>
 <div id="visualization"></div>

@ -55,7 +56,14 @@
 	{"content": "WEC", "id": "WEC", "value": 18, className:'endurance'},
 	{"content": "GP2", "id": "GP2", "value": 19, className:'openwheel'}
  ]);
  

  // function to make all groups visible again
  function showAllGroups(){
    groups.forEach(function(group){
      groups.update({id: group.id, visible: true});
    })
  };

  // 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([
@ -299,6 +307,20 @@
    	a.value = b.value;
    	b.value = v;
    },
    groupTemplate: function(group){
      var container = document.createElement('div');
      var label = document.createElement('span');
      label.innerHTML = group.content + ' ';
      container.insertAdjacentElement('afterBegin',label);
      var hide = document.createElement('button');
      hide.innerHTML = 'hide';
      hide.style.fontSize = 'small';
      hide.addEventListener('click',function(){
        groups.update({id: group.id, visible: false});
      });
      container.insertAdjacentElement('beforeEnd',hide);
      return container;
    },
    orientation: 'both',
    editable: true,
    groupEditable: true,
--- a/examples/timeline/groups/nestedGroups.html
+++ b/examples/timeline/groups/nestedGroups.html
@ -0,0 +1,113 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Nested Groups 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.min.css" rel="stylesheet" type="text/css" />
 </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 itemCount = 60;

  // create a data set with groups
  var groups = new vis.DataSet();

  groups.add([
    {
      id: 1,
      content: "Lee",
      nestedGroups: [11,12,13]
    },
    {
      id: 2,
      content: "invisible group",
      visible: false
    },
    {
      id: 3,
      content: "John",
      nestedGroups: [14],
      showNested: false
    },
    {
      id: 4,
      content: "Alson"
    },

  ]);

  groups.add([
    {
      id: 11,
      content: "cook",
    },
    {
      id: 12,
      content: "shop",
    },
    {
      id: 13,
      content: "clean house",
    },
    {
      id: 14,
      content: "wash dishes",
    }
  ]);

  // create a dataset with items
  var items = new vis.DataSet();
  var groupIds = groups.getIds();
    var types = [ 'box', 'point', 'range', 'background']
  for (var i = 0; i < itemCount; i++) {
    var start = now.clone().add(Math.random() * 200, 'hours');
    var end = start.clone().add(2, 'hours');
    var randomGroupId = groupIds[Math.floor(Math.random() * groupIds.length)];
    var type = types[Math.floor(4 * Math.random())]

    items.add({
      id: i,
      group: randomGroupId,
      content: 'item ' + i,
      start: start,
      end: end,
      type: type
    });
  }

  // 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, items, groups, options);

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

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

    <style>
        body, html {
@ -19,14 +22,11 @@
            border-left: 2px solid green;
        }
    </style>

    <script src="../../../dist/vis.js"></script>
    <link href="../../../dist/vis-timeline-graph2d.min.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>
 <button onclick="toggleStackSubgroups()">Toggle stackSubgroups</button>

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

@ -66,11 +66,16 @@
        start: '2014-01-10',
        end: '2014-02-10',
        editable: true,
        stack: false
        stack: false,
        stackSubgroups: true
    };

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

    function toggleStackSubgroups() {
        options.stackSubgroups = !options.stackSubgroups;
        timeline.setOptions(options);
    }
 </script>
 </body>
 </html>
--- a/examples/timeline/groups/verticalItemsHide.html
+++ b/examples/timeline/groups/verticalItemsHide.html
@ -106,12 +106,6 @@
    maxHeight: 400,
    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'
  };


--- a/examples/timeline/interaction/eventListeners.html
+++ b/examples/timeline/interaction/eventListeners.html
@ -15,7 +15,7 @@
 </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).
    This example listens for events <code>select</code>, <code>click</code>, <code>doubleClick</code>, <code>rangechange</code>, and <code>rangechanged</code> of the Timeline (other possible events: <code>mouseDown</code>, <code>mouseUp</code>, <code>mouseOver</code>, <code>mouseMove</code>), 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>
@ -57,6 +57,28 @@
      setHoveredItem('none');
    });

    timeline.on('click', function (properties) {
      logEvent('click', properties);
    });

    timeline.on('doubleClick', function (properties) {
      logEvent('doubleClick', properties);
    });

    timeline.on('contextmenu', function (properties) {
      logEvent('contextmenu', properties);
    });

    // other possible events:

    // timeline.on('mouseOver', function (properties) {
    //   logEvent('mouseOver', properties);
    // });

    // timeline.on("mouseMove", function(properties) {
    //   logEvent('mouseMove', properties);
    // });

    items.on('*', function (event, properties) {
      logEvent(event, properties);
    });
--- a/examples/timeline/interaction/rollingMode.html
+++ b/examples/timeline/interaction/rollingMode.html
@ -0,0 +1,45 @@
 <html>
 <head>
  <title>Timeline | rolling mode Option</title>
  <meta charset="utf-8">
  <script src="../../../dist/vis.js"></script>
  <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />

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

 <body>

 <h1><i id="icon">&#9974;</i>Timeline rolling mode option</h1>

 <div id="mytimeline"></div>


 <script>
  var container = document.getElementById('mytimeline');

  var items = new vis.DataSet();

  for (var i = 10; i >= 0; i--) { 
    items.add({
        id: i,
        content: "item " + i,
        start: new Date(new Date().getTime() + i*100000)
    });
  }

  // Configuration for the Timeline
  // specify options
  var options = {
    start: new Date(),
    end: new Date(new Date().getTime() + 1000000),
    rollingMode: true
  };

  // create a Timeline
  timeline = new vis.Timeline(container, items, null, options);

 </script>

 </body>
 </html>
--- a/examples/timeline/items/expectedVsActualTimesItems.html
+++ b/examples/timeline/items/expectedVsActualTimesItems.html
@ -0,0 +1,111 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | expected vs actual times items</title>

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

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
        .vis-item.expected {
            background-color: transparent;
            border-style: dashed!important;
            z-index: 0;
        }
        .vis-item.vis-selected {
            opacity: 0.6;
        }
        .vis-item.vis-background.marker {
            border-left: 2px solid green;
        }
    </style>
 </head>
 <body>

 <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: 'group1', 
            content:'group1'
        }
    ]);

    // add items to the DataSet
    items.add([
        // group 1
        {
            id: 'background1',
            start: '2014-01-21', 
            end: '2014-01-22', 
            type: 'background', 
            group:'group1'
        },

        // subgroup 1
        {
            id: 1, 
            content: 'item 1 (expected time)', 
            className: 'expected',
            start: '2014-01-23 12:00:00', 
            end: '2014-01-26 12:00:00',
            group:'group1', 
            subgroup:'sg_1'
        },
        {
            id: 2, 
            content: 'item 1 (actual time)', 
            start: '2014-01-24 12:00:00', 
            end: '2014-01-27 12:00:00',
            group:'group1', 
            subgroup:'sg_1'
        },

        // subgroup 2
        {
            id: 3, 
            content: 'item 2 (expected time)', 
            className: 'expected',
            start: '2014-01-13 12:00:00', 
            end: '2014-01-16 12:00:00',
            group:'group1', 
            subgroup:'sg_2'
        },
         {
            id: 4, 
            content: 'item 2 (actual time)', 
            start: '2014-01-14 12:00:00', 
            end: '2014-01-17 12:00:00',
            group:'group1', 
            subgroup:'sg_2'
        }
    ]);

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

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

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

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

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

 <h1>Tooltips</h1>

 <p>
  Setting the tooltip in various ways.
 </p>

 <div id="tooltips"></div>

 <script type="text/javascript">
  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, content: 'Item 1', start: '2016-01-01', end: '2016-01-02',
      title: 'Normal text'},
    {id: 2, content: 'Item 2', start: '2016-01-02', title: '<b>Bold</b>'},
    {id: 3, content: 'Item 3', start: '2016-01-03', type: 'point',
      title: '<span style="color: red">Red</span> text'},
    {id: 4, content: '<h1>HTML</h1> Item', start: '2016-01-03', end: '2016-01-04',
      title: '<table border="1"><tr><td>Cell 1</td><td>Cell 2</td></tr></table>'}
  ]);

  // Options
  var options = {};

  // Timeline object
  var timelineTooltips = new vis.Timeline(document.getElementById('tooltips'),
      items, options
  );
 </script>

 </body>
 </html>
--- a/examples/timeline/items/visibleFrameTemplateContent.html
+++ b/examples/timeline/items/visibleFrameTemplateContent.html
@ -0,0 +1,67 @@
 <!DOCTYPE HTML>
 <html>
 <head>
  <title>Timeline | Dynamic Content</title>

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

  <style type="text/css">
    .progress-wrapper {
      background: white;
      width: 100%;
      height: 18px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      width: 60%;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #63ed63;
    }

    .progress-label {
      position: absolute;
      z-index: 1;
    }

  </style>
 </head>
 <body>

 <div id="myTimeline"></div>

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

  // Create a DataSet (allows two way data-binding)
  var items = new vis.DataSet([
    {id: 1, value: 0.2, content: 'item 1', start: '2014-04-20', end: '2014-04-26'},
    {id: 2, value: 0.6, content: 'item 2', start: '2014-05-14', end: '2014-05-18'},
    {id: 3, type: 'point', content: 'item 3', start: '2014-04-15', end: '2014-05-18'},
    {id: 4, content: 'item 4 with visibleFramTemplate in item', start: '2014-04-16', end: '2014-04-26', visibleFramTemplate: '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">80%<label></div>'
    }
  ]);

  // Configuration for the Timeline
  var options = {
    visibleFrameTemplate: function(item) {
      if (item.visibleFramTemplate) {
        return item.visibleFramTemplate;
      }
      var percentage = item.value * 100 + '%';
      return '<div class="progress-wrapper"><div class="progress"></div><label class="progress-label">' + percentage + '<label></div>';
    } 
  };

  // Create a Timeline
  var timeline = new vis.Timeline(container, items, options);
 </script>
 </body>
 </html>
--- a/examples/timeline/other/drag&drop.html
+++ b/examples/timeline/other/drag&drop.html
@ -49,6 +49,10 @@
    <li draggable="true" class="item">
      item 3 - range
    </li>
    <li draggable="true" class="item">
      item 3 - range - fixed times - <br>
      (start: now, end: now + 10 min)
    </li>
  </ul>
 </div>

@ -110,12 +114,16 @@
    var item = {
      id: new Date(),
      type: itemType,
      content: event.target.innerHTML.split('-')[0].trim(),
      start: new Date(),
      end: new Date(1000*60*60*24 + (new Date()).valueOf()),
      content: event.target.innerHTML.split('-')[0].trim()
    };

    event.dataTransfer.setData("text/plain", JSON.stringify(item));
    var isFixedTimes = (event.target.innerHTML.split('-')[2] && event.target.innerHTML.split('-')[2].trim() == 'fixed times')
    if (isFixedTimes) {
      item.start = new Date();
      item.end = new Date(1000*60*10 + (new Date()).valueOf());
    }

    event.dataTransfer.setData("text", JSON.stringify(item));
  }

  var items = document.querySelectorAll('.items .item');
--- a/examples/timeline/other/usingReact.html
+++ b/examples/timeline/other/usingReact.html
@ -88,10 +88,12 @@
            end: new Date(1000*60*60*24 + (new Date()).valueOf()),
            editable: true,
            template: function (item, element) {
                if (!item) { return }
                ReactDOM.unmountComponentAtNode(element);
                return ReactDOM.render(<ItemTemplate item={item} />, element);
            },
            groupTemplate: function (group, element) {
                if (!item) { return }
                ReactDOM.unmountComponentAtNode(element);
                return ReactDOM.render(<GroupTemplate group={group} />, element);
            }
--- a/examples/timeline/other/verticalScroll.html
+++ b/examples/timeline/other/verticalScroll.html
@ -52,12 +52,13 @@ zoomKey: 'ctrlKey'
      date.setHours(date.getHours() + 2 + Math.floor(Math.random()*4));
      var end = new Date(date);

      var orderIndex = order + itemsPerGroup * truck
      items.add({
        id: order + itemsPerGroup * truck,
        id: orderIndex,
        group: truck,
        start: start,
        end: end,
        content: 'Order ' + order
        content: 'Order ' + orderIndex
      });
    }
  }
@ -70,15 +71,10 @@ zoomKey: 'ctrlKey'
    maxHeight: 200,
    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

  options1 = Object.assign({}, options)
  var container1 = document.getElementById('mytimeline1');
  timeline1 = new vis.Timeline(container1, items, groups, options1);
--- a/images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png
+++ b/images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png
--- a/images/exampleScreenshots/timeline/groups/verticalItemsHide.png
+++ b/images/exampleScreenshots/timeline/groups/verticalItemsHide.png
--- a/images/exampleScreenshots/timeline/other/drag&drop.png
+++ b/images/exampleScreenshots/timeline/other/drag&drop.png
--- a/images/exampleScreenshots/timeline/other/functionLabelFormats.png
+++ b/images/exampleScreenshots/timeline/other/functionLabelFormats.png
--- a/images/exampleScreenshots/timeline/other/horizontalScroll.png
+++ b/images/exampleScreenshots/timeline/other/horizontalScroll.png
--- a/images/exampleScreenshots/timeline/other/usingReact.png
+++ b/images/exampleScreenshots/timeline/other/usingReact.png
--- a/images/exampleScreenshots/timeline/other/verticalScroll.png
+++ b/images/exampleScreenshots/timeline/other/verticalScroll.png
--- a/images/exampleScreenshots/timeline/styling/axisOrientation.png
+++ b/images/exampleScreenshots/timeline/styling/axisOrientation.png
--- a/images/exampleScreenshots/timeline/styling/gridStyling.png
+++ b/images/exampleScreenshots/timeline/styling/gridStyling.png
--- a/timeline_examples.html
+++ b/timeline_examples.html
@ -1,129 +1,404 @@
 <!DOCTYPE html>
 <html lang="en">
 <head><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Timeline Examples</title>
    <link rel="icon" HREF="favicon.ico">
    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Timeline Examples</title>
  <link rel="icon" HREF="favicon.ico">
  <!-- Bootstrap -->
  <link href="./css/bootstrap.css" rel="stylesheet">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link href="./css/prettify.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="./js/prettify/prettify.js"></script>
    <link href="./css/examples.css" rel="stylesheet" type="text/css" />

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

    <script src="./js/imagesNetwork.js"></script>
    <link href="./css/imagesNetwork.css" rel="stylesheet" type="text/css" />
 </head>
 <body onload="loadVis(220);">


 <div class="navbar-wrapper">
    <div class="container">
  </head>
  <body>
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="./index.html#modules">Modules</a></li>
                        <li><a href="./index.html#download_install">Download</a></li>
                        <li><a href="./showcase/index.html">Showcase</a></li>
                        <li><a href="./index.html#contribute">Contribute</a></li>
                        <li><a href="./index.html#licenses">License</a></li>
                    </ul>
                </div>
          <div class="container">
            <div class="navbar-header">
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="./index.html#modules">Modules</a></li>
                <li><a href="./index.html#download_install">Download</a></li>
                <li><a href="./showcase/index.html">Showcase</a></li>
                <li><a href="./index.html#contribute">Contribute</a></li>
                <li><a href="./index.html#licenses">License</a></li>
              </ul>
            </div>
          </div>
        </nav>

      </div>
    </div>
 </div>

 <div class="contentWrapper">
    <div class="contentWrapper">
    <div id="networkContainer"></div>
    <div id="contentContainer">
        <h1>Timeline Examples</h1>
        This page contains examples which show how to use Timeline. For the documentation, please click the button below: <br><br>
        <a class="btn btn-primary" href="./docs/timeline" role="button">View docs »</a>

        <h3>basic usage</h3>
        <a class='exampleLink' href="examples/timeline/basicUsage.html">basic usage</a><br />

        <h3>interaction</h3>
        <a class='exampleLink' href="examples/timeline/interaction/animateWindow.html">animate window</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/clickToUse.html">click to use</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/eventListeners.html">event listeners</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/limitMoveAndZoom.html">limit move and zoom of the window</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/navigationMenu.html">navigation menu</a><br />
        <a class='exampleLink' href="examples/timeline/interaction/setSelection.html">set selection</a><br />

        <h3>editing</h3>
        <a class='exampleLink' href="examples/timeline/editing/customSnappingOfItems.html">custom snapping of items</a><br />
        <a class='exampleLink' href="examples/timeline/editing/editingItems.html">editing items</a><br />
        <a class='exampleLink' href="examples/timeline/editing/editingItemsCallbacks.html">editing items, manipulate using callbacks</a><br />
        <a class='exampleLink' href="examples/timeline/editing/individualEditableItems.html">individually editable items</a><br />
        <a class='exampleLink' href="examples/timeline/editing/updateDataOnEvent.html">update data on event</a><br />

        <h3>items</h3>
        <a class='exampleLink' href="examples/timeline/items/htmlContents.html">HTML contents</a><br />
        <a class='exampleLink' href="examples/timeline/items/pointItems.html">point items</a><br />
        <a class='exampleLink' href="examples/timeline/items/backgroundAreas.html">background areas</a><br />
        <a class='exampleLink' href="examples/timeline/items/backgroundAreasWithGroups.html">background areas with groups</a><br />
        <a class='exampleLink' href="examples/timeline/items/itemOrdering.html">item ordering</a><br />
        <a class='exampleLink' href="examples/timeline/items/rangeOverflowItem.html">range overflow item</a><br />

        <h3>groups</h3>
        <a class='exampleLink' href="examples/timeline/groups/groups.html">groups</a><br />
        <a class='exampleLink' href="examples/timeline/groups/groupsOrdering.html">ordering of groups</a><br />
        <a class='exampleLink' href="examples/timeline/groups/subgroups.html">subgroups</a><br />
        <a class='exampleLink' href="examples/timeline/groups/groupsEditable.html">editable groups</a><br />

        <h3>styling</h3>
        <a class='exampleLink' href="examples/timeline/styling/itemClassNames.html">item class names</a><br />
        <a class='exampleLink' href="examples/timeline/styling/itemTemplates.html">item templates</a><br />
        <a class='exampleLink' href="examples/timeline/styling/axisOrientation.html">axis orientation</a><br />
        <a class='exampleLink' href="examples/timeline/styling/customCss.html">custom CSS</a><br />
        <a class='exampleLink' href="examples/timeline/styling/gridStyling.html">grid styling</a><br />

        <h3>data handling</h3>
        <a class='exampleLink' href="examples/timeline/dataHandling/dataSerialization.html">data serialization</a><br />
        <a class='exampleLink' href="examples/timeline/dataHandling/loadExternalData.html">load external data</a><br />

        <h3>other</h3>
        <a class='exampleLink' href="examples/timeline/other/customTimeBars.html">custom time bars</a><br />
        <a class='exampleLink' href="examples/timeline/other/dataAttributes.html">data attributes</a><br />
        <a class='exampleLink' href="examples/timeline/other/dataAttributesAll.html">all data attributes</a><br />
        <a class='exampleLink' href="examples/timeline/other/hidingPeriods.html">hiding periods</a><br />
        <a class='exampleLink' href="examples/timeline/other/localization.html">localization</a><br />
        <a class='exampleLink' href="examples/timeline/other/performance.html">performance</a><br />
        <a class='exampleLink' href="examples/timeline/other/groupsPerformance.html">performance of groups</a><br />
        <a class='exampleLink' href="examples/timeline/other/requirejs/requirejs_example.html">require.js example</a><br />
        <a class='exampleLink' href="examples/timeline/other/rtl.html">right to left (rtl)</a><br />
        <a class='exampleLink' href="examples/timeline/other/timezone.html">timezone</a><br />
    <h3>basic usage</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/updateDataOnEvent.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/basicUsage.png">
          <div class="exampleTitle">basic usage</div>
        </a>
      </div>
    </div>

    <h3>data handling</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/dataHandling/dataSerialization.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/dataSerialization.png">
          <div class="exampleTitle">data serialization</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/dataHandling/loadExternalData.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/dataHandling/loadExternalData.png">
          <div class="exampleTitle">load external data</div>
        </a>
      </div>
    </div>

    <h3>editing</h3> 
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/customSnappingOfItems.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/customSnappingOfItems.png">
          <div class="exampleTitle">data serialization</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/editingItems.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItems.png">
          <div class="exampleTitle">editing items</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/editingItemsCallbacks.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/editingItemsCallbacks.png">
          <div class="exampleTitle">editing items callbacks</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/individualEditableItems.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/individualEditableItems.png">
          <div class="exampleTitle">individual editable items</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/updateDataOnEvent.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/updateDataOnEvent.png">
          <div class="exampleTitle">update data on event</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/editing/tooltipOnItemChange.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/editing/tooltipOnItemChange.png">
          <div class="exampleTitle">tooltip on item change</div>
        </a>
      </div>
    </div>

    <h3>groups</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href=examples/timeline/groups/groups.html>
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groups.png">
          <div class="exampleTitle">groups</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/groups/groupsEditable.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsEditable.png">
          <div class="exampleTitle">groups editable</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/groups/groupsOrdering.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/groupsOrdering.png">
          <div class="exampleTitle">groups ordering</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/groups/subgroups.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/subgroups.png">
          <div class="exampleTitle">subgroups</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href=examples/timeline/groups/verticalItemsHide.html>
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/groups/verticalItemsHide.png">
          <div class="exampleTitle">vertical items hide</div>
        </a>
      </div>
    </div>

    <h3>interaction</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/animateWindow.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/animateWindow.png">
          <div class="exampleTitle">animate window</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/clickToUse.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/clickToUse.png">
          <div class="exampleTitle">click to use</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/eventListeners.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/eventListeners.png">
          <div class="exampleTitle">event listeners</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/limitMoveAndZoom.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/limitMoveAndZoom.png">
          <div class="exampleTitle">limit move and zoom</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/navigationMenu.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/navigationMenu.png">
          <div class="exampleTitle">navigation menu</div>
        </a>
      </div>

       <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/interaction/setSelection.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/interaction/setSelection.png">
          <div class="exampleTitle">set selection</div>
        </a>
      </div>
    </div>
 </div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <!-- Include all compiled plugins (below), or include individual files as needed -->
 <script src="js/bootstrap.min.js"></script>
 </body>
    <h3>items</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/backgroundAreas.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreas.png">
          <div class="exampleTitle">background areas</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/backgroundAreasWithGroups.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/backgroundAreasWithGroups.png">
          <div class="exampleTitle">background areas with groups</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/htmlContents.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/htmlContents.png">
          <div class="exampleTitle">html contents</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/itemOrdering.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/itemOrdering.png">
          <div class="exampleTitle">item ordering</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/pointItems.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/pointItems.png">
          <div class="exampleTitle">point items</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/items/rangeOverflowItem.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/items/rangeOverflowItem.png">
          <div class="exampleTitle">range over flow item</div>
        </a>
      </div>
    </div>

    <h3>other</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/requirejs/requirejs_example.html"">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/requirejs/requirejs_example.png">
          <div class="exampleTitle">require js</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/customTimeBars.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/customTimeBars.png">
          <div class="exampleTitle">custom time bars</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/dataAttributes.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributes.png">
          <div class="exampleTitle">data attributes</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/dataAttributesAll.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/dataAttributesAll.png">
          <div class="exampleTitle">data attributes all</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/groupsPerformance.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/groupsPerformance.png">
          <div class="exampleTitle">groups performance</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/hidingPeriods.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/hidingPeriods.png">
          <div class="exampleTitle">hiding periods</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/localization.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/localization.png">
          <div class="exampleTitle">localization</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/performance.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/performance.png">
          <div class="exampleTitle">performance</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/rtl.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/rtl.png">
          <div class="exampleTitle">rtl</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/timezone.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/timezone.png">
          <div class="exampleTitle">timezone</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/drag&drop.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/drag&drop.png">
          <div class="exampleTitle">drag & drop</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/functionLabelFormats.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/functionLabelFormats.png">
          <div class="exampleTitle">function label formats</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/horizontalScroll.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/horizontalScroll.png">
          <div class="exampleTitle">horizontal scroll</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/usingReact.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/usingReact.png">
          <div class="exampleTitle">using react</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/other/verticalScroll.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/other/verticalScroll.png">
          <div class="exampleTitle">vertical sroll</div>
        </a>
      </div>
    </div>

    <h3>styling</h3>
    <div class="container-fluid">
      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/styling/axisOrientation.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/axisOrientation.png">
          <div class="exampleTitle">exis orientation</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/styling/customCss.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/customCss.png">
          <div class="exampleTitle">custom css</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/styling/gridStyling.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/gridStyling.png">
          <div class="exampleTitle">grid styling</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/styling/itemClassNames.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemClassNames.png">
          <div class="exampleTitle">item class names</div>
        </a>
      </div>

      <div class="col-lg-2 col-md-3 col-sm-6">
        <a href="examples/timeline/styling/itemTemplates.html">
          <img class="timeline_example img-responsive" src="./images/exampleScreenshots/timeline/styling/itemTemplates.png">
          <div class="exampleTitle">item templates</div>
        </a>
      </div>
    </div>
  </body>
 </html>