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/10_barsSideBySide.html ADDED

@@ -0,0 +1,75 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side 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 Graphs Side by Side Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be the desired result. You can use the
+    barChart.handleOverlap option to automatically plot the bars next to eachother or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+    Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is shown in the <a href="./11_barsSideBySideGroups.html">next example</a>.
+    <br /><br />
+    Handle overlap: <select id="dropdownID">
+    <option value="overlap">overlap</option>
+    <option value="sideBySide">sideBySide</option>
+    <option value="stack">stack</option>
+</select><br/>
+</div>
+<br />
+<div id="visualization"></div>
+<script type="text/javascript">
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-11', y: 10},
+        {x: '2014-06-12', y: 25},
+        {x: '2014-06-13', y: 30},
+        {x: '2014-06-14', y: 10},
+        {x: '2014-06-15', y: 15},
+        {x: '2014-06-16', y: 30},
+        {x: '2014-06-11', y: -12},
+        {x: '2014-06-14', y: 24},
+        {x: '2014-06-15', y: 5},
+        {x: '2014-06-16', y: 12}
+    ];
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        stack:false,
+        barChart: {width:50, align:'center', sideBySide:false}, // align: left, center, right
+        drawPoints: false,
+        dataAxis: {
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, options);
+    var dropdown = document.getElementById("dropdownID");
+    dropdown.onchange = update;
+    function update() {
+        var options = {stack:dropdown.value === 'stack',barChart:{sideBySide:dropdown.value === 'sideBySide'}};
+        graph2d.setOptions(options);
+    }
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/11_barsSideBySideGroups.html ADDED

@@ -0,0 +1,181 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Bar Graphs Side by Side Example with Groups</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 Graphs Side by Side Example with Groups</h2>
+    <div style="width:700px; font-size:14px; text-align: justify;">
+        When using Bar graphs, it can often be the case that there are multiple bars on the same timepoint. This may not always be
+        the desired result. You can use the barChart.handleOverlap option to automatically plot the bars next to eachother
+        or stacked on top of eachother if they occupy the same timeslot. By default, this option is on, the bars overlap.
+        Use the dropdown box to experiment with the options. The stacked only really makes sense when using groups as is
+        shown here.
+        <br />
+        <br /> Handle overlap:
+        <select id="dropdownID">
+            <option value="overlap">overlap</option>
+            <option value="sideBySide" selected="selected">sideBySide</option>
+            <option value="stack">stack</option>
+        </select>
+    </div>
+    <br />
+    <div id="visualization"></div>
+    <script type="text/javascript">
+        var container = document.getElementById('visualization');
+        var groups = new vis.DataSet();
+        groups.add({
+            id: 0,
+            content: "group0"
+        })
+        groups.add({
+            id: 1,
+            content: "group1"
+        })
+        groups.add({
+            id: 2,
+            content: "group2"
+        })
+        var items = [{
+                x: '2014-06-11',
+                y: 10,
+                group: 0
+            },
+            {
+                x: '2014-06-12',
+                y: 25,
+                group: 0
+            },
+            {
+                x: '2014-06-13',
+                y: 30,
+                group: 0
+            },
+            {
+                x: '2014-06-14',
+                y: 10,
+                group: 0
+            },
+            {
+                x: '2014-06-15',
+                y: 15,
+                group: 0
+            },
+            {
+                x: '2014-06-16',
+                y: 30,
+                group: 0
+            },
+            {
+                x: '2014-06-11',
+                y: 12,
+                group: 1
+            },
+            {
+                x: '2014-06-12',
+                y: 15,
+                group: 1
+            },
+            {
+                x: '2014-06-13',
+                y: 34,
+                group: 1
+            },
+            {
+                x: '2014-06-14',
+                y: 24,
+                group: 1
+            },
+            {
+                x: '2014-06-15',
+                y: 5,
+                group: 1
+            },
+            {
+                x: '2014-06-16',
+                y: 12,
+                group: 1
+            },
+            {
+                x: '2014-06-11',
+                y: 22,
+                group: 2
+            },
+            {
+                x: '2014-06-12',
+                y: 14,
+                group: 2
+            },
+            {
+                x: '2014-06-13',
+                y: 24,
+                group: 2
+            },
+            {
+                x: '2014-06-14',
+                y: 21,
+                group: 2
+            },
+            {
+                x: '2014-06-15',
+                y: 30,
+                group: 2
+            },
+            {
+                x: '2014-06-16',
+                y: 18,
+                group: 2
+            }
+        ];
+        var dataset = new vis.DataSet(items);
+        var options = {
+            style: 'bar',
+            stack: false,
+            barChart: {
+                width: 50,
+                align: 'center',
+                sideBySide: true
+            }, // align: left, center, right
+            drawPoints: false,
+            dataAxis: {
+                icons: true
+            },
+            orientation: 'top',
+            start: '2014-06-10',
+            end: '2014-06-18'
+        };
+        var graph2d = new vis.Graph2d(container, items, groups, options);
+        var dropdown = document.getElementById("dropdownID");
+        dropdown.onchange = update;
+        function update() {
+            var options = {
+                stack: dropdown.value === 'stack',
+                barChart: {
+                    sideBySide: dropdown.value === 'sideBySide'
+                }
+            };
+            graph2d.setOptions(options);
+        }
+    </script>
+</body>
+</html>

