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/playground/csv2datatable.html ADDED

@@ -0,0 +1,80 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+<head>
+    <title>Convert CSV to Google Datatable</title>
+    <style>
+        body {font: 10pt arial;}
+    </style>
+    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
+    <script type="text/javascript" src="csv2array.js"></script>
+    <script type="text/javascript">
+        var data = null;
+        var graph = null;
+        function loaded() {
+        }
+        google.load("visualization", "1");
+        // Set callback to run when API is loaded
+        google.setOnLoadCallback(loaded);
+        // Called when the Visualization API is loaded.
+        function convert() {
+            var csv = document.getElementById("csv").value;
+            var datatable = "";
+            // parse the csv content
+            var csvArray = csv2array(csv);
+            // Create and populate a data table.
+            datatable += "data = new google.visualization.DataTable();\n";
+            // read the header row
+            for (var col = 0; col < csvArray[0].length; col++) {
+                datatable += "data.addColumn('number', '" + csvArray[0][col] + "');\n";
+            }
+            // read all data
+            for (var row = 1; row < csvArray.length; row++) {
+                datatable += "data.addRow([";
+                for (var col = 0; col < csvArray[row].length; col++) {
+                    if (col != 0)
+                        datatable += ", ";
+                    datatable += csvArray[row][col];
+                }
+                datatable += "]);\n";
+            }
+            document.getElementById("datatable").value = datatable;
+            alert(csvArray.length + " rows converted");
+        }
+    </script>
+</head>
+<body>
+<div id="graph"></div>
+<div id="info"></div>
+<b>CSV</b><br>
+<textarea id="csv" style="width: 400px; height: 300px;"></textarea>
+<br>
+<br>
+<input type="button" value="Convert" onclick="convert();">
+<br>
+<br>
+<b>Google DataTable</b><br>
+<textarea id="datatable" style="width: 400px; height: 300px;"></textarea>
+</body>
+</html>

data/examples_for_vis/graph3d/playground/datasource.html ADDED

@@ -0,0 +1,173 @@
+<html>
+<head>
+    <title>Graph3d documentation</title>
+    <link rel='stylesheet' href='default.css' type='text/css'>
+    <link href="prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="prettify/prettify.js"></script>
+</head>
+<body onload="prettyPrint();">
+<pre class="prettyprint lang-php">
+&lt;?php
+/*
+This datasource returns a response in the form of a google query response
+USAGE
+All parameters are optional
+datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
+DOCUMENTATION
+http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
+EXAMPLE OF A RESPONSE FILE
+Note that the reqId in the response must correspond with the reqId from the
+request.
+________________________________________________________________________________
+google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'0',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'value',
+       type:'number'}
+    ],
+    rows:[
+      {c:[{v:0}, {v:0}, {v:10.0}]},
+      {c:[{v:1}, {v:0}, {v:12.0}]},
+      {c:[{v:2}, {v:0}, {v:13.0}]},
+      {c:[{v:0}, {v:1}, {v:11.0}]},
+      {c:[{v:1}, {v:1}, {v:14.0}]},
+      {c:[{v:2}, {v:1}, {v:11.0}]}
+    ]
+  }
+});
+________________________________________________________________________________
+*/
+/**
+ * A custom function
+ */
+function custom($x, $y) {
+  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
+  return 50 * exp(-5 * $d / 10) * sin($d*5)
+}
+// retrieve parameters
+$default_stepnum = 25;
+$xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
+$xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
+$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
+$ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
+$ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
+$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
+// in the reply we must fill in the request id that came with the request
+$reqId = getReqId();
+// check for a maximum number of datapoints (for safety)
+if ($xstepnum * $ystepnum &gt; 10000) {
+  echo "google.visualization.Query.setResponse({
+    version:'0.6',
+    reqId:'$reqId',
+    status:'error',
+    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
+  });";
+  exit;
+}
+// output the header part of the response
+echo "google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'$reqId',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'',
+       type:'number'}
+    ],
+    rows:[";
+// output the actual values
+$first = true;
+$xstep = ($xmax - $xmin) / $xstepnum;
+$ystep = ($ymax - $ymin) / $ystepnum;
+for ($x = $xmin; $x &lt; $xmax; $x+=$xstep) {
+  for ($y = $ymin; $y &lt; $ymax; $y+=$ystep) {
+    $value = custom($x,$y);
+    if (!$first) {
+      echo ",\n";
+    }
+    else {
+      echo "\n";
+    }
+    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
+    $first = false;
+  }
+}
+// output the end part of the response
+echo "
+    ]
+  }
+});
+";
+/**
+ * Retrieve the request id from the get/post data
+ * @return {number} $reqId       The request id, or 0 if not found
+ */
+function getReqId() {
+  $reqId = 0;
+  foreach ($_REQUEST as $req) {
+    if (substr($req, 0,6) == "reqId:") {
+      $reqId = substr($req, 6);
+    }
+  }
+  return $reqId;
+}
+?&gt;
+</pre>
+</body>
+</html>

