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/graph3d/05_line.html ADDED

@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D line demo</title>
+  <style>
+    body {font: 10pt arial;}
+  </style>
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var steps = 500;
+      var axisMax = 314;
+      var tmax = 4 * 2 * Math.PI;
+      var axisStep = axisMax / steps;
+      for (var t = 0; t < tmax; t += tmax / steps) {
+        var r = 1;
+        var x = r * Math.sin(t);
+        var y = r * Math.cos(t);
+        var z = t / tmax;
+        data.add({x:x,y:y,z:z});
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'line',
+        showPerspective: false,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+      graph.setCameraPosition(0.4, undefined, undefined);
+    }
+  </script>
+</head>
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/06_moving_dots.html ADDED

@@ -0,0 +1,78 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D animation moving dots</title>
+  <style>
+    body {font: 10pt arial;}
+  </style>
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+      // create some shortcuts to math functions
+      var sin = Math.sin;
+      var cos = Math.cos;
+      var pi = Math.PI;
+      // create the animation data
+      var tmax = 2.0 * pi;
+      var tstep = tmax / 75;
+      var dotCount = 1;  // set this to 1, 2, 3, 4, ...
+      for (var t = 0; t < tmax; t += tstep) {
+        var tgroup = parseFloat(t.toFixed(2));
+        var value = t;
+        // a dot in the center
+        data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
+        // one or multiple dots moving around the center
+        for (var dot = 0; dot < dotCount; dot++) {
+          var tdot = t + 2*pi * dot / dotCount;
+          data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
+          data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-color',
+        showPerspective: true,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0,
+        animationInterval: 35, // milliseconds
+        animationPreload: false,
+        animationAutoStart: true,
+        legendLabel: 'color value',
+        cameraPosition: {
+          horizontal: 2.7,
+          vertical: 0.0,
+          distance: 1.65
+        }
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+<body onload="drawVisualization();">
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/07_dot_cloud_colors.html ADDED

@@ -0,0 +1,72 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D cloud with colored dots</title>
+  <style>
+    body {font: 10pt arial;}
+  </style>
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    function onclick(point) {
+      console.log(point);
+    }
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+      // create some shortcuts to math functions
+      var sqrt = Math.sqrt;
+      var pow = Math.pow;
+      var random = Math.random;
+      // create the animation data
+      var imax = 100;
+      for (var i = 0; i < imax; i++) {
+        var x = pow(random(), 2);
+        var y = pow(random(), 2);
+        var z = pow(random(), 2);
+        var style = (i%2==0) ? sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)) : "#00ffff";
+        data.add({x:x,y:y,z:z,style:style});
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-color',
+        showPerspective: true,
+        showGrid: true,
+        keepAspectRatio: true,
+        verticalRatio: 1.0,
+        legendLabel: 'distance',
+        onclick: onclick,
+        cameraPosition: {
+          horizontal: -0.35,
+          vertical: 0.22,
+          distance: 1.8
+        }
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/08_dot_cloud_size.html ADDED

@@ -0,0 +1,69 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D cloud with sized dots</title>
+  <style>
+    body {font: 10pt arial;}
+  </style>
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // create the data table.
+      data = new vis.DataSet();
+      // create some shortcuts to math functions
+      var sqrt = Math.sqrt;
+      var pow = Math.pow;
+      var random = Math.random;
+      // create the animation data
+      var imax = 100;
+      for (var i = 0; i < imax; i++) {
+        var x = pow(random(), 2);
+        var y = pow(random(), 2);
+        var z = pow(random(), 2);
+        var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
+        var range = sqrt(2) - dist;
+        data.add({x:x,y:y,z:z,style:range});
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'dot-size',
+        showPerspective: false,
+        showGrid: true,
+        keepAspectRatio: true,
+        legendLabel:'value',
+        verticalRatio: 1.0,
+        cameraPosition: {
+          horizontal: -0.54,
+          vertical: 0.5,
+          distance: 1.6
+        },
+        dotSizeMinFraction: 0.5,
+        dotSizeMaxFraction: 2.5
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+<body onload="drawVisualization()">
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/09_mobile.html ADDED

@@ -0,0 +1,79 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+  <title>Graph 3D demo</title>
+  <style>
+    html, body {
+      font: 10pt arial;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+    #mygraph {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+  <!-- for mobile devices like android and iphone -->
+  <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    function custom(x, y) {
+      return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+    }
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // create some nice looking data with sin/cos
+      var steps = 10;  // number of datapoints will be steps*steps
+      var axisMax = 314;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x < axisMax; x+=axisStep) {
+        for (var y = 0; y < axisMax; y+=axisStep) {
+          var value = custom(x,y);
+          data.add([
+            {x:x,y:y,z:value}
+          ]);
+        }
+      }
+      // specify options
+      var options = {
+        width:  '100%',
+        height: '100%',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        backgroundColor: {
+          strokeWidth: 0
+        }
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+    }
+  </script>
+</head>
+<body onresize="graph.redraw();" onload="drawVisualization()">
+<div id="mygraph"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/10_styling.html ADDED

@@ -0,0 +1,121 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D styles</title>
+  <style>
+    body {font: 10pt arial;}
+  </style>
+  <script type="text/javascript" src="../../vendor/assets/javascripts/vis.js"></script>
+  <script type="text/javascript">
+    var data = null;
+    var graph = null;
+    function custom(x, y) {
+      return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
+    }
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      var style = document.getElementById('style').value;
+      var showPerspective = document.getElementById('perspective').checked;
+      var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
+      var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
+      var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+      // Create and populate a data table.
+      data = [];
+      // create some nice looking data with sin/cos
+      var steps = 5;  // number of datapoints will be steps*steps
+      var axisMax = 10;
+      var axisStep = axisMax / steps;
+      for (var x = 0; x <= axisMax; x+=axisStep) {
+        for (var y = 0; y <= axisMax; y+=axisStep) {
+          var z = custom(x,y);
+          if (withValue) {
+            var value = (y - x);
+            data.push({x:x, y:y, z: z, style:value});
+          }
+          else {
+            data.push({x:x, y:y, z: z});
+          }
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        xBarWidth: xBarWidth,
+        yBarWidth: yBarWidth,
+        showPerspective: showPerspective,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+      var camera = graph ? graph.getCameraPosition() : null;
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+      if (camera) graph.setCameraPosition(camera); // restore camera position
+      document.getElementById('style').onchange = drawVisualization;
+      document.getElementById('perspective').onchange = drawVisualization;
+      document.getElementById('xBarWidth').onchange = drawVisualization;
+      document.getElementById('yBarWidth').onchange = drawVisualization;
+    }
+  </script>
+</head>
+<body onload="drawVisualization()">
+<p>
+  <label for="style"> Style:
+    <select id="style">
+      <option value="bar">bar</option>
+      <option value="bar-color">bar-color</option>
+      <option value="bar-size">bar-size</option>
+      <option value="dot">dot</option>
+      <option value="dot-line">dot-line</option>
+      <option value="dot-color">dot-color</option>
+      <option value="dot-size">dot-size</option>
+      <option value="grid">grid</option>
+      <option value="line">line</option>
+      <option value="surface">surface</option>
+    </select>
+  </label>
+</p>
+<p>
+  <label for="perspective">
+    <input type="checkbox" id="perspective" checked> Show perspective
+  </label>
+</p>
+<p>
+  <label for="xBarWidth"> Bar width X:
+    <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
+  </label>
+</p>
+<p>
+  <label for="yBarWidth"> Bar width Y:
+    <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
+  </label>
+</p>
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>