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/graph2d/21_barsWithEnd.html ADDED

@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graph Example</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>
+    <h2>Graph2d | Bar Graph With End Example</h2>
+    <div style="width:700px; font-size:14px; text-align: justify;">
+        This example shows how you can plot a bar chart and supply an end value to have it fill.
+    </div>
+    <br />
+    <div id="visualization"></div>
+    <script type="text/javascript">
+        var container = document.getElementById('visualization');
+        var items = [{
+                x: '2014-06-11 00:00:00',
+                end: '2014-06-13 00:00:00',
+                y: 10
+            },
+            {
+                x: '2014-06-13 00:00:00',
+                end: '2014-06-14 00:00:00',
+                y: 15
+            },
+            {
+                x: '2014-06-15 00:00:00',
+                end: '2014-06-16 00:00:00',
+                y: 14
+            },
+            {
+                x: '2014-06-16 00:00:00',
+                end: '2014-06-17 00:00:00',
+                y: 17
+            },
+            {
+                x: '2014-06-17 00:00:00',
+                end: '2014-06-18 00:00:00',
+                y: 20
+            },
+            {
+                x: '2014-06-18 00:00:00',
+                end: '2014-06-25 00:00:00',
+                y: 25
+            },
+        ];
+        var dataset = new vis.DataSet(items);
+        var options = {
+            style: 'bar',
+            drawPoints: false,
+            dataAxis: {
+                icons: true
+            },
+            orientation: 'top',
+            start: '2014-06-10',
+            end: '2014-06-18'
+        };
+        var graph2d = new vis.Graph2d(container, items, options);
+    </script>
+</body>
+</html>

data/examples_for_vis/graph2d/default.css ADDED

@@ -0,0 +1,87 @@
+html, body {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+body, td, th {
+  font-family: arial, sans-serif;
+  font-size: 11pt;
+  color: #4D4D4D;
+  line-height: 1.7em;
+}
+#container {
+  margin: 0 auto;
+  padding-bottom: 50px;
+  width: 900px;
+}
+h1 {
+  font-size: 180%;
+  font-weight: bold;
+  padding: 0;
+  margin: 1em 0 1em 0;
+}
+h2 {
+  padding-top: 20px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #a0c0f0;
+  color: #2B7CE9;
+}
+h3 {
+  font-size: 140%;
+}
+a {
+  color: #2B7CE9;
+  text-decoration: none;
+}
+a:visited {
+  color: #2E60A4;
+}
+a:hover {
+  color: red;
+  text-decoration: underline;
+}
+hr {
+  border: none 0;
+  border-top: 1px solid #abc;
+  height: 1px;
+}
+pre {
+  display: block;
+  font-size: 10pt;
+  line-height: 1.5em;
+  font-family: monospace;
+}
+pre, code {
+  background-color: #f5f5f5;
+}
+table
+{
+  border-collapse: collapse;
+}
+th {
+  font-weight: bold;
+  border: 1px solid lightgray;
+  background-color: #E5E5E5;
+  text-align: left;
+  vertical-align: top;
+  padding: 5px;
+}
+td {
+  border: 1px solid lightgray;
+  padding: 5px;
+  vertical-align: top;
+}

data/examples_for_vis/graph3d/01_basics.html ADDED

@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D 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;
+    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 counter = 0;
+      var steps = 50; // 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({
+            id: counter++,
+            x: x,
+            y: y,
+            z: value,
+            style: value
+          });
+        }
+      }
+      // specify options
+      var options = {
+        width: '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+      // Instantiate our graph object.
+      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/02_camera.html ADDED

@@ -0,0 +1,110 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D camera position</title>
+  <style>
+    body {font: 10pt arial;}
+    td {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/50) * Math.cos(y/50) * 50 + 50);
+    }
+    // callback function, called when the camera position has changed
+    function onCameraPositionChange() {
+      // adjust the values of startDate and endDate
+      var pos = graph.getCameraPosition();
+      document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
+      document.getElementById('vertical').value   = parseFloat(pos.vertical.toFixed(3));
+      document.getElementById('distance').value   = parseFloat(pos.distance.toFixed(3));
+    }
+    // set the camera position
+    function setCameraPosition() {
+      var horizontal = parseFloat(document.getElementById('horizontal').value);
+      var vertical = parseFloat(document.getElementById('vertical').value);
+      var distance = parseFloat(document.getElementById('distance').value);
+      var pos = {
+        horizontal: horizontal,
+        vertical: vertical,
+        distance: distance
+      };
+      graph.setCameraPosition(pos);
+      // retrieve the camera position again, to get the applied values
+      onCameraPositionChange();
+    }
+    // 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 = 50;  // 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,t:0,style:value}
+          ]);
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5
+      };
+      // create our graph
+      var container = document.getElementById('mygraph');
+      graph = new vis.Graph3d(container, data, options);
+      graph.on('cameraPositionChange', onCameraPositionChange);
+    }
+  </script>
+</head>
+<body onload="drawVisualization()">
+<h1>Graph 3d camera position</h1>
+<table>
+  <tr>
+    <td>Horizontal angle (0 to 2*pi)</td>
+    <td><input type="text" id="horizontal" value="1.0"></td>
+  </tr>
+  <tr>
+    <td>Vertical angle (0 to 0.5*pi)</td>
+    <td><input type="text" id="vertical" value="0.5"></td>
+  </tr>
+  <tr>
+    <td>Distance (0.71 to 5.0)</td>
+    <td><input type="text" id="distance" value="1.7"></td>
+  </tr>
+  <tr>
+    <td></td>
+    <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
+  </tr>
+</table>
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/03_filter_data.html ADDED

@@ -0,0 +1,64 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D 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;
+    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 = [];
+      // create some nice looking data with sin/cos
+      var steps = 50;  // 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);
+          var valueRange = (value > 67) ? '67-100' :
+              (value < 33) ? '0-33' :
+                  '33-67';
+          data.push({x:x,y:y,z:value,filter:valueRange,style:value});
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: false,
+        showGrid: true,
+        showShadow: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        filterLabel: 'values'
+      };
+      // 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/04_animation.html ADDED

@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D animation demo</title>
+  <style type="text/css">
+    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, t) {
+      return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 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 = 25;
+      var axisMax = 314;
+      var tMax = 31;
+      var axisStep = axisMax / steps;
+      for (var t = 0; t < tMax; t++) {
+        for (var x = 0; x < axisMax; x+=axisStep) {
+          for (var y = 0; y < axisMax; y+=axisStep) {
+            var value = custom(x, y, t);
+            data.add([
+              {x:x,y:y,z:value,filter:t,style:value}
+            ]);
+          }
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: 'surface',
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        // showAnimationControls: false,
+        keepAspectRatio: true,
+        verticalRatio: 0.5,
+        animationInterval: 100, // milliseconds
+        animationPreload: true
+      };
+      // 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>