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/15_streaming_data.html ADDED

@@ -0,0 +1,122 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+  <meta content="utf-8" http-equiv="encoding">
+  <title>Graph2d | Streaming data</title>
+  <style type="text/css">
+    body, html, select {
+      font: 10pt 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 | Streaming data</h2>
+<p style="max-width: 700px;">
+  This example demonstrates how to apply streaming data input to the Graph2d. The example shows two different ways to let the window move along with the new data, and there are more strategies for that. Note also that it is possible to disable moving and/or zooming the graph by setting options <code>moveable</code> and <code>zoomable</code> false.
+</p>
+<p>
+  <label for="strategy">Strategy:</label>
+  <select id="strategy">
+    <option value="continuous" selected>Continuous (CPU intensive)</option>
+    <option value="discrete">Discrete</option>
+    <option value="static">Static</option>
+  </select>
+</p>
+<div id="visualization"></div>
+<script type="text/javascript">
+  var DELAY = 1000; // delay in ms to add new data points
+  var strategy = document.getElementById('strategy');
+  // create a graph2d with an (currently empty) dataset
+  var container = document.getElementById('visualization');
+  var dataset = new vis.DataSet();
+  var options = {
+    start: vis.moment().add(-30, 'seconds'), // changed so its faster
+    end: vis.moment(),
+    dataAxis: {
+      left: {
+        range: {
+          min:-10, max: 10
+        }
+      }
+    },
+    drawPoints: {
+      style: 'circle' // square, circle
+    },
+    shaded: {
+      orientation: 'bottom' // top, bottom
+    }
+  };
+  var graph2d = new vis.Graph2d(container, dataset, options);
+  // a function to generate data points
+  function y(x) {
+    return (Math.sin(x / 2) + Math.cos(x / 4)) * 5;
+  }
+  function renderStep() {
+    // move the window (you can think of different strategies).
+    var now = vis.moment();
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    switch (strategy.value) {
+      case 'continuous':
+        // continuously move the window
+        graph2d.setWindow(now - interval, now, {animation: false});
+        requestAnimationFrame(renderStep);
+        break;
+      case 'discrete':
+        graph2d.setWindow(now - interval, now, {animation: false});
+        setTimeout(renderStep, DELAY);
+        break;
+      default: // 'static'
+        // move the window 90% to the left when now is larger than the end of the window
+        if (now > range.end) {
+          graph2d.setWindow(now - 0.1 * interval, now + 0.9 * interval);
+        }
+        setTimeout(renderStep, DELAY);
+        break;
+    }
+  }
+  renderStep();
+  /**
+   * Add a new datapoint to the graph
+   */
+  function addDataPoint() {
+    // add a new data point to the dataset
+    var now = vis.moment();
+    dataset.add({
+      x: now,
+      y: y(now / 1000)
+    });
+    // remove all data points which are no longer visible
+    var range = graph2d.getWindow();
+    var interval = range.end - range.start;
+    var oldIds = dataset.getIds({
+      filter: function (item) {
+        return item.x < range.start - interval;
+      }
+    });
+    dataset.remove(oldIds);
+    setTimeout(addDataPoint, DELAY);
+  }
+  addDataPoint();
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/16_bothAxisTitles.html ADDED

@@ -0,0 +1,201 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <title>Graph2d | Axis Titles and Styling</title>
+    <link href="../../vendor/assets/stylesheets/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
+    <script src="../../vendor/assets/javascripts/vis.js"></script>
+    <style type="text/css">
+        body, html {
+            font-family: sans-serif;
+        }
+        .custom-style1 {
+            fill: #f2ea00;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #b3ab00;
+        }
+        .custom-style2 {
+            fill: #00a0f2;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #050092;
+        }
+        .custom-style3 {
+            fill: #00f201;
+            fill-opacity:0;
+            stroke-width:2px;
+            stroke: #029200;
+        }
+        path.custom-style3.vis-fill {
+            fill-opacity:0.5 !important;
+            stroke: none;
+        }
+    </style>
+    </head>
+<body>
+<h2>Graph2d | Axis Titles and Styling</h2>
+<div style="width:800px; font-size:14px; text-align: justify;">
+<table>
+    <tr>
+        <td>
+            This example shows setting a title for the left and right axis. Optionally the example allows the user
+            to show icons and labels on the left and right axis.
+        </td>
+        <td>
+            <table>
+                <tr>
+                    <td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
+                    <td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
+                    <td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
+                    <td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
+                </tr>
+                <tr>
+                    <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
+                    <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
+                </tr>
+            </table>
+        </td>
+    </tr>
+</table>
+</div>
+<br />
+<div id="visualization"></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],
+        className: 'custom-style1',
+        options: {
+            drawPoints: {
+                style: 'square' // square, circle
+            },
+            shaded: {
+                orientation: 'bottom' // top, bottom
+            }
+        }});
+    groups.add({
+        id: 1,
+        content: names[1],
+        className: 'custom-style2',
+        options: {
+            style:'bar',
+            drawPoints: {style: 'circle',
+                size: 10
+            }
+        }});
+    groups.add({
+        id: 2,
+        content: names[2],
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: false
+        }
+    });
+    groups.add({
+        id: 3,
+        content: names[3],
+        className: 'custom-style3',
+        options: {
+            yAxisOrientation: 'right', // right, left
+            drawPoints: {
+                style: 'circle' // square, circle
+            },
+            shaded: {
+                orientation: 'top' // top, bottom
+            }
+        }});
+    var container = document.getElementById('visualization');
+    var items = [
+        {x: '2014-06-12', y: 0 , 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: 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: 600, group: 2},
+        {x: '2014-06-23', y: 100, group: 2},
+        {x: '2014-06-24', y: 250, group: 2},
+        {x: '2014-06-25', y: 300, group: 2},
+        {x: '2014-06-26', y: 200, group: 3},
+        {x: '2014-06-27', y: 600, group: 3},
+        {x: '2014-06-28', y: 1000, group: 3},
+        {x: '2014-06-29', y: 250, group: 3},
+        {x: '2014-06-30', y: 300, group: 3}
+    ];
+    var dataset = new vis.DataSet(items);
+    var options = {
+        dataAxis: {
+            showMinorLabels: false,
+            right: {
+                title: {
+                    text: 'Title (right axis)'
+                }
+            }
+        },
+        legend: {left:{position:"bottom-left"}},
+        start: '2014-06-09',
+        end: '2014-07-03'
+    };
+    var graph2d = new vis.Graph2d(container, items, groups, options);
+    function showIcons(show) {
+        graph2d.setOptions({dataAxis: {icons: show}});
+    }
+    function showTitle(axis, show) {
+        var title;
+        if(show == true) {
+            title = {text: "Title (" + axis + " axis)"};
+        }
+        else {
+            title = undefined;
+        }
+        if(axis == 'left') {
+            graph2d.setOptions({dataAxis: {left: {title: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {right: {title: title}}});
+        }
+    }
+    var colors=['red','green','blue','black','yellow','purple','pink'];
+    function styleTitle(axis) {
+        var title;
+        title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
+        if(axis == 'left') {
+            graph2d.setOptions({dataAxis: {left: {title: title}}});
+        }
+        else {
+            graph2d.setOptions({dataAxis: {right: {title: title}}});
+        }
+    }
+</script>
+</body>
+</html>

data/examples_for_vis/graph2d/17_dynamicStyling.html ADDED

@@ -0,0 +1,281 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+    <title>Graph2d | Dynamic Styling</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 | Dynamic Styling Example</h2>
+    <div style="width:800px; font-size:14px; text-align: justify;">
+        This example shows how to programmatically change the styling of a group. While this can also be done in CSS, this must be
+        statically defined, and the programmatic interface allows the user to define the look of the graph at runtime.
+    </div>
+    <br/>
+    <table>
+        <col width="600">
+        <col width="220">
+        <tr>
+            <td style="padding-right: 20px; border-right: 1px solid;">
+                <div id="visualization"></div>
+            </td>
+            <td style="padding-left: 5px;">
+                <table style="font-size: 12px;">
+                    <col width="150">
+                    <col width="50">
+                    <tr>
+                        <td>Line Color</td>
+                        <td>
+                            <select id="color" onchange="updateStyle()">
+                                <option value="stroke:green;">green</option>
+                                <option value="stroke:red;">red</option>
+                                <option value="stroke:blue;" selected="selected">blue</option>
+                                <option value="stroke:black;">black</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Line Style</td>
+                        <td>
+                            <select id="line" onchange="updateStyle()">
+                                <option value="stroke-dasharray:1 0;" selected="selected">line</option>
+                                <option value="stroke-dasharray:10 10;">dash</option>
+                                <option value="stroke-dasharray:2 2;">dot</option>
+                                <option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Line thickness</td>
+                        <td>
+                            <select id="thickness" onchange="updateStyle()">
+                                <option value="stroke-width:0;">0</option>
+                                <option value="stroke-width:1;">1</option>
+                                <option value="stroke-width:2;" selected="selected">2</option>
+                                <option value="stroke-width:3;">3</option>
+                                <option value="stroke-width:4;">4</option>
+                                <option value="stroke-width:5;">5</option>
+                                <option value="stroke-width:6;">6</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Fill Position</td>
+                        <td>
+                            <select id="fill" onchange="updateStyle()">
+                                <option value="">none</option>
+                                <option value="top">top</option>
+                                <option value="bottom">bottom</option>
+                                <option value="zero" selected="selected">zero</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Fill Color</td>
+                        <td>
+                            <select id="fillcolor" onchange="updateStyle()">
+                                <option value="fill:green;">green</option>
+                                <option value="fill:red;">red</option>
+                                <option value="fill:blue;" selected="selected">blue</option>
+                                <option value="fill:black;">black</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Fill Opacity</td>
+                        <td>
+                            <select id="fillopacity" onchange="updateStyle()">
+                                <option value="fill-opacity:0.1;">0.1</option>
+                                <option value="fill-opacity:0.2;">0.2</option>
+                                <option value="fill-opacity:0.3;">0.3</option>
+                                <option value="fill-opacity:0.4;">0.4</option>
+                                <option value="fill-opacity:0.5;">0.5</option>
+                                <option value="fill-opacity:0.6;" selected="selected">0.6</option>
+                                <option value="fill-opacity:0.7;">0.7</option>
+                                <option value="fill-opacity:0.8;">0.8</option>
+                                <option value="fill-opacity:0.9;">0.9</option>
+                                <option value="fill-opacity:1;">1</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Points Shape</td>
+                        <td>
+                            <select id="points" onchange="updateStyle()">
+                                <option value="">none</option>
+                                <option value="circle">circle</option>
+                                <option value="square" selected="selected">square</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Points Size</td>
+                        <td>
+                            <select id="pointsize" onchange="updateStyle()">
+                                <option value="1">1</option>
+                                <option value="2">2</option>
+                                <option value="3">3</option>
+                                <option value="4">4</option>
+                                <option value="5">5</option>
+                                <option value="6" selected="selected">6</option>
+                                <option value="8">8</option>
+                                <option value="10">10</option>
+                                <option value="15">15</option>
+                                <option value="20">20</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Points Color</td>
+                        <td>
+                            <select id="pointcolor" onchange="updateStyle()">
+                                <option value="stroke:green;">green</option>
+                                <option value="stroke:red;">red</option>
+                                <option value="stroke:blue;" selected="selected">blue</option>
+                                <option value="stroke:black;">black</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Point Line Thickness</td>
+                        <td>
+                            <select id="pointthickness" onchange="updateStyle()">
+                                <option value="stroke-width:0;">0</option>
+                                <option value="stroke-width:1;">1</option>
+                                <option value="stroke-width:2;" selected="selected">2</option>
+                                <option value="stroke-width:3;">3</option>
+                                <option value="stroke-width:4;">4</option>
+                                <option value="stroke-width:5;">5</option>
+                                <option value="stroke-width:6;">6</option>
+                            </select>
+                        </td>
+                        <tr>
+                        </tr>
+                        <td>Points Fill Color</td>
+                        <td>
+                            <select id="pointfill" onchange="updateStyle()">
+                                <option value="fill:green;">green</option>
+                                <option value="fill:red;">red</option>
+                                <option value="fill:blue;" selected="selected">blue</option>
+                                <option value="fill:black;">black</option>
+                            </select>
+                        </td>
+                    </tr>
+                </table>
+            </td>
+        </tr>
+    </table>
+    <script type="text/javascript">
+        var container = document.getElementById('visualization');
+        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
+            }
+        ];
+        var dataset = new vis.DataSet(items);
+        var options = {
+            start: '2014-06-10',
+            end: '2014-06-18',
+            dataAxis: {
+                showMinorLabels: false,
+                icons: true
+            }
+        };
+        var groupData = {
+            id: 0,
+            content: "Group Name",
+            options: {
+                drawPoints: {
+                    style: 'square' // square, circle
+                },
+                shaded: {
+                    orientation: 'zero' // top, bottom
+                }
+            }
+        };
+        var groups = new vis.DataSet();
+        groups.add(groupData);
+        var graph2d = new vis.Graph2d(container, dataset, groups, options);
+        updateStyle();
+        function updateStyle() {
+            groupData.style = "";
+            groupData.style += document.getElementById("color").value;
+            groupData.style += document.getElementById("line").value;
+            groupData.style += document.getElementById("thickness").value;
+            groupData.options.drawPoints = {};
+            groupData.options.drawPoints.styles = "";
+            groupData.options.drawPoints.style = document.getElementById("points").value;
+            groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
+            groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
+            groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
+            groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
+            if (groupData.options.drawPoints.style == "") {
+                groupData.options.drawPoints = false;
+            }
+            groupData.options.shaded = {};
+            groupData.options.shaded.style = "";
+            groupData.options.shaded.style += document.getElementById("fillcolor").value;
+            groupData.options.shaded.style += document.getElementById("fillopacity").value;
+            groupData.options.shaded.orientation = document.getElementById("fill").value;
+            if (groupData.options.shaded.orientation == "") {
+                groupData.options.shaded = false;
+            }
+            var groups = new vis.DataSet();
+            groups.add(groupData);
+            graph2d.setGroups(groups);
+        }
+    </script>
+</body>
+</html>