From 05e761abca3ff42dbba371af0560b82707dfe7c0 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Fri, 28 Oct 2016 13:31:36 -0700 Subject: updated vis --- www/lib/vis/examples/graph3d/01_basics.html | 61 +++ www/lib/vis/examples/graph3d/02_camera.html | 110 +++++ www/lib/vis/examples/graph3d/03_filter_data.html | 64 +++ www/lib/vis/examples/graph3d/04_animation.html | 71 +++ www/lib/vis/examples/graph3d/05_line.html | 60 +++ www/lib/vis/examples/graph3d/06_moving_dots.html | 78 +++ .../vis/examples/graph3d/07_dot_cloud_colors.html | 68 +++ .../vis/examples/graph3d/08_dot_cloud_size.html | 67 +++ www/lib/vis/examples/graph3d/09_mobile.html | 79 +++ www/lib/vis/examples/graph3d/10_styling.html | 121 +++++ www/lib/vis/examples/graph3d/11_tooltips.html | 104 ++++ www/lib/vis/examples/graph3d/12_custom_labels.html | 116 +++++ www/lib/vis/examples/graph3d/default.css | 87 ++++ .../vis/examples/graph3d/playground/csv2array.js | 120 +++++ .../examples/graph3d/playground/csv2datatable.html | 80 +++ .../examples/graph3d/playground/datasource.html | 173 +++++++ .../vis/examples/graph3d/playground/datasource.php | 155 ++++++ www/lib/vis/examples/graph3d/playground/index.html | 179 +++++++ .../vis/examples/graph3d/playground/playground.css | 91 ++++ .../vis/examples/graph3d/playground/playground.js | 544 +++++++++++++++++++++ .../graph3d/playground/prettify/lang-apollo.js | 2 + .../graph3d/playground/prettify/lang-css.js | 2 + .../graph3d/playground/prettify/lang-hs.js | 2 + .../graph3d/playground/prettify/lang-lisp.js | 2 + .../graph3d/playground/prettify/lang-lua.js | 2 + .../graph3d/playground/prettify/lang-ml.js | 2 + .../graph3d/playground/prettify/lang-proto.js | 1 + .../graph3d/playground/prettify/lang-scala.js | 2 + .../graph3d/playground/prettify/lang-sql.js | 2 + .../graph3d/playground/prettify/lang-vb.js | 2 + .../graph3d/playground/prettify/lang-vhdl.js | 3 + .../graph3d/playground/prettify/lang-wiki.js | 2 + .../graph3d/playground/prettify/lang-yaml.js | 2 + .../graph3d/playground/prettify/prettify.css | 1 + .../graph3d/playground/prettify/prettify.js | 33 ++ 35 files changed, 2488 insertions(+) create mode 100644 www/lib/vis/examples/graph3d/01_basics.html create mode 100644 www/lib/vis/examples/graph3d/02_camera.html create mode 100644 www/lib/vis/examples/graph3d/03_filter_data.html create mode 100644 www/lib/vis/examples/graph3d/04_animation.html create mode 100644 www/lib/vis/examples/graph3d/05_line.html create mode 100644 www/lib/vis/examples/graph3d/06_moving_dots.html create mode 100644 www/lib/vis/examples/graph3d/07_dot_cloud_colors.html create mode 100644 www/lib/vis/examples/graph3d/08_dot_cloud_size.html create mode 100644 www/lib/vis/examples/graph3d/09_mobile.html create mode 100644 www/lib/vis/examples/graph3d/10_styling.html create mode 100644 www/lib/vis/examples/graph3d/11_tooltips.html create mode 100644 www/lib/vis/examples/graph3d/12_custom_labels.html create mode 100644 www/lib/vis/examples/graph3d/default.css create mode 100644 www/lib/vis/examples/graph3d/playground/csv2array.js create mode 100644 www/lib/vis/examples/graph3d/playground/csv2datatable.html create mode 100644 www/lib/vis/examples/graph3d/playground/datasource.html create mode 100644 www/lib/vis/examples/graph3d/playground/datasource.php create mode 100644 www/lib/vis/examples/graph3d/playground/index.html create mode 100644 www/lib/vis/examples/graph3d/playground/playground.css create mode 100644 www/lib/vis/examples/graph3d/playground/playground.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-apollo.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-css.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-hs.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-lisp.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-lua.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-ml.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-proto.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-scala.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-sql.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-vb.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-vhdl.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-wiki.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/lang-yaml.js create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/prettify.css create mode 100644 www/lib/vis/examples/graph3d/playground/prettify/prettify.js (limited to 'www/lib/vis/examples/graph3d') diff --git a/www/lib/vis/examples/graph3d/01_basics.html b/www/lib/vis/examples/graph3d/01_basics.html new file mode 100644 index 00000000..10cd9e55 --- /dev/null +++ b/www/lib/vis/examples/graph3d/01_basics.html @@ -0,0 +1,61 @@ + + + + Graph 3D demo + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/02_camera.html b/www/lib/vis/examples/graph3d/02_camera.html new file mode 100644 index 00000000..bbc9f7d0 --- /dev/null +++ b/www/lib/vis/examples/graph3d/02_camera.html @@ -0,0 +1,110 @@ + + + + Graph 3D camera position + + + + + + + + + + +