data/examples_for_vis/graph2d/12_customRange.html ADDED

@@ -0,0 +1,92 @@
+<!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 | Custom axis range</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
+    only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
+    you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
+    If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
+<pre class="prettyprint lang-js">
+var options = {
+    dataAxis: {
+        left: {
+            range: {min:-5, max:30}
+        },
+        right: {
+            range: {min:-5}
+        }
+    }
+};
+</pre>
+</div>
+<br />
+<div id="visualization"></div>
+<script type="text/javascript">
+    var container = document.getElementById('visualization');
+    var groups = new vis.DataSet();
+    groups.add({id: 0, content: "group0"})
+    groups.add({id: 1, content: "group1"})
+    groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
+    var items = [
+        {x: '2014-06-11', y: 10, group:0},
+        {x: '2014-06-12', y: 25, group:0},
+        {x: '2014-06-13', y: 30, group:0},
+        {x: '2014-06-14', y: 10, group:0},
+        {x: '2014-06-15', y: 15, group:0},
+        {x: '2014-06-16', y: 30, group:0},
+        {x: '2014-06-11', y: 12, group:1},
+        {x: '2014-06-12', y: 15, group:1},
+        {x: '2014-06-13', y: 34, group:1},
+        {x: '2014-06-14', y: 24, group:1},
+        {x: '2014-06-15', y: 5, group:1},
+        {x: '2014-06-16', y: 12, group:1},
+        {x: '2014-06-11', y: 22, group:2},
+        {x: '2014-06-12', y: 14, group:2},
+        {x: '2014-06-13', y: 24, group:2},
+        {x: '2014-06-14', y: 21, group:2},
+        {x: '2014-06-15', y: 30, group:2},
+        {x: '2014-06-16', y: 18, group:2}
+    ];
+    var dataset = new vis.DataSet(items);
+    var options = {
+        style:'bar',
+        barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
+        drawPoints: true,
+        dataAxis: {
+            left: {
+                range: {min:-5, max:30}
+            },
+            right: {
+                range: {min:-5}
+            },
+            icons:true
+        },
+        orientation:'top',
+        start: '2014-06-10',
+        end: '2014-06-18'
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/13_localization.html ADDED

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Localization</title>
+  <style type="text/css">
+    body, html, select {
+      font-family: sans-serif;
+      font-size: 11pt;
+    }
+  </style>
+  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.1/moment-with-locales.min.js"></script>
+  <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 | Localization</h2>
+<p>
+  To localize Graph2d, one has to load a version of moment.js including locales. To set a locale, specify option <code>{locale: STRING}</code>.
+</p>
+<p>
+  <label for="locale">Select a locale:</label>
+  <select id="locale">
+    <option value="en" selected>en</option>
+    <option value="nl">nl</option>
+  </select>
+</p>
+<div id="visualization"></div>
+<script type="text/javascript">
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-11', y: 10},
+    {x: '2014-06-12', y: 25},
+    {x: '2014-06-13', y: 30},
+    {x: '2014-06-14', y: 10},
+    {x: '2014-06-15', y: 15},
+    {x: '2014-06-16', y: 30}
+  ];
+  var dataset = new vis.DataSet(items);
+  var options = {
+    start: '2014-06-10',
+    end: '2014-06-18'
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+  // update the locale when changing the select box value
+  var select = document.getElementById('locale');
+  select.onchange = function () {
+    graph2d.setOptions({
+      locale: this.value
+    });
+  };
+  select.onchange();
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/14_toggleGroups.html ADDED

@@ -0,0 +1,145 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>Graph2d | Toggle Groups 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;
+    }
+      div.graphs {
+          width:300px;
+          display:inline-block;
+      }
+  </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 | Groups Example</h2>
+<div style="width:700px; font-size:14px; text-align: justify;">
+    This example shows the groups visibility functionality within Graph2d. Groups have their own visibility option. By using this,
+    all graph2d instances using those groups would show or hide that group. If you have multiple instances sharing the same data and groups,
+    you can use the groups.visibility option to set it on an instance level. The graphs below all share the same groups, items and initial options.
+    We then use a setOptions like so:
+    <pre class="prettyprint lang-js">
+        graph2d1.setOptions({
+            groups:{
+                visibility:{
+                    0:true,               // group id:0 visible
+                    1:false,              // group id:1 hidden
+                    2:false,              // group id:2 hidden
+                    3:false,              // group id:3 hidden
+                    "__ungrouped__":false // default group hidden
+                }
+            }
+        })
+    </pre>
+</div>
+<br />
+<div class="graphs" id="visualization1"></div>
+<div class="graphs" id="visualization2"></div>
+<div class="graphs" id="visualization3"></div>
+<div class="graphs" id="visualization4"></div>
+<div class="graphs" id="visualization5"></div>
+<div class="graphs" id="visualization6"></div>
+<script type="text/javascript">
+    // create a dataSet with groups
+    var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
+    var groups = new vis.DataSet();
+        groups.add({
+        id: 0,
+        content: names[0],
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+    groups.add({
+        id: 1,
+        content: names[1],
+        options: {
+            style:'bar'
+        }});
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {drawPoints: false}
+    });
+    groups.add({
+        id: 3,
+        content: names[3],
+        options: {
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+  var container = document.getElementById('visualization');
+  var items = [
+    {x: '2014-06-13', y: 60},
+    {x: '2014-06-14', y: 40},
+    {x: '2014-06-15', y: 55},
+    {x: '2014-06-16', y: 40},
+    {x: '2014-06-17', y: 50},
+    {x: '2014-06-13', y: 30, group: 0},
+    {x: '2014-06-14', y: 10, group: 0},
+    {x: '2014-06-15', y: 15, group: 1},
+    {x: '2014-06-16', y: 30, group: 1},
+    {x: '2014-06-17', y: 10, group: 1},
+    {x: '2014-06-18', y: 15, group: 1},
+    {x: '2014-06-19', y: 52, group: 1},
+    {x: '2014-06-20', y: 10, group: 1},
+    {x: '2014-06-21', y: 20, group: 2},
+    {x: '2014-06-22', y: 60, group: 2},
+    {x: '2014-06-23', y: 10, group: 2},
+    {x: '2014-06-24', y: 25, group: 2},
+    {x: '2014-06-25', y: 30, group: 2},
+    {x: '2014-06-26', y: 20, group: 3},
+    {x: '2014-06-27', y: 60, group: 3},
+    {x: '2014-06-28', y: 10, group: 3},
+    {x: '2014-06-29', y: 25, group: 3},
+    {x: '2014-06-30', y: 30, group: 3}
+  ];
+  var dataset = new vis.DataSet(items);
+  var options = {
+      defaultGroup: 'ungrouped',
+      legend: false,
+      graphHeight:200,
+      start: '2014-06-10',
+      end: '2014-07-04',
+      showMajorLabels:false,
+      showMinorLabels:false
+  };
+  var graph2d1 = new vis.Graph2d(document.getElementById('visualization1'), dataset, groups, options);
+  var graph2d2 = new vis.Graph2d(document.getElementById('visualization2'), dataset, groups, options);
+  var graph2d3 = new vis.Graph2d(document.getElementById('visualization3'), dataset, groups, options);
+  var graph2d4 = new vis.Graph2d(document.getElementById('visualization4'), dataset, groups, options);
+  var graph2d5 = new vis.Graph2d(document.getElementById('visualization5'), dataset, groups, options);
+  var graph2d6 = new vis.Graph2d(document.getElementById('visualization6'), dataset, groups, options);
+  graph2d1.setOptions({groups:{visibility:{0:true, 1:false, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d2.setOptions({groups:{visibility:{0:false, 1:true, 2:false, 3:false, "__ungrouped__":false}}})
+  graph2d3.setOptions({groups:{visibility:{0:false, 1:false, 2:true, 3:false, "__ungrouped__":false}}})
+  graph2d4.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:true, "__ungrouped__":false}}})
+  graph2d5.setOptions({groups:{visibility:{0:false, 1:false, 2:false, 3:false, "__ungrouped__":true}}})
+</script>
+</body>
+</html>