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/nodeStyles/imagesWithBorders.html ADDED

@@ -0,0 +1,105 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Images With Borders</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: 'image', image: DIR + '1.png'},
+        {id: 2,  shape: 'image', image: DIR + '2.png'},
+        {id: 3,  shape: 'image', image: DIR + '3.png'},
+        {id: 4,  shape: 'image', image: DIR + '4.png', label:"pictures by this guy!"},
+        {id: 5,  shape: 'image', image: DIR + '5.png'},
+        {id: 6,  shape: 'image', image: DIR + '6.png'},
+        {id: 7,  shape: 'image', image: DIR + '7.png'},
+        {id: 8,  shape: 'image', image: DIR + '8.png'},
+        {id: 9,  shape: 'image', image: DIR + '9.png'},
+        {id: 10, shape: 'image', image: DIR + '10.png'},
+        {id: 11, shape: 'image', image: DIR + '11.png'},
+        {id: 12, shape: 'image', image: DIR + '12.png'},
+        {id: 13, shape: 'image', image: DIR + '13.png'},
+        {id: 14, shape: 'image', image: DIR + '14.png'},
+        {id: 15, shape: 'image', image: DIR + 'missing.png', brokenImage: DIR + 'missingBrokenImage.png', label:"when images\nfail\nto load"},
+        {id: 16, shape: 'image', 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: '#406897',
+            background: '#6AAFFF'
+          },
+          font:{color:'#eeeeee'},
+          shapeProperties: {
+            useBorderWithImage:true
+          }
+        },
+        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/shadows.html ADDED

@@ -0,0 +1,119 @@
+<!doctype html>
+<html>
+<head>
+    <title>Network | Groups</title>
+    <style>
+        body {
+            color: #d3d3d3;
+            font: 12pt arial;
+            background-color: #ffffff;
+        }
+        #mynetwork {
+            width: 800px;
+            height: 800px;
+            border: 1px solid #444444;
+            background-color: #dddddd;
+        }
+    </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"/>
+</head>
+<body>
+<div id="mynetwork"></div>
+<script type="text/javascript">
+    var len = undefined;
+    var nodes = [{id: 0, label: "0", group: 0},
+        {id: 1, label: "1", group: 0},
+        {id: 2, label: "2", group: 0},
+        {id: 3, label: "3", group: 1},
+        {id: 4, label: "4", group: 1},
+        {id: 5, label: "5", group: 1},
+        {id: 6, label: "6", group: 2},
+        {id: 7, label: "7", group: 2},
+        {id: 8, label: "8", group: 2},
+        {id: 9, label: "9", group: 3},
+        {id: 10, label: "10", group: 3},
+        {id: 11, label: "11", group: 3},
+        {id: 12, label: "12", group: 4},
+        {id: 13, label: "13", group: 4},
+        {id: 14, label: "14", group: 4},
+        {id: 15, label: "15", group: 5},
+        {id: 16, label: "16", group: 5},
+        {id: 17, label: "17", group: 5},
+        {id: 18, label: "18", group: 6},
+        {id: 19, label: "19", group: 6},
+        {id: 20, label: "20", group: 6},
+        {id: 21, label: "21", group: 7},
+        {id: 22, label: "22", group: 7},
+        {id: 23, label: "23", group: 7},
+        {id: 24, label: "24", group: 8},
+        {id: 25, label: "25", group: 8},
+        {id: 26, label: "26", group: 8},
+        {id: 27, label: "27", group: 9},
+        {id: 28, label: "28", group: 9},
+        {id: 29, label: "29", group: 9}
+    ];
+    var edges = [{from: 1, to: 0},
+        {from: 2, to: 0},
+        {from: 4, to: 3},
+        {from: 5, to: 4},
+        {from: 4, to: 0},
+        {from: 7, to: 6},
+        {from: 8, to: 7},
+        {from: 7, to: 0},
+        {from: 10, to: 9},
+        {from: 11, to: 10},
+        {from: 10, to: 4},
+        {from: 13, to: 12},
+        {from: 14, to: 13},
+        {from: 13, to: 0},
+        {from: 16, to: 15},
+        {from: 17, to: 15},
+        {from: 15, to: 10},
+        {from: 19, to: 18},
+        {from: 20, to: 19},
+        {from: 19, to: 4},
+        {from: 22, to: 21},
+        {from: 23, to: 22},
+        {from: 22, to: 13},
+        {from: 25, to: 24},
+        {from: 26, to: 25},
+        {from: 25, to: 7},
+        {from: 28, to: 27, shadow:{color:'rgb(0,255,0)'}},
+        {from: 29, to: 28},
+        {from: 28, to: 0}
+    ]
+    // create a network
+    var container = document.getElementById('mynetwork');
+    var data = {
+        nodes: nodes,
+        edges: edges
+    };
+    var options = {
+        nodes: {
+            shape: 'dot',
+            size: 30,
+            font: {
+                size: 32
+            },
+            borderWidth: 2,
+            shadow:true
+        },
+        edges: {
+            width: 2,
+            shadow:true
+        }
+    };
+    network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>

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