Graph 3d camera position

+ + + + + + + + + + + + + + + + + +
Horizontal angle (0 to 2*pi)
Vertical angle (0 to 0.5*pi)
Distance (0.71 to 5.0)
+ +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/03_filter_data.html b/www/lib/vis/examples/graph3d/03_filter_data.html new file mode 100644 index 00000000..4fd4a739 --- /dev/null +++ b/www/lib/vis/examples/graph3d/03_filter_data.html @@ -0,0 +1,64 @@ + + + + Graph 3D demo + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/04_animation.html b/www/lib/vis/examples/graph3d/04_animation.html new file mode 100644 index 00000000..c0d99664 --- /dev/null +++ b/www/lib/vis/examples/graph3d/04_animation.html @@ -0,0 +1,71 @@ + + + + Graph 3D animation demo + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/05_line.html b/www/lib/vis/examples/graph3d/05_line.html new file mode 100644 index 00000000..40de188e --- /dev/null +++ b/www/lib/vis/examples/graph3d/05_line.html @@ -0,0 +1,60 @@ + + + + Graph 3D line demo + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/06_moving_dots.html b/www/lib/vis/examples/graph3d/06_moving_dots.html new file mode 100644 index 00000000..b24bb520 --- /dev/null +++ b/www/lib/vis/examples/graph3d/06_moving_dots.html @@ -0,0 +1,78 @@ + + + + Graph 3D animation moving dots + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/07_dot_cloud_colors.html b/www/lib/vis/examples/graph3d/07_dot_cloud_colors.html new file mode 100644 index 00000000..07cab6de --- /dev/null +++ b/www/lib/vis/examples/graph3d/07_dot_cloud_colors.html @@ -0,0 +1,68 @@ + + + + Graph 3D cloud with colored dots + + + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/08_dot_cloud_size.html b/www/lib/vis/examples/graph3d/08_dot_cloud_size.html new file mode 100644 index 00000000..46218108 --- /dev/null +++ b/www/lib/vis/examples/graph3d/08_dot_cloud_size.html @@ -0,0 +1,67 @@ + + + + Graph 3D cloud with sized dots + + + + + + + + +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/09_mobile.html b/www/lib/vis/examples/graph3d/09_mobile.html new file mode 100644 index 00000000..b3a99598 --- /dev/null +++ b/www/lib/vis/examples/graph3d/09_mobile.html @@ -0,0 +1,79 @@ + + + + Graph 3D demo + + + + + + + + + + + + + +
+ + diff --git a/www/lib/vis/examples/graph3d/10_styling.html b/www/lib/vis/examples/graph3d/10_styling.html new file mode 100644 index 00000000..033b7ba5 --- /dev/null +++ b/www/lib/vis/examples/graph3d/10_styling.html @@ -0,0 +1,121 @@ + + + + Graph 3D styles + + + + + + + + + + + +