data/examples_for_vis/graph3d/playground/datasource.php ADDED

@@ -0,0 +1,155 @@
+<?php
+/*
+This datasource returns a response in the form of a google query response
+USAGE
+All parameters are optional
+datasource.php?xmin=0&xmax=314&xstepnum=25&ymin=0&ymax=314&ystepnum=25
+DOCUMENTATION
+http://code.google.com/apis/visualization/documentation/dev/implementing_data_source.html
+EXAMPLE OF A RESPONSE FILE
+Note that the reqId in the response must correspond with the reqId from the
+request.
+________________________________________________________________________________
+google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'0',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'value',
+       type:'number'}
+    ],
+    rows:[
+      {c:[{v:0}, {v:0}, {v:10.0}]},
+      {c:[{v:1}, {v:0}, {v:12.0}]},
+      {c:[{v:2}, {v:0}, {v:13.0}]},
+      {c:[{v:0}, {v:1}, {v:11.0}]},
+      {c:[{v:1}, {v:1}, {v:14.0}]},
+      {c:[{v:2}, {v:1}, {v:11.0}]}
+    ]
+  }
+});
+________________________________________________________________________________
+*/
+/**
+ * A custom function
+ */
+function custom($x, $y) {
+  $d = sqrt(pow($x/100, 2) + pow($y/100, 2));
+  return 50 * exp(-5 * $d / 10) * sin($d*5);
+}
+// retrieve parameters
+$default_stepnum = 25;
+$xmin     = isset($_REQUEST['xmin'])     ? (float)$_REQUEST['xmin']   : -100;
+$xmax     = isset($_REQUEST['xmax'])     ? (float)$_REQUEST['xmax']   : 100;
+$xstepnum = isset($_REQUEST['xstepnum']) ? (int)$_REQUEST['xstepnum'] : $default_stepnum;
+$ymin     = isset($_REQUEST['ymin'])     ? (float)$_REQUEST['ymin']   : -100;
+$ymax     = isset($_REQUEST['ymax'])     ? (float)$_REQUEST['ymax']   : 100;
+$ystepnum = isset($_REQUEST['ystepnum']) ? (int)$_REQUEST['ystepnum'] : $default_stepnum;
+// in the reply we must fill in the request id that came with the request
+$reqId = getReqId();
+// check for a maximum number of datapoints (for safety)
+if ($xstepnum * $ystepnum > 10000) {
+  echo "google.visualization.Query.setResponse({
+    version:'0.6',
+    reqId:'$reqId',
+    status:'error',
+    errors:[{reason:'not_supported', message:'Maximum number of datapoints exceeded'}]
+  });";
+  exit;
+}
+// output the header part of the response
+echo "google.visualization.Query.setResponse({
+  version:'0.6',
+  reqId:'$reqId',
+  status:'ok',
+  table:{
+    cols:[
+      {id:'x',
+       label:'x',
+       type:'number'},
+      {id:'y',
+       label:'y',
+       type:'number'},
+      {id:'value',
+       label:'',
+       type:'number'}
+    ],
+    rows:[";
+// output the actual values
+$first = true;
+$xstep = ($xmax - $xmin) / $xstepnum;
+$ystep = ($ymax - $ymin) / $ystepnum;
+for ($x = $xmin; $x < $xmax; $x+=$xstep) {
+  for ($y = $ymin; $y < $ymax; $y+=$ystep) {
+    $value = custom($x,$y);
+    if (!$first) {
+      echo ",\n";
+    }
+    else {
+      echo "\n";
+    }
+    echo "      {c:[{v:$x}, {v:$y}, {v:$value}]}";
+    $first = false;
+  }
+}
+// output the end part of the response
+echo "
+    ]
+  }
+});
+";
+/**
+ * Retrieve the request id from the get/post data
+ * @return {number} $reqId       The request id, or 0 if not found
+ */
+function getReqId() {
+  $reqId = 0;
+  foreach ($_REQUEST as $req) {
+    if (substr($req, 0,6) == "reqId:") {
+      $reqId = substr($req, 6);
+    }
+  }
+  return $reqId;
+}
+?>