@@ -0,0 +1,73 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Shapes</title>
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </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;
+    function draw() {
+      nodes = [
+        {id: 1,  label: 'circle',  shape: 'circle' },
+        {id: 2,  label: 'ellipse', shape: 'ellipse'},
+        {id: 3,  label: 'database',shape: 'database'},
+        {id: 4,  label: 'box',     shape: 'box'    },
+        {id: 5,  label: 'diamond', shape: 'diamond'},
+        {id: 6,  label: 'dot',     shape: 'dot'},
+        {id: 7,  label: 'square',  shape: 'square'},
+        {id: 8,  label: 'triangle',shape: 'triangle'},
+        {id: 9,  label: 'triangleDown', shape: 'triangleDown'},
+        {id: 10, label: 'text',    shape: 'text'},
+        {id: 11, label: 'star',    shape: 'star'},
+        {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' },
+        {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse'},
+        {id: 23, font:{size:30},          label: 'ellipse with a long label text', shape: 'ellipse'},
+        {id: 24, font:{size:30},          label: 'big database',shape: 'database'},
+        {id: 25, font:{size:30},          label: 'big box',     shape: 'box'    },
+        {id: 26, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond'},
+        {id: 27, font:{size:30}, size:40, label: 'big dot',     shape: 'dot'},
+        {id: 28, font:{size:30}, size:40, label: 'big square',  shape: 'square'},
+        {id: 29, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle'},
+        {id: 30, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown'},
+        {id: 31, font:{size:30},          label: 'big text',    shape: 'text'},
+        {id: 32, font:{size:30}, size:40, label: 'big star',    shape: 'star'}
+      ];
+      edges = [
+      ];
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+<body onload="draw()">
+<p>
+  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
+</p>
+<div id="mynetwork"></div>
+<div id="info"></div>
+</body>
+</html>

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

@@ -0,0 +1,61 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Shapes</title>
+  <style type="text/css">
+    #mynetwork {
+      width: 1000px;
+      height: 800px;
+      border: 1px solid lightgray;
+    }
+  </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;
+    function draw() {
+      nodes = [
+        {id: 1, font:{size:30},          label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
+        {id: 2, font:{size:30},          label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
+        {id: 3, font:{size:30},          label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
+        {id: 4, font:{size:30},          label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
+        {id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
+        {id: 6, font:{size:30}, size:40, label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
+        {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
+        {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
+        {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
+        {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:true}},
+        {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
+      ];
+      edges = [
+      ];
+      // create a network
+      var container = document.getElementById('mynetwork');
+      var data = {
+        nodes: nodes,
+        edges: edges
+      };
+      var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
+      network = new vis.Network(container, data, options);
+    }
+  </script>
+<body onload="draw()">
+<p>
+  Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
+</p>
+<div id="mynetwork"></div>
+<div id="info"></div>
+</body>
+</html>

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

@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <title>Network | Label Width and Height Settings</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;
+    }
+    code {
+      font-size: 14px;
+      background: #dddddd;
+    }
+    p {
+      max-width: 600px;
+    }
+    .indented {
+      margin-left: 30px;
+    }
+    .sep {
+      height: 1px;
+      width: 35%;
+      margin-left: 40px;
+      background-color: #dddddd;
+    }
+  </style>
+</head>
+<body>
+<p>Nodes may be set to have fixed, minimum and maximum widths and minimum heights.
+Nodes with minimum heights may also have a vertical alignment set.</p>
+<p>Edges may be set to have maximum widths.</p>
+<div id="mynetwork"></div>
+<p>The <code>widthConstraint: value</code> option means a fixed width, the minimum and maximum width of the element are set to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
+<p>The <code>widthConstraint: { minimum: value }</code> option sets the minimum width of the element to the value.</p>
+<p>The <code>widthConstraint: { maximum: value }</code> option sets the maximum width of the element to the value (respecting left and right margins). Lines exceeding the maximum width will be broken at space boundaries to fit.</p>
+<p>Minimum width line sizing is applied after maximum width line breaking, so counterintuitively, the minimum being greater than the maximum has a meaningful interpretation.</p>
+<div class="sep"></div>
+<p>The <code>heightConstraint: value</code> option sets the minimum height of the element to the value (respecting top and bottom margins).</p>
+<p>The <code>heightConstraint: { minimum: value }</code> option also sets the minimum height of the element to the value (respecting top and bottom margins).</p>
+<p>The <code>heightConstraint: { valign: value }</code> option (with value <code>'top'</code>, <code>'middle'</code>, or <code>'bottom'</code>, sets the alignment of the text in the element's label to the elements top, middle or bottom (respecting top and bottom margins) when it's height is less than the minimum. The middle value is the default.</p>
+<div class="sep"></div>
+<p>Node width and height constraints may both be applied together, of course.</p>
+<p>The constraint options may be applied to elements individually, or at the whole-set level.
+Whole-set node and edge constraints are exclusive.</p>
+<script type="text/javascript">
+  var nodes = [
+    { id: 100, label: 'This node has no fixed, minimum or maximum width or height', x: -50, y: -300 },
+    { id: 210, widthConstraint: { minimum: 120 }, label: 'This node has a mimimum width', x: -400, y: -200 },
+    { id: 211, widthConstraint: { minimum: 120 }, label: '...so does this', x: -500, y: -50 },
+    { id: 220, widthConstraint: { maximum: 170 }, label: 'This node has a maximum width and breaks have been automatically inserted into the label', x: -150, y: -150 },
+    { id: 221, widthConstraint: { maximum: 170 }, label: '...this too', x: -100, y: 0 },
+    { id: 200, font: { multi: true }, widthConstraint: 150, label: '<b>This</b> node has a fixed width and breaks have been automatically inserted into the label', x: -300, y: 50 },
+    { id: 201, widthConstraint: 150, label: '...this as well', x: -300, y: 200 },
+    { id: 300, heightConstraint: { minimum: 70 }, label: 'This node\nhas a\nminimum\nheight', x: 100, y: -150 },
+    { id: 301, heightConstraint: { minimum: 70 }, label: '...this one here too', x: 100, y: 0 },
+    { id: 400, heightConstraint: { minimum: 100, valign: 'top' }, label: 'Minimum height\nvertical alignment\nmay be top', x: 300, y: -200 },
+    { id: 401, heightConstraint: { minimum: 100, valign: 'middle' }, label: 'Minimum height\nvertical alignment\nmay be middle\n(default)', x: 300, y: 0 },
+    { id: 402, heightConstraint: { minimum: 100, valign: 'bottom' }, label: 'Minimum height\nvertical alignment\nmay be bottom', x: 300, y: 200 }
+  ];
+  var edges = [
+    { from: 100, to: 210, label: "unconstrained to minimum width"},
+    { from: 210, to: 211, label: "more minimum width"},
+    { from: 100, to: 220, label: "unconstrained to maximum width"},
+    { from: 220, to: 221, label: "more maximum width"},
+    { from: 210, to: 200, label: "minimum width to fixed width"},
+    { from: 220, to: 200, label: "maximum width to fixed width"},
+    { from: 200, to: 201, label: "more fixed width"},
+    { from: 100, to: 300, label: "unconstrained to minimum height"},
+    { from: 300, to: 301, label: "more minimum height"},
+    { from: 100, to: 400, label: "unconstrained to top valign"},
+    { from: 400, to: 401, label: "top valign to middle valign"},
+    { from: 401, to: 402, widthConstraint: { maximum: 150 }, label: "middle valign to bottom valign"},
+  ];
+  var container = document.getElementById('mynetwork');
+  var data = {
+    nodes: nodes,
+    edges: edges
+  };
+  var options = {
+    edges: {
+      font: {
+        size: 12
+      },
+      widthConstraint: {
+        maximum: 90
+      }
+    },
+    nodes: {
+      shape: 'box',
+      margin: 10,
+      widthConstraint: {
+        maximum: 200
+      }
+    },
+    physics: {
+      enabled: false
+    }
+  };
+  var network = new vis.Network(container, data, options);
+</script>
+</body>
+</html>