+ +

+ +

+ +

+ +

+ +

+

+ +

+ +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/11_tooltips.html b/www/lib/vis/examples/graph3d/11_tooltips.html new file mode 100644 index 00000000..6ae32a39 --- /dev/null +++ b/www/lib/vis/examples/graph3d/11_tooltips.html @@ -0,0 +1,104 @@ + + + + Graph 3D tooltips + + + + + + + + + + + +

+ +

+ +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/12_custom_labels.html b/www/lib/vis/examples/graph3d/12_custom_labels.html new file mode 100644 index 00000000..b6fe8176 --- /dev/null +++ b/www/lib/vis/examples/graph3d/12_custom_labels.html @@ -0,0 +1,116 @@ + + + + Graph 3D Axis Ticks + + + + + + + + + + + +

+ +

+ +
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/default.css b/www/lib/vis/examples/graph3d/default.css new file mode 100644 index 00000000..f7afb828 --- /dev/null +++ b/www/lib/vis/examples/graph3d/default.css @@ -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; +} diff --git a/www/lib/vis/examples/graph3d/playground/csv2array.js b/www/lib/vis/examples/graph3d/playground/csv2array.js new file mode 100644 index 00000000..95d0c4a6 --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/csv2array.js @@ -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; +} diff --git a/www/lib/vis/examples/graph3d/playground/csv2datatable.html b/www/lib/vis/examples/graph3d/playground/csv2datatable.html new file mode 100644 index 00000000..08d3c65d --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/csv2datatable.html @@ -0,0 +1,80 @@ + + + + Convert CSV to Google Datatable + + + + + + + + + + +
+ +
+ +CSV
+ +
+
+ +
+
+ +Google DataTable
+ + + + diff --git a/www/lib/vis/examples/graph3d/playground/datasource.html b/www/lib/vis/examples/graph3d/playground/datasource.html new file mode 100644 index 00000000..7a593604 --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/datasource.html @@ -0,0 +1,173 @@ + + + + Graph3d documentation + + + + + + + + +
+<?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;
+}
+
+
+?>
+
+
+ + + diff --git a/www/lib/vis/examples/graph3d/playground/datasource.php b/www/lib/vis/examples/graph3d/playground/datasource.php new file mode 100644 index 00000000..9c265cb9 --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/datasource.php @@ -0,0 +1,155 @@ + 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; +} + + +?> diff --git a/www/lib/vis/examples/graph3d/playground/index.html b/www/lib/vis/examples/graph3d/playground/index.html new file mode 100644 index 00000000..4f42260e --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/index.html @@ -0,0 +1,179 @@ + + + + + Graph 3D - Playground + + + + + + + + + + + + + +

Graph 3D - Playground

+ + +++ + + + + + + + +
+

Data

+

+ Graph 3D expects a data table with first three to five columns: + colums x, y, z (optional), + style, filter (optional). +

+ + + + + + + +
+ Csv + + +
+ +
+ 		+

Graph

+

+ +

+ +
+
+

