RubyGems - visjs-rails - Versions diffs - 4.16.1.0 → 4.21.0.0 - Mend

visjs-rails 4.16.1.0 → 4.21.0.0

Files changed (388) hide show

data/examples_for_vis/network/physics/physicsConfiguration.html ADDED

@@ -0,0 +1,85 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Playing with Physics</title>
+  <style type="text/css">
+    body {
+      font: 10pt sans;
+    }
+    #mynetwork {
+      float: left;
+      width: 600px;
+      height: 600px;
+      margin: 5px;
+      border: 1px solid lightgray;
+    }
+    #config {
+      float: left;
+      width: 400px;
+      height: 600px;
+    }
+  </style>
+  <script type="text/javascript" src="../exampleUtil.js"></script>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    function draw() {
+      nodes = [];
+      edges = [];
+      // randomly create some nodes and edges
+      var data = getScaleFreeNetwork(60);
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var options = {
+        physics: {
+          stabilization: false
+        },
+        configure: {
+          filter: function (option, path) {
+            if (path.indexOf('physics') !== -1) {
+              return true;
+            }
+            if (path.indexOf('smooth') !== -1 || option === 'smooth') {
+              return true;
+            }
+            return false;
+          },
+          container: document.getElementById('config')
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+</head>
+<body onload="draw();">
+  <h2>Playing with Physics</h2>
+  <div style="width: 700px; font-size:14px; text-align: justify;">
+    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because
+    of this, the network configurator can be used to explore which settings may be good for him or her. This is ment to be
+    used during the development phase when you are implementing vis.js. Once you have found settings you are happy with,
+    you can supply them to network using the documented physics options.
+  </div>
+  <br />
+  <div id="mynetwork"></div>
+  <div id="config"></div>
+  <p id="selection"></p>
+</body>
+</html>

data/examples_for_vis/timeline/basicUsage.html ADDED

@@ -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="../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>

data/examples_for_vis/timeline/dataHandling/dataSerialization.html ADDED

@@ -0,0 +1,123 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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", "start": "2014-01-01T01:00:00" }, { "id": 2, "content": "item 2", "start": "2014-01-01T02:00:00"
+    }, { "id": 3, "content": "item 3", "start": "2014-01-01T03:00:00" }, { "id": 4, "content": "item 4", "start": "2014-01-01T04:00:00",
+    "end": "2014-01-01T04:30:00" }, { "id": 5, "content": "item 5", "start": "2014-01-01T05:00:00", "type": "point" }, {
+    "id": 6, "content": "item 6", "start": "2014-01-01T06:00:00" } ]
+  </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), "ASPDate" or "String" (without timezone!).
+      //
+      // 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>

data/examples_for_vis/timeline/dataHandling/loadExternalData.html ADDED

@@ -0,0 +1,61 @@
+<!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="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>

data/examples_for_vis/timeline/editing/customSnappingOfItems.html ADDED

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Custom snapping</title>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>

data/examples_for_vis/timeline/editing/editingItems.html ADDED

@@ -0,0 +1,109 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Timeline | Manipulation example</title>
+  <style>
+    body,
+    html {
+      font-family: arial, sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+</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>