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/11_tooltips.html ADDED

@@ -0,0 +1,132 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D tooltips</title>
+  <style>
+    body {font: 10pt arial;}
+    div#info {
+      width     : 600px;
+      text-align: center;
+      margin-top: 2em;
+      font-size : 1.2em;
+    }
+  </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 withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      var extra_content = [
+        'Arbitrary information',
+        'You can access data from the point source object',
+        'Tooltip example content',
+      ];
+      // 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.add({x:x, y:y, z: z, style:value, extra: extra_content[(x*y) % extra_content.length]});
+          }
+          else {
+            data.add({x:x, y:y, z: z, extra: extra_content[(x*y) % extra_content.length]});
+          }
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        showPerspective: true,
+        showLegend: true,
+        showGrid: true,
+        showShadow: false,
+        // Option tooltip can be true, false, or a function returning a string with HTML contents
+        tooltip: function (point) {
+          // parameter point contains properties x, y, z, and data
+          // data is the original object passed to the point constructor
+          return 'value: <b>' + point.z + '</b><br>' + point.data.extra;
+        },
+        // Tooltip default styling can be overridden
+        tooltipStyle: {
+          content: {
+            background    : 'rgba(255, 255, 255, 0.7)',
+            padding       : '10px',
+            borderRadius  : '10px'
+          },
+          line: {
+            borderLeft    : '1px dotted rgba(0, 0, 0, 0.5)'
+          },
+          dot: {
+            border        : '5px solid rgba(0, 0, 0, 0.5)'
+          }
+        },
+        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;
+    }
+  </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>
+<div id="mygraph"></div>
+<div id="info">Hover the mouse cursor over the graph to see tooltips.</div>
+</body>
+</html>

data/examples_for_vis/graph3d/12_custom_labels.html ADDED

@@ -0,0 +1,116 @@
+<!doctype html>
+<html>
+<head>
+  <title>Graph 3D Axis Ticks</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) * 1000;
+    }
+    // Called when the Visualization API is loaded.
+    function drawVisualization() {
+      var style = document.getElementById('style').value;
+      var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
+      // Create and populate a data table.
+      data = new vis.DataSet();
+      // 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.add({x:x, y:y, z: z, style:value});
+          }
+          else {
+            data.add({x:x, y:y, z: z});
+          }
+        }
+      }
+      // specify options
+      var options = {
+        width:  '600px',
+        height: '600px',
+        style: style,
+        showPerspective: true,
+        showGrid: true,
+        showShadow: false,
+        // Option tooltip can be true, false, or a function returning a string with HTML contents
+        //tooltip: true,
+        tooltip: function (point) {
+          // parameter point contains properties x, y, z
+          return 'value: <b>' + point.z + '</b>';
+        },
+        xValueLabel: function(value) {
+            return vis.moment().add(value, 'days').format('DD MMM');
+        },
+        yValueLabel: function(value) {
+            return value * 10 + '%';
+        },
+        zValueLabel: function(value) {
+            return value / 1000 + 'K';
+        },
+        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;
+    }
+  </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>
+<div id="mygraph"></div>
+<div id="info"></div>
+</body>
+</html>

data/examples_for_vis/graph3d/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/playground/csv2array.js ADDED

@@ -0,0 +1,120 @@
+/**
+ * Convert data in CSV (comma separated value) format to a javascript array.
+ *
+ * Values are separated by a comma, or by a custom one character delimeter.
+ * Rows are separated by a new-line character.
+ *
+ * Leading and trailing spaces and tabs are ignored.
+ * Values may optionally be enclosed by double quotes.
+ * Values containing a special character (comma's, double-quotes, or new-lines)
+ *   must be enclosed by double-quotes.
+ * Embedded double-quotes must be represented by a pair of consecutive
+ * double-quotes.
+ *
+ * Example usage:
+ *   var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
+ *   var array = csv2array(csv);
+ *
+ * Author: Jos de Jong, 2010
+ *
+ * @param {string} data      The data in CSV format.
+ * @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
+ *                           The Delimeter must be a single character.
+ * @return {Array} array     A two dimensional array containing the data
+ * @throw {String} error     The method throws an error when there is an
+ *                           error in the provided data.
+ */
+function csv2array(data, delimeter) {
+    // Retrieve the delimeter
+    if (delimeter == undefined)
+        delimeter = ',';
+    if (delimeter && delimeter.length > 1)
+        delimeter = ',';
+    // initialize variables
+    var newline = '\n';
+    var eof = '';
+    var i = 0;
+    var c = data.charAt(i);
+    var row = 0;
+    var col = 0;
+    var array = new Array();
+    while (c != eof) {
+        // skip whitespaces
+        while (c == ' ' || c == '\t' || c == '\r') {
+            c = data.charAt(++i); // read next char
+        }
+        // get value
+        var value = "";
+        if (c == '\"') {
+            // value enclosed by double-quotes
+            c = data.charAt(++i);
+            do {
+                if (c != '\"') {
+                    // read a regular character and go to the next character
+                    value += c;
+                    c = data.charAt(++i);
+                }
+                if (c == '\"') {
+                    // check for escaped double-quote
+                    var cnext = data.charAt(i+1);
+                    if (cnext == '\"') {
+                        // this is an escaped double-quote.
+                        // Add a double-quote to the value, and move two characters ahead.
+                        value += '\"';
+                        i += 2;
+                        c = data.charAt(i);
+                    }
+                }
+            }
+            while (c != eof && c != '\"');
+            if (c == eof) {
+                throw "Unexpected end of data, double-quote expected";
+            }
+            c = data.charAt(++i);
+        }
+        else {
+            // value without quotes
+            while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
+                value += c;
+                c = data.charAt(++i);
+            }
+        }
+        // add the value to the array
+        if (array.length <= row)
+            array.push(new Array());
+        array[row].push(value);
+        // skip whitespaces
+        while (c == ' ' || c == '\t' || c == '\r') {
+            c = data.charAt(++i);
+        }
+        // go to the next row or column
+        if (c == delimeter) {
+            // to the next column
+            col++;
+        }
+        else if (c == newline) {
+            // to the next row
+            col = 0;
+            row++;
+        }
+        else if (c != eof) {
+            // unexpected character
+            throw "Delimiter expected after character " + i;
+        }
+        // go to the next character
+        c = data.charAt(++i);
+    }
+    return array;
+}