Updated some examples

10 years ago · f4661c0274
--- a/HISTORY.md
+++ b/HISTORY.md
@ -25,12 +25,12 @@ http://visjs.org
 - A DataSet can now be constructed with initial data, like
  `new DataSet(data, options)`.


 ### Graph

 - added recalculate hierarchical layout to update node event.
 - added arrowScaleFactor to scale the arrows on the edges.


 ## 2014-04-18, version 0.7.4

 ### Graph
--- a/examples/timeline/02_dataset.html
+++ b/examples/timeline/02_dataset.html
@ -19,9 +19,6 @@
    }
  </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.3.1/moment.min.js"></script>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
@ -29,8 +26,6 @@
 <div id="visualization"></div>

 <script>
  var now = moment().minutes(0).seconds(0).milliseconds(0);

  // create a dataset with items
  var items = new vis.DataSet({
    convert: {
@ -53,6 +48,7 @@
    end: '2014-02-10',
    orientation: 'top',
    height: '100%',
    editable: true,
    showCurrentTime: true
  };

--- a/examples/timeline/03_much_data.html
+++ b/examples/timeline/03_much_data.html
@ -1,68 +1,66 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Timeline | a lot of data</title>
  <title>Timeline | a lot of data</title>

    <style>
        body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
    </style>
  <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.3.1/moment.min.js"></script>
  <!-- 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.3.1/moment.min.js"></script>

  <script src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <h1>
    Test with a lot of data
  Test with a lot of data
 </h1>
 <p>
    <label for="count">Number of items</label>
    <input id="count" value="1000">
    <input id="draw" type="button" value="draw">
  <label for="count">Number of items</label>
  <input id="count" value="1000">
  <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({
        convert: {
            start: 'Date',
            end: 'Date'
        }
    });

    // create data
    function createData() {
        var count = parseInt(document.getElementById('count').value) || 100;
        var newData = [];
        for (var i = 0; i < count; i++) {
            newData.push({id: i, content: 'item ' + i, start: now.clone().add('days', i)});
        }
        items.clear();
        items.add(newData);
  // create a dataset with items
  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var items = new vis.DataSet({
    convert: {
      start: 'Date',
      end: 'Date'
    }
    createData();
  });

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

    var container = document.getElementById('visualization');
    var options = {
        start: now.clone().add('days', -3),
        end: now.clone().add('days', 11),
        zoomMin: 1000 * 60 * 60 * 24,          // a day
        zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
        //maxHeight: 300,
        //height: '300px',
        //orientation: 'top'
    };
  document.getElementById('draw').onclick = createData;

    var timeline = new vis.Timeline(container, items, options);
  var container = document.getElementById('visualization');
  var options = {
    start: now.clone().add('days', -3),
    end: now.clone().add('days', 11),
    zoomMin: 1000 * 60 * 60 * 24,          // a day
    zoomMax: 1000 * 60 * 60 * 24 * 30 * 3  // three months
    //maxHeight: 300,
    //height: '300px',
    //orientation: 'top'
  };
 </script>
 </body>
 </html>
--- a/examples/timeline/09_order_groups.html
+++ b/examples/timeline/09_order_groups.html
@ -34,12 +34,12 @@

  // create a dataset with items
  var items = new vis.DataSet([
    {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17)},
    {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19)},
    {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16)},
    {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23)},
    {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22)},
    {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24)}
    {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
@ -52,7 +52,8 @@
    //       0 when a == b
    groupOrder: function (a, b) {
      return a.value - b.value;
    }
    },
    editable: true
  };

  var timeline = new vis.Timeline(container);