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/layout/randomSeed.html ADDED

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Setting the random seed</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    p {
+      max-width:600px;
+    }
+  </style>
+</head>
+<body>
+<p>
+  Create a simple network with some nodes and edges but with a fixed seed. This means the layout will be the same every time the nodes
+  are settled.
+</p>
+<div id="mynetwork"></div>
+<script type="text/javascript">
+  // create an array with nodes
+  var nodes = new vis.DataSet([
+    {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 = new vis.DataSet([
+    {from: 1, to: 3},
+    {from: 1, to: 2},
+    {from: 2, to: 4},
+    {from: 2, to: 5}
+  ]);
+  // create a network
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {layout:{randomSeed:2}};
+  var network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>

data/examples_for_vis/network/nodeStyles/HTMLInNodes.html ADDED

@@ -0,0 +1,83 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | HTML in nodex</title>
+    <style type="text/css">
+        body {
+            font: 10pt arial;
+        }
+        #mynetwork {
+            width: 600px;
+            height: 600px;
+            border: 1px solid lightgray;
+            background-color:#eeeeee;
+        }
+    </style>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+    <script type="text/javascript">
+        var nodes = null;
+        var edges = null;
+        var network = null;
+        var DIR = 'img/refresh-cl/';
+        var LENGTH_MAIN = 150;
+        var LENGTH_SUB = 50;
+        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
+            '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
+            '<foreignObject x="15" y="10" width="100%" height="100%">' +
+            '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
+            ' <em>I</em> am' +
+            '<span style="color:white; text-shadow:0 0 20px #000000;">' +
+            ' HTML in SVG!</span>' +
+            '</div>' +
+            '</foreignObject>' +
+            '</svg>';
+        var url = "data:image/svg+xml;charset=utf-8,"+ encodeURIComponent(svg);
+        // Called when the Visualization API is loaded.
+        function draw() {
+            // Create a data table with nodes.
+            nodes = [];
+            // Create a data table with links.
+            edges = [];
+            nodes.push({id: 1, label: 'Get HTML', image: url, shape: 'image'});
+            nodes.push({id: 2, label: 'Using SVG', image: url, shape: 'image'});
+            edges.push({from: 1, to: 2, length: 300});
+            // create a network
+            var container = document.getElementById('mynetwork');
+            var data = {
+                nodes: nodes,
+                edges: edges
+            };
+            var options = {
+                physics: {stabilization: false},
+                edges: {smooth: false}
+            };
+            network = new vis.Network(container, data, options);
+        }
+    </script>
+</head>
+<body onload="draw()">
+<p>
+    This example demonstrates showing custom HTML in Nodes, by using an SVG image.
+</p>
+<p style="color: red;">
+    WARNING: this is currently not supported by all browsers.
+</p>
+<div id="mynetwork"></div>
+</body>
+</html>

data/examples_for_vis/network/nodeStyles/circularImages.html ADDED

@@ -0,0 +1,219 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Circular images</title>
+  <style type="text/css">
+    body {
+      font: 10pt arial;
+    }
+    #mynetwork {
+      width: 800px;
+      height: 800px;
+      border: 1px solid lightgray;
+      background-color: #333333;
+    }
+  </style>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <script type="text/javascript">
+    var DIR = 'img/soft-scraps-icons/';
+    var nodes = null;
+    var edges = null;
+    var network = null;
+    // Called when the Visualization API is loaded.
+    function draw() {
+      // create people.
+      // value corresponds with the age of the person
+      var DIR = '../img/indonesia/';
+      nodes = [{
+          id: 1,
+          shape: 'circularImage',
+          image: DIR + '1.png'
+        },
+        {
+          id: 2,
+          shape: 'circularImage',
+          image: DIR + '2.png'
+        },
+        {
+          id: 3,
+          shape: 'circularImage',
+          image: DIR + '3.png'
+        },
+        {
+          id: 4,
+          shape: 'circularImage',
+          image: DIR + '4.png',
+          label: "pictures by this guy!"
+        },
+        {
+          id: 5,
+          shape: 'circularImage',
+          image: DIR + '5.png'
+        },
+        {
+          id: 6,
+          shape: 'circularImage',
+          image: DIR + '6.png'
+        },
+        {
+          id: 7,
+          shape: 'circularImage',
+          image: DIR + '7.png'
+        },
+        {
+          id: 8,
+          shape: 'circularImage',
+          image: DIR + '8.png'
+        },
+        {
+          id: 9,
+          shape: 'circularImage',
+          image: DIR + '9.png'
+        },
+        {
+          id: 10,
+          shape: 'circularImage',
+          image: DIR + '10.png'
+        },
+        {
+          id: 11,
+          shape: 'circularImage',
+          image: DIR + '11.png'
+        },
+        {
+          id: 12,
+          shape: 'circularImage',
+          image: DIR + '12.png'
+        },
+        {
+          id: 13,
+          shape: 'circularImage',
+          image: DIR + '13.png'
+        },
+        {
+          id: 14,
+          shape: 'circularImage',
+          image: DIR + '14.png'
+        },
+        {
+          id: 15,
+          shape: 'circularImage',
+          image: DIR + 'missing.png',
+          brokenImage: DIR + 'missingBrokenImage.png',
+          label: "when images\nfail\nto load"
+        },
+        {
+          id: 16,
+          shape: 'circularImage',
+          image: DIR + 'anotherMissing.png',
+          brokenImage: DIR + '9.png',
+          label: "fallback image in action"
+        }
+      ];
+      // create connections between people
+      // value corresponds with the amount of contact between two people
+      edges = [{
+          from: 1,
+          to: 2
+        },
+        {
+          from: 2,
+          to: 3
+        },
+        {
+          from: 2,
+          to: 4
+        },
+        {
+          from: 4,
+          to: 5
+        },
+        {
+          from: 4,
+          to: 10
+        },
+        {
+          from: 4,
+          to: 6
+        },
+        {
+          from: 6,
+          to: 7
+        },
+        {
+          from: 7,
+          to: 8
+        },
+        {
+          from: 8,
+          to: 9
+        },
+        {
+          from: 8,
+          to: 10
+        },
+        {
+          from: 10,
+          to: 11
+        },
+        {
+          from: 11,
+          to: 12
+        },
+        {
+          from: 12,
+          to: 13
+        },
+        {
+          from: 13,
+          to: 14
+        },
+        {
+          from: 9,
+          to: 16
+        }
+      ];
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {
+        nodes: {
+          borderWidth: 4,
+          size: 30,
+          color: {
+            border: '#222222',
+            background: '#666666'
+          },
+          font: {
+            color: '#eeeeee'
+          }
+        },
+        edges: {
+          color: 'lightgray'
+        }
+      };
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+</head>
+<body onload="draw()">
+  <div id="mynetwork"></div>
+</body>
+</html>

data/examples_for_vis/network/nodeStyles/colors.html ADDED

@@ -0,0 +1,140 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Basic usage</title>
+  <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+  <link href="../../../vendor/assets/stylesheets/vis-network.min.css" rel="stylesheet" type="text/css" />
+  <style type="text/css">
+    #mynetwork {
+      width: 600px;
+      height: 400px;
+      border: 1px solid lightgray;
+    }
+    p {
+      max-width: 700px;
+    }
+  </style>
+</head>
+<body>
+  <p>
+    Nodes can be all kinds of colors. This example shows all possible ways of defining colors. If you supply an object, the undefined
+    fields will assume the default colors. When supplying a hex or rgb format color, it will be parsed and variations will
+    be created for highlight and hover. Edges with inheritColor take the border colors.
+  </p>
+  <div id="mynetwork"></div>
+  <script type="text/javascript">
+    // create an array with nodes
+    var nodes = new vis.DataSet([{
+        id: 1,
+        label: 'html color',
+        color: 'lime'
+      },
+      {
+        id: 2,
+        label: 'rgb color',
+        color: 'rgb(255,168,7)'
+      },
+      {
+        id: 3,
+        label: 'hex color',
+        color: '#7BE141'
+      },
+      {
+        id: 4,
+        label: 'rgba color',
+        color: 'rgba(97,195,238,0.5)'
+      },
+      {
+        id: 5,
+        label: 'colorObject',
+        color: {
+          background: 'pink',
+          border: 'purple'
+        }
+      },
+      {
+        id: 6,
+        label: 'colorObject + highlight',
+        color: {
+          background: '#F03967',
+          border: '#713E7F',
+          highlight: {
+            background: 'red',
+            border: 'black'
+          }
+        }
+      },
+      {
+        id: 7,
+        label: 'colorObject + highlight + hover',
+        color: {
+          background: 'cyan',
+          border: 'blue',
+          highlight: {
+            background: 'red',
+            border: 'blue'
+          },
+          hover: {
+            background: 'white',
+            border: 'red'
+          }
+        }
+      }
+    ])
+    // create an array with edges
+    var edges = new vis.DataSet([{
+        from: 1,
+        to: 3
+      },
+      {
+        from: 1,
+        to: 2
+      },
+      {
+        from: 2,
+        to: 4
+      },
+      {
+        from: 2,
+        to: 5
+      },
+      {
+        from: 2,
+        to: 6
+      },
+      {
+        from: 4,
+        to: 7
+      },
+    ]);
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+      nodes: nodes,
+      edges: edges
+    };
+    var options = {
+      nodes: {
+        borderWidth: 2
+      },
+      interaction: {
+        hover: true
+      }
+    }
+    var network = new vis.Network(container, data, options);
+  </script>
+</body>
+</html>