Options

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OptionValue
width for example "500px" or "100%"
height for example "500px" or "100%"
style + +
showAnimationControls
showGrid
showPerspective
showShadow
keepAspectRatio
verticalRatio a value between 0.1 and 1.0
animationInterval in milliseconds
animationPreload
animationAutoStart
xCenter
yCenter
xMin
xMax
xStep
yMin
yMax
yStep
zMin
zMax
zStep
valueMin
valueMax
xBarWidth
yBarWidth
xLabel
yLabel
zLabel
filterLabel
legendLabel
+ +
+ + diff --git a/www/lib/vis/examples/graph3d/playground/playground.css b/www/lib/vis/examples/graph3d/playground/playground.css new file mode 100644 index 00000000..5139d4b5 --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/playground.css @@ -0,0 +1,91 @@ +body +{ + font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; +} + +h1 +{ + font-size: 180%; + font-weight: bold; + + margin: 1em 0 1em 0; +} + +h2 +{ + font-size: 140%; + padding: 5px; + border-bottom: 1px solid #a0c0f0; + color: #2B7CE9; +} + +h3 +{ + font-size: 100%; +} + +hr +{ + border: none 0; + border-top: 1px solid #a0c0f0; + height: 1px; +} + +pre.code +{ + display: block; + padding: 8px; + border: 1px dashed #ccc; +} + +table +{ + border-collapse: collapse; +} + +th, td +{ + font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; + text-align: left; + vertical-align: top; + /*border: 1px solid #888;*/ + padding: 3px; +} + +th +{ + font-weight: bold; +} + + +textarea { + width: 500px; + height: 200px; + border: 1px solid #888; +} + +input[type=text] { + border: 1px solid #888; +} + +#datasourceText, #googlespreadsheetText { + width: 500px; + +} + +.info { + color: gray; +} + +a { + color: gray; +} +a:hover { + color: red; +} + + +#graph { + width: 100%; + height: 600px; +} diff --git a/www/lib/vis/examples/graph3d/playground/playground.js b/www/lib/vis/examples/graph3d/playground/playground.js new file mode 100644 index 00000000..5b93dddb --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/playground.js @@ -0,0 +1,544 @@ + +var query = null; + + +function load() { + selectDataType(); + + loadCsvExample(); + loadJsonExample(); + loadJavascriptExample(); + loadGooglespreadsheetExample(); + loadDatasourceExample(); + + draw(); +} + + + +/** + * Upate the UI based on the currently selected datatype + */ +function selectDataType() { +} + + +function round(value, decimals) { + return parseFloat(value.toFixed(decimals)); +} + +function loadCsvExample() { + var csv = ""; + + // headers + csv += '"x", "y", "value"\n'; + + // create some nice looking data with sin/cos + var steps = 30; + var axisMax = 314; + var axisStep = axisMax / steps; + for (var x = 0; x < axisMax; x+=axisStep) { + for (var y = 0; y < axisMax; y+=axisStep) { + var value = Math.sin(x/50) * Math.cos(y/50) * 50 + 50; + + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n'; + } + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "surface"; + document.getElementById("verticalRatio").value = "0.5"; + + document.getElementById("xLabel").value = "x"; + document.getElementById("yLabel").value = "y"; + document.getElementById("zLabel").value = "value"; + document.getElementById("filterLabel").value = ""; + document.getElementById("legendLabel").value = ""; + drawCsv(); +} + + +function loadCsvAnimationExample() { + var csv = ""; + + // headers + csv += '"x", "y", "value", "time"\n'; + + // create some nice looking data with sin/cos + var steps = 20; + var axisMax = 314; + var tMax = 31; + var axisStep = axisMax / steps; + for (var t = 0; t < tMax; t++) { + for (var x = 0; x < axisMax; x+=axisStep) { + for (var y = 0; y < axisMax; y+=axisStep) { + var value = Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50; + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + ', ' + t + '\n'; + } + } + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "surface"; + document.getElementById("verticalRatio").value = "0.5"; + document.getElementById("animationInterval").value = 100; + + document.getElementById("xLabel").value = "x"; + document.getElementById("yLabel").value = "y"; + document.getElementById("zLabel").value = "value"; + document.getElementById("filterLabel").value = "time"; + document.getElementById("legendLabel").value = ""; + + drawCsv(); +} + + +function loadCsvLineExample() { + var csv = ""; + + // headers + csv += '"sin(t)", "cos(t)", "t"\n'; + + // create some nice looking data with sin/cos + var steps = 100; + var axisMax = 314; + var tmax = 4 * 2 * Math.PI; + var axisStep = axisMax / steps; + for (t = 0; t < tmax; t += tmax / steps) { + var r = 1; + var x = r * Math.sin(t); + var y = r * Math.cos(t); + var z = t; + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + '\n'; + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "line"; + document.getElementById("verticalRatio").value = "1.0"; + document.getElementById("showPerspective").checked = false; + + document.getElementById("xLabel").value = "sin(t)"; + document.getElementById("yLabel").value = "cos(t)"; + document.getElementById("zLabel").value = "t"; + document.getElementById("filterLabel").value = ""; + document.getElementById("legendLabel").value = ""; + + drawCsv(); +} + +function loadCsvMovingDotsExample() { + var csv = ""; + + // headers + csv += '"x", "y", "z", "color value", "time"\n'; + + // create some shortcuts to math functions + var sin = Math.sin; + var cos = Math.cos; + var pi = Math.PI; + + // create the animation data + var tmax = 2.0 * pi; + var tstep = tmax / 75; + var dotCount = 1; // set this to 1, 2, 3, 4, ... + for (var t = 0; t < tmax; t += tstep) { + var tgroup = parseFloat(t.toFixed(2)); + var value = t; + + // a dot in the center + var x = 0; + var y = 0; + var z = 0; + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n'; + + // one or multiple dots moving around the center + for (var dot = 0; dot < dotCount; dot++) { + var tdot = t + 2*pi * dot / dotCount; + //data.addRow([sin(tdot), cos(tdot), sin(tdot), value, tgroup]); + //data.addRow([sin(tdot), -cos(tdot), sin(tdot + tmax*1/2), value, tgroup]); + + var x = sin(tdot); + var y = cos(tdot); + var z = sin(tdot); + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n'; + + var x = sin(tdot); + var y = -cos(tdot); + var z = sin(tdot + tmax*1/2); + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(value, 2)+ ', ' + round(tgroup, 2) + '\n'; + + } + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "dot-color"; + document.getElementById("verticalRatio").value = "1.0"; + document.getElementById("animationInterval").value = "35"; + document.getElementById("animationAutoStart").checked = true; + document.getElementById("showPerspective").checked = true; + + document.getElementById("xLabel").value = "x"; + document.getElementById("yLabel").value = "y"; + document.getElementById("zLabel").value = "z"; + document.getElementById("filterLabel").value = "time"; + document.getElementById("legendLabel").value = "color value"; + + drawCsv(); +} + +function loadCsvColoredDotsExample() { + var csv = ""; + + // headers + csv += '"x", "y", "z", "distance"\n'; + + // create some shortcuts to math functions + var sqrt = Math.sqrt; + var pow = Math.pow; + var random = Math.random; + + // create the animation data + var imax = 200; + for (var i = 0; i < imax; i++) { + var x = pow(random(), 2); + var y = pow(random(), 2); + var z = pow(random(), 2); + var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)); + + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(dist, 2)+ '\n'; + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "dot-color"; + document.getElementById("verticalRatio").value = "1.0"; + document.getElementById("showPerspective").checked = true; + + document.getElementById("xLabel").value = "x"; + document.getElementById("yLabel").value = "y"; + document.getElementById("zLabel").value = "value"; + document.getElementById("legendLabel").value = "distance" + document.getElementById("filterLabel").value = ""; + + drawCsv(); +} + +function loadCsvSizedDotsExample() { + var csv = ""; + + // headers + csv += '"x", "y", "z", "range"\n'; + + // create some shortcuts to math functions + var sqrt = Math.sqrt; + var pow = Math.pow; + var random = Math.random; + + // create the animation data + var imax = 200; + for (var i = 0; i < imax; i++) { + var x = pow(random(), 2); + var y = pow(random(), 2); + var z = pow(random(), 2); + var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2)); + var range = sqrt(2) - dist; + + csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(range, 2)+ '\n'; + } + + document.getElementById("csvTextarea").innerHTML = csv; + + // also adjust some settings + document.getElementById("style").value = "dot-size"; + document.getElementById("verticalRatio").value = "1.0"; + document.getElementById("showPerspective").checked = true; + + document.getElementById("xLabel").value = "x"; + document.getElementById("yLabel").value = "y"; + document.getElementById("zLabel").value = "z"; + document.getElementById("legendLabel").value = "range"; + document.getElementById("filterLabel").value = ""; + + drawCsv(); +} + + +function loadJsonExample() { +} + + +function loadJavascriptExample() { +} + +function loadJavascriptFunctionExample() { +} + +function loadGooglespreadsheetExample() { + +} + + +function loadDatasourceExample() { +} + + + +/** + * Retrieve teh currently selected datatype + * @return {string} datatype + */ +function getDataType() { + return "csv"; +} + + +/** + * Retrieve the datatable from the entered contents of the csv text + * @param {boolean} [skipValue] | if true, the 4th element is a filter value + * @return {vis DataSet} + */ +function getDataCsv() { + var csv = document.getElementById("csvTextarea").value; + + // parse the csv content + var csvArray = csv2array(csv); + + var data = new vis.DataSet(); + + var skipValue = false; + if (document.getElementById("filterLabel").value != "" && document.getElementById("legendLabel").value == "") { + skipValue = true; + } + + // read all data + for (var row = 1; row < csvArray.length; row++) { + if (csvArray[row].length == 4 && skipValue == false) { + data.add({x:parseFloat(csvArray[row][0]), + y:parseFloat(csvArray[row][1]), + z:parseFloat(csvArray[row][2]), + style:parseFloat(csvArray[row][3])}); + } + else if (csvArray[row].length == 4 && skipValue == true) { + data.add({x:parseFloat(csvArray[row][0]), + y:parseFloat(csvArray[row][1]), + z:parseFloat(csvArray[row][2]), + filter:parseFloat(csvArray[row][3])}); + } + else if (csvArray[row].length == 5) { + data.add({x:parseFloat(csvArray[row][0]), + y:parseFloat(csvArray[row][1]), + z:parseFloat(csvArray[row][2]), + style:parseFloat(csvArray[row][3]), + filter:parseFloat(csvArray[row][4])}); + } + else { + data.add({x:parseFloat(csvArray[row][0]), + y:parseFloat(csvArray[row][1]), + z:parseFloat(csvArray[row][2]), + style:parseFloat(csvArray[row][2])}); + } + } + + return data; +} + +/** + * remove leading and trailing spaces + */ +function trim(text) { + while (text.length && text.charAt(0) == ' ') + text = text.substr(1); + + while (text.length && text.charAt(text.length-1) == ' ') + text = text.substr(0, text.length-1); + + return text; +} + +/** + * Retrieve the datatable from the entered contents of the javascript text + * @return {vis Dataset} + */ +function getDataJson() { + var json = document.getElementById("jsonTextarea").value; + var data = new google.visualization.DataTable(json); + + return data; +} + + +/** + * Retrieve the datatable from the entered contents of the javascript text + * @return {vis Dataset} + */ +function getDataJavascript() { + var js = document.getElementById("javascriptTextarea").value; + + eval(js); + + return data; +} + + +/** + * Retrieve the datatable from the entered contents of the datasource text + * @return {vis Dataset} + */ +function getDataDatasource() { +} + +/** + * Retrieve a JSON object with all options + */ +function getOptions() { + return { + width: document.getElementById("width").value, + height: document.getElementById("height").value, + style: document.getElementById("style").value, + showAnimationControls: (document.getElementById("showAnimationControls").checked != false), + showGrid: (document.getElementById("showGrid").checked != false), + showPerspective: (document.getElementById("showPerspective").checked != false), + showShadow: (document.getElementById("showShadow").checked != false), + keepAspectRatio: (document.getElementById("keepAspectRatio").checked != false), + verticalRatio: document.getElementById("verticalRatio").value, + animationInterval: document.getElementById("animationInterval").value, + xLabel: document.getElementById("xLabel").value, + yLabel: document.getElementById("yLabel").value, + zLabel: document.getElementById("zLabel").value, + filterLabel: document.getElementById("filterLabel").value, + legendLabel: document.getElementById("legendLabel").value, + animationPreload: (document.getElementById("animationPreload").checked != false), + animationAutoStart:(document.getElementById("animationAutoStart").checked != false), + + xCenter: Number(document.getElementById("xCenter").value) || undefined, + yCenter: Number(document.getElementById("yCenter").value) || undefined, + + xMin: Number(document.getElementById("xMin").value) || undefined, + xMax: Number(document.getElementById("xMax").value) || undefined, + xStep: Number(document.getElementById("xStep").value) || undefined, + yMin: Number(document.getElementById("yMin").value) || undefined, + yMax: Number(document.getElementById("yMax").value) || undefined, + yStep: Number(document.getElementById("yStep").value) || undefined, + zMin: Number(document.getElementById("zMin").value) || undefined, + zMax: Number(document.getElementById("zMax").value) || undefined, + zStep: Number(document.getElementById("zStep").value) || undefined, + + valueMin: Number(document.getElementById("valueMin").value) || undefined, + valueMax: Number(document.getElementById("valueMax").value) || undefined, + + xBarWidth: Number(document.getElementById("xBarWidth").value) || undefined, + yBarWidth: Number(document.getElementById("yBarWidth").value) || undefined + }; +} + +/** + * Redraw the graph with the entered data and options + */ +function draw() { + return drawCsv(); +} + + +function drawCsv() { + // retrieve data and options + var data = getDataCsv(); + var options = getOptions(); + + // Creat a graph + var graph = new vis.Graph3d(document.getElementById('graph'), data, options); +} + +function drawJson() { + // retrieve data and options + var data = getDataJson(); + var options = getOptions(); + + // Creat a graph + var graph = new vis.Graph3d(document.getElementById('graph'), data, options); +} + +function drawJavascript() { + // retrieve data and options + var data = getDataJavascript(); + var options = getOptions(); + + // Creat a graph + var graph = new vis.Graph3d(document.getElementById('graph'), data, options); +} + + +function drawGooglespreadsheet() { + // Instantiate our graph object. + drawGraph = function(response) { + document.getElementById("draw").disabled = ""; + + if (response.isError()) { + error = 'Error: ' + response.getMessage(); + document.getElementById('graph').innerHTML = + "" + error + ""; ; + } + + // retrieve the data from the query response + data = response.getDataTable(); + + // specify options + options = getOptions(); + + // Instantiate our graph object. + var graph = new vis.Graph3d(document.getElementById('graph'), data, options); + } + + url = document.getElementById("googlespreadsheetText").value; + document.getElementById("draw").disabled = "disabled"; + + // send the request + query && query.abort(); + query = new google.visualization.Query(url); + query.send(drawGraph); +} + + +function drawDatasource() { + // Instantiate our graph object. + drawGraph = function(response) { + document.getElementById("draw").disabled = ""; + + if (response.isError()) { + error = 'Error: ' + response.getMessage(); + document.getElementById('graph').innerHTML = + "" + error + ""; ; + } + + // retrieve the data from the query response + data = response.getDataTable(); + + // specify options + options = getOptions(); + + // Instantiate our graph object. + var graph = new vis.Graph3d(document.getElementById('graph'), data, options); + }; + + url = document.getElementById("datasourceText").value; + document.getElementById("draw").disabled = "disabled"; + + // if the entered url is a google spreadsheet url, replace the part + // "/ccc?" with "/tq?" in order to retrieve a neat data query result + if (url.indexOf("/ccc?")) { + url.replace("/ccc?", "/tq?"); + } + + // send the request + query && query.abort(); + query = new google.visualization.Query(url); + query.send(drawGraph); +} diff --git a/www/lib/vis/examples/graph3d/playground/prettify/lang-apollo.js b/www/lib/vis/examples/graph3d/playground/prettify/lang-apollo.js new file mode 100644 index 00000000..bfc0014c --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/prettify/lang-apollo.js @@ -0,0 +1,2 @@ +PR.registerLangHandler(PR.createSimpleLexer([["com",/^#[^\r\n]*/,null,"#"],["pln",/^[\t\n\r \xA0]+/,null,"\t\n\r \u00a0"],["str",/^\"(?:[^\"\\]|\\[\s\S])*(?:\"|$)/,null,'"']],[["kwd",/^(?:ADS|AD|AUG|BZF|BZMF|CAE|CAF|CA|CCS|COM|CS|DAS|DCA|DCOM|DCS|DDOUBL|DIM|DOUBLE|DTCB|DTCF|DV|DXCH|EDRUPT|EXTEND|INCR|INDEX|NDX|INHINT|LXCH|MASK|MSK|MP|MSU|NOOP|OVSK|QXCH|RAND|READ|RELINT|RESUME|RETURN|ROR|RXOR|SQUARE|SU|TCR|TCAA|OVSK|TCF|TC|TS|WAND|WOR|WRITE|XCH|XLQ|XXALQ|ZL|ZQ|ADD|ADZ|SUB|SUZ|MPY|MPR|MPZ|DVP|COM|ABS|CLA|CLZ|LDQ|STO|STQ|ALS|LLS|LRS|TRA|TSQ|TMI|TOV|AXT|TIX|DLY|INP|OUT)\s/, +null],["typ",/^(?:-?GENADR|=MINUS|2BCADR|VN|BOF|MM|-?2CADR|-?[1-6]DNADR|ADRES|BBCON|[SE]?BANK\=?|BLOCK|BNKSUM|E?CADR|COUNT\*?|2?DEC\*?|-?DNCHAN|-?DNPTR|EQUALS|ERASE|MEMORY|2?OCT|REMADR|SETLOC|SUBRO|ORG|BSS|BES|SYN|EQU|DEFINE|END)\s/,null],["lit",/^\'(?:-*(?:\w|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?)?/],["pln",/^-*(?:[!-z_]|\\[\x21-\x7e])(?:[\w-]*|\\[\x21-\x7e])[=!?]?/i],["pun",/^[^\w\t\n\r \xA0()\"\\\';]+/]]),["apollo","agc","aea"]) \ No newline at end of file diff --git a/www/lib/vis/examples/graph3d/playground/prettify/lang-css.js b/www/lib/vis/examples/graph3d/playground/prettify/lang-css.js new file mode 100644 index 00000000..61157f38 --- /dev/null +++ b/www/lib/vis/examples/graph3d/playground/prettify/lang-css.js @@ -0,0 +1,2 @@ +PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[ \t\r\n\f]+/,null," \t\r\n\u000c"]],[["str",/^\"(?:[^\n\r\f\\\"]|\\(?:\r\n?|\n|\f)|\\[\s\S])*\"/,null],["str",/^\'(?:[^\n\r\f\\\']|\\(?:\r\n?|\n|\f)|\\[\s\S])*\'/,null],["lang-css-str",/^url\(([^\)\"\']*)\)/i],["kwd",/^(?:url|rgb|\!important|@import|@page|@media|@charset|inherit)(?=[^\-\w]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|(?:\\[0-9a-f]+ ?))(?:[_a-z0-9\-]|\\(?:\\[0-9a-f]+ ?))*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^\/*][^*]*\*+)*\//], +["com",/^(?: