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/18_scatterplot.html ADDED

@@ -0,0 +1,63 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Scatterplot</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 | Scatterplot</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can manually disable the automatic sorting of the datapoints by using the <code>sort</code> option. You can use this with the
+    <code>style: 'points'</code> option for making a scatterplot!
+</div>
+<pre class="prettyprint lang-js">
+var options = {
+    sort: false,
+    sampling:false,
+    style:'points'
+};
+</pre>
+<br />
+<div id="visualization"></div>
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = [];
+  for (var i = 0; i < 100; i++) {
+      items.push({x: new Date('2014-06-11').valueOf() + Math.floor(Math.random() * 30000), y: 500 + (Math.random() * 100)});
+  }
+  var dataset = new vis.DataSet(items);
+  var options = {
+      sort: false,
+      sampling:false,
+      style:'points',
+      dataAxis: {
+          left: {
+              range: {
+                  min: 300, max: 800
+              }
+          }
+      },
+      drawPoints: {
+          enabled: true,
+          size: 6,
+          style: 'circle' // square, circle
+      },
+      defaultGroup: 'Scatterplot',
+      height: '600px'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/19_labels.html ADDED

@@ -0,0 +1,213 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Basic Example</title>
+  <style type="text/css">
+    body,
+    html {
+      font-family: sans-serif;
+    }
+    .red {
+      fill: red;
+    }
+  </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 | Label Example</h2>
+  <div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the
+    content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being
+    labelled.
+    <br />
+    <br />
+  </div>
+  <br />
+  <div id="visualization"></div>
+  <script type="text/javascript">
+    var container = document.getElementById('visualization');
+    var label1 = {
+      content: "Label 1 (with offset)",
+      xOffset: 20,
+      yOffset: 20
+    }
+    var label2 = {
+      content: "Label 2",
+      className: "red"
+    }
+    var label3 = {
+      content: "Label 3"
+    }
+    var items = [{
+        group: 1,
+        x: '2014-06-11',
+        y: 10,
+        label: label1
+      },
+      {
+        group: 1,
+        x: '2014-06-12',
+        y: 25,
+        label: label2
+      },
+      {
+        group: 1,
+        x: '2014-06-13',
+        y: 30
+      },
+      {
+        group: 1,
+        x: '2014-06-14',
+        y: 10
+      },
+      {
+        group: 1,
+        x: '2014-06-15',
+        y: 15,
+        label: label3
+      },
+      {
+        group: 1,
+        x: '2014-06-16',
+        y: 30
+      },
+      {
+        group: 2,
+        x: '2014-06-17',
+        y: 10,
+        label: label1
+      },
+      {
+        group: 2,
+        x: '2014-06-18',
+        y: 25,
+        label: label2
+      },
+      {
+        group: 2,
+        x: '2014-06-19',
+        y: 30
+      },
+      {
+        group: 2,
+        x: '2014-06-20',
+        y: 10
+      },
+      {
+        group: 2,
+        x: '2014-06-21',
+        y: 15,
+        label: label3
+      },
+      {
+        group: 2,
+        x: '2014-06-22',
+        y: 30
+      },
+      {
+        group: 3,
+        x: '2014-06-23',
+        y: 10,
+        label: label1
+      },
+      {
+        group: 3,
+        x: '2014-06-24',
+        y: 25,
+        label: label2
+      },
+      {
+        group: 3,
+        x: '2014-06-25',
+        y: 30
+      },
+      {
+        group: 3,
+        x: '2014-06-26',
+        y: 10
+      },
+      {
+        group: 3,
+        x: '2014-06-27',
+        y: 15,
+        label: label3
+      },
+      {
+        group: 3,
+        x: '2014-06-28',
+        y: 30
+      }
+    ];
+    var groups = new vis.DataSet();
+    groups.add({
+      id: 1,
+      content: "Only draw items with labels. Make the data point bigger and a square.",
+      options: {
+        drawPoints: function group1Renderer(item, group, grap2d) {
+          if (item.label == null) {
+            return false;
+          }
+          return {
+            style: 'square',
+            size: 15
+          };
+        }
+      }
+    });
+    groups.add({
+      id: 2,
+      content: "Draw according to the Graph2d callback, but make it every datapoint square one.",
+      options: {
+        drawPoints: {
+          style: 'square'
+        }
+      }
+    });
+    groups.add({
+      id: 3,
+      content: "I want to render datapoints with no labels. Screw the graph2d options. Except the style/size should be according to the graph2d option.",
+      options: {
+        drawPoints: function (item, group, grap2d) {
+          return item.label == null;
+        }
+      }
+    });
+    var dataset = new vis.DataSet(items);
+    var options = {
+      start: '2014-06-10',
+      end: '2014-06-29',
+      style: 'bar',
+      drawPoints: {
+        onRender: function (item, group, grap2d) {
+          return item.label != null;
+        },
+        style: 'circle'
+      }
+    };
+    var graph2d = new vis.Graph2d(container, dataset, groups, options);
+  </script>
+</body>
+</html>

data/examples_for_vis/graph2d/20_shading.html ADDED

@@ -0,0 +1,218 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Shading Example</title>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <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 | Shading Example</h2>
+    <div style="width:700px; font-size:14px; text-align: justify;">
+        This example shows the shading functionality within Graph2d.
+    </div>
+    <br />
+    <div id="visualization"></div>
+    <script type="text/javascript">
+        // create a dataSet with groups
+        var names = ['top', 'bottom', 'zero', 'none', 'group', 'none'];
+        var groups = new vis.DataSet();
+        groups.add({
+            id: 0,
+            content: names[0],
+            options: {
+                shaded: {
+                    orientation: 'top'
+                }
+            }
+        });
+        groups.add({
+            id: 1,
+            content: names[1],
+            options: {
+                shaded: {
+                    orientation: 'bottom'
+                }
+            }
+        });
+        groups.add({
+            id: 2,
+            content: names[2],
+            options: {
+                shaded: {
+                    orientation: 'zero'
+                }
+            }
+        });
+        groups.add({
+            id: 3,
+            options: {
+                excludeFromLegend: true
+            }
+        });
+        groups.add({
+            id: 4,
+            content: names[4],
+            options: {
+                shaded: {
+                    orientation: 'group',
+                    groupId: '3'
+                }
+            }
+        });
+        groups.add({
+            id: 5,
+            content: names[5]
+        });
+        var container = document.getElementById('visualization');
+        var items = [{
+                x: '2014-06-11',
+                y: 0,
+                group: 0
+            },
+            {
+                x: '2014-06-12',
+                y: 15,
+                group: 0
+            },
+            {
+                x: '2014-06-13',
+                y: -15,
+                group: 0
+            },
+            {
+                x: '2014-06-14',
+                y: 0,
+                group: 0
+            },
+            {
+                x: '2014-06-15',
+                y: 0,
+                group: 1
+            },
+            {
+                x: '2014-06-16',
+                y: 15,
+                group: 1
+            },
+            {
+                x: '2014-06-17',
+                y: -15,
+                group: 1
+            },
+            {
+                x: '2014-06-18',
+                y: 0,
+                group: 1
+            },
+            {
+                x: '2014-06-19',
+                y: 0,
+                group: 2
+            },
+            {
+                x: '2014-06-20',
+                y: 15,
+                group: 2
+            },
+            {
+                x: '2014-06-21',
+                y: -15,
+                group: 2
+            },
+            {
+                x: '2014-06-22',
+                y: 0,
+                group: 2
+            },
+            {
+                x: '2014-06-23',
+                y: -2,
+                group: 3
+            },
+            {
+                x: '2014-06-24',
+                y: 13,
+                group: 3
+            },
+            {
+                x: '2014-06-25',
+                y: -17,
+                group: 3
+            },
+            {
+                x: '2014-06-26',
+                y: -2,
+                group: 3
+            },
+            {
+                x: '2014-06-23',
+                y: 2,
+                group: 4
+            },
+            {
+                x: '2014-06-24',
+                y: 17,
+                group: 4
+            },
+            {
+                x: '2014-06-25',
+                y: -13,
+                group: 4
+            },
+            {
+                x: '2014-06-26',
+                y: 2,
+                group: 4
+            },
+            {
+                x: '2014-06-27',
+                y: 0,
+                group: 5
+            },
+            {
+                x: '2014-06-28',
+                y: 15,
+                group: 5
+            },
+            {
+                x: '2014-06-29',
+                y: -15,
+                group: 5
+            },
+            {
+                x: '2014-06-30',
+                y: 0,
+                group: 5
+            }
+        ];
+        var dataset = new vis.DataSet(items);
+        var options = {
+            legend: true,
+            start: '2014-06-07',
+            end: '2014-07-03'
+        };
+        var graph2d = new vis.Graph2d(container, dataset, groups, options);
+    </script>
+</body>
+</html>