data/examples_for_vis/graph3d/playground/index.html ADDED

@@ -0,0 +1,196 @@
+<!doctype html>
+<html>
+<head>
+    <title>Graph 3D - Playground</title>
+    <script type="text/javascript" src="../../../vendor/assets/javascripts/vis.js"></script>
+    <script type="text/javascript" src="playground.js"></script>
+    <script type="text/javascript" src="csv2array.js"></script>
+    <link rel='stylesheet' href='playground.css' type='text/css'>
+    <script type="text/javascript">
+        // Called when the Visualization API is loaded.
+        function drawVisualization() {
+            // TODO
+        }
+    </script>
+</head>
+<body onload="load();">
+<h1>Graph 3D - Playground</h1>
+<table style="width:100%;">
+<col width="50%">
+<col width="50%">
+<tr>
+    <td>
+        <h2>Data</h2>
+        <p>
+            Graph 3D expects a data table with first three to five columns:
+            colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
+            <code>style</code>, <code>filter</code> (optional).
+        </p>
+        <table>
+            <tr>
+                <td style="white-space: nowrap">
+                    <input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
+                </td>
+                <td>
+                    <div id="csv">
+                        <textarea id="csvTextarea"></textarea>
+                        <p>
+                            <a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
+                            <a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
+                            <a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
+                            <a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
+                            <a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
+                            <a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
+                        </p>
+                    </div>
+                </td>
+            </tr>
+          <!-- TODO: add JSON examples -->
+        </table>
+        <br>
+    </td>
+    <td rowspan=2>
+        <h2>Graph</h2>
+        <p>
+            <input type="button" value="Draw graph" onclick="draw();" id="draw">
+        </p>
+        <div id="graph"></div>
+    </td>
+</tr>
+<tr>
+    <td>
+        <h2>Options</h2>
+        <table>
+            <tr>
+                <th>Option</th>
+                <th>Value</th>
+            </tr>
+            <tr>
+                <td>width</td>
+                <td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
+            </tr>
+            <tr>
+                <td>height</td>
+                <td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
+            </tr>
+            <tr>
+                <td>style</td>
+                <td>
+                    <select id="style">
+                        <option value="bar" >bar
+                        <option value="bar-color" >bar-color
+                        <option value="bar-size" >bar-size
+                        <option value="dot" >dot
+                        <option value="dot-color" >dot-color
+                        <option value="dot-size" >dot-size
+                        <option value="dot-line" >dot-line
+                        <option value="line" >line
+                        <option value="grid" >grid
+                        <option value="surface" selected>surface
+                    </select>
+            </tr>
+            <tr>
+                <td>showAnimationControls</td>
+                <td><input type="checkbox" id="showAnimationControls" checked /></td>
+            </tr>
+            <tr>
+                <td>showGrid</td>
+                <td><input type="checkbox" id="showGrid" checked /></td>
+            </tr>
+            <tr>
+                <td>showXAxis</td>
+                <td><input type="checkbox" id="showXAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showYAxis</td>
+                <td><input type="checkbox" id="showYAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showZAxis</td>
+                <td><input type="checkbox" id="showZAxis" checked /></td>
+            </tr>
+            <tr>
+                <td>showPerspective</td>
+                <td><input type="checkbox" id="showPerspective" checked /></td>
+            </tr>
+            <tr>
+                <td>showLegend</td>
+                <td><input type="checkbox" id="showLegend" checked /></td>
+            </tr>
+            <tr>
+                <td>showShadow</td>
+                <td><input type="checkbox" id="showShadow" /></td>
+            </tr>
+            <tr>
+                <td>keepAspectRatio</td>
+                <td><input type="checkbox" id="keepAspectRatio" checked /></td>
+            </tr>
+            <tr>
+                <td>verticalRatio</td>
+                <td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
+            </tr>
+            <tr>
+                <td>animationInterval</td>
+                <td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
+            </tr>
+            <tr>
+                <td>animationPreload</td>
+                <td><input type="checkbox" id="animationPreload" /></td>
+            </tr>
+            <tr>
+                <td>animationAutoStart</td>
+                <td><input type="checkbox" id="animationAutoStart" /></td>
+            </tr>
+            <tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
+            <tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
+            <tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
+            <tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
+            <tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
+            <tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
+            <tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
+            <tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
+            <tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
+            <tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
+            <tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
+            <tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
+            <tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
+            <tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
+            <tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
+            <tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
+            <tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
+            <tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
+            <tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
+            <tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
+        </table>
+    </td>
+</tr>
+</table>
+</body>