Alex de Mulder
10 years ago
25 changed files with 749 additions and 1471 deletions
Split View
Diff Options
-
+302 -375dist/vis.js
-
+12 -12dist/vis.min.js
-
+24 -1docs/graph.html
-
+45 -128docs/graph3d.html
-
+11 -7examples/graph/16_dynamic_data.html
-
+0 -141examples/graph3d/ajax.js
-
+0 -156examples/graph3d/datasource.php
-
+0 -54examples/graph3d/datasource_csv.php
-
+0 -113examples/graph3d/datasource_csv_to_json.php
-
+0 -79examples/graph3d/datastream_csv.php
-
+1 -1examples/graph3d/example01_basis.html
-
+2 -1examples/graph3d/example02_camera.html
-
+1 -1examples/graph3d/example03_filter.html
-
+1 -1examples/graph3d/example04_animate.html
-
+1 -1examples/graph3d/example05_line.html
-
+1 -1examples/graph3d/example06_moving_dots.html
-
+1 -1examples/graph3d/example07_dot_cloud_colors.html
-
+1 -1examples/graph3d/example08_dot_cloud_size.html
-
+1 -1examples/graph3d/example09_mobile.html
-
+1 -1examples/graph3d/example10_styles.html
-
+1 -1examples/graph3d/example11_tooltips.html
-
+1 -1examples/graph3d/playground/index.html
-
+41 -19examples/graph3d/playground/playground.js
-
+299 -373src/graph3d/graph3d.js
-
+2 -1src/module/exports.js
+ 302
- 375
dist/vis.js
File diff suppressed because it is too large
View File
+ 12
- 12
dist/vis.min.js
File diff suppressed because it is too large
View File
+ 24
- 1
docs/graph.html
View File
+ 45
- 128
docs/graph3d.html
View File
+ 11
- 7
examples/graph/16_dynamic_data.html
View File
+ 0
- 141
examples/graph3d/ajax.js
View File
| @ -1,141 +0,0 @@ | |||
| /** | |||
| * @class Ajax | |||
| * | |||
| * Perform asynchronous call to the server. | |||
| * | |||
| * documentation: | |||
| * http://ajaxpatterns.org/HTTP_Streaming | |||
| * http://ajaxpatterns.org/XMLHttpRequest_Call | |||
| * http://www.skill-guru.com/blog/2011/02/04/adding-access-control-allow-origin-to-server-for-cross-domain-scripting/ | |||
| * | |||
| * @author Jos de Jong, Almende, 2011 | |||
| */ | |||
| var Ajax = function() { | |||
| this.isBusy = true; | |||
| this.timer = undefined; | |||
| this.req = undefined; | |||
| this.callback = undefined; | |||
| // for long poll | |||
| this.pollCallback = undefined; | |||
| this.pollInterval = 1000; // milliseconds | |||
| this.lastResponseLength = 0; | |||
| } | |||
| /** | |||
| * Make a request | |||
| * @param {string} method The call method: typically "GET" or "POST" | |||
| * @param {string} url The url to be called, for example "mydata.php" | |||
| * @param {method} callback The callback method, which will be called when | |||
| * the response is received. The response is passed | |||
| * as a plain text (string) parameter to this method: | |||
| * callback(response); | |||
| */ | |||
| Ajax.prototype.request = function(method, url, callback) | |||
| { | |||
| var me = this; | |||
| this.isBusy = true; | |||
| this.callback = callback; | |||
| this.req = (XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP"); | |||
| this.req.onreadystatechange = function() { me._checkReadyState(); }; | |||
| this.req.open(method, url, true); | |||
| this.req.send(null); | |||
| } | |||
| /** | |||
| * Make a long poll request. | |||
| * This poll can be stopped via Ajax.abort(); | |||
| * @param {string} method The call method: typically "GET" or "POST" | |||
| * @param {string} url The url to be called, for example "mydata.php" | |||
| * @param {method} callback The callback method, which will be called | |||
| * repeatedly, each time that new data is received. | |||
| * The newly received data is passed | |||
| * as a plain text (string) parameter to this method: | |||
| * callback(response); | |||
| */ | |||
| Ajax.prototype.requestLongPoll = function(method, url, callback) | |||
| { | |||
| this.request(method, url); | |||
| var me = this; | |||
| this.pollCallback = callback; | |||
| this.lastResponseLength = 0; | |||
| this.timer = setInterval(function() {me._checkResponse();}, this.pollInterval); | |||
| } | |||
| /** | |||
| * Cancel a current request | |||
| */ | |||
| Ajax.prototype.abort = function() { | |||
| this.isBusy = false; | |||
| if (this.timer) { | |||
| clearInterval(this.timer) | |||
| this.timer = undefined; | |||
| } | |||
| if (this.req) { | |||
| this.req.abort(); | |||
| this.req = undefined; | |||
| } | |||
| } | |||
| /** | |||
| * The callback method which is called when a response is received. | |||
| */ | |||
| Ajax.prototype._checkReadyState = function() | |||
| { | |||
| switch(this.req.readyState) | |||
| { | |||
| case 1: break; | |||
| case 2: break; | |||
| case 3: break; | |||
| case 4: | |||
| if (this.callback) { | |||
| this.callback(this.req.responseText); | |||
| } | |||
| // reset all variables | |||
| this.abort(); | |||
| } | |||
| } | |||
| /** | |||
| * Callback function executed repeatedly during a long poll. | |||
| * The currently received response data is checked, and all new data is passed | |||
| * to the callback function. | |||
| */ | |||
| Ajax.prototype._checkResponse = function() { | |||
| var len = this.req.responseText.length; | |||
| if (len > this.lastResponseLength) { | |||
| var newData = this.req.responseText.substring(this.lastResponseLength); | |||
| // TODO: clear the current responseText here, to prevent the response | |||
| // from growing infinitely? | |||
| if (this.pollCallback) { | |||
| this.pollCallback(newData); | |||
| } | |||
| this.lastResponseLength = len; | |||
| } | |||
| } | |||
| /** | |||
| * Set the interval for long polling | |||
| * @param {number} interval Interval in milliseconds | |||
| */ | |||
| Ajax.prototype.setPollInterval = function(interval) { | |||
| this.pollInterval = interval; | |||
| } | |||
| /** | |||
| * get the poll interval | |||
| */ | |||
| Ajax.prototype.getPollInterval = function() { | |||
| return this.pollInterval; | |||
| } | |||
+ 0
- 156
examples/graph3d/datasource.php
View File
| @ -1,156 +0,0 @@ | |||
| <?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}]} | |||
| ] | |||
| } | |||
| }); | |||
| ________________________________________________________________________________ | |||
| */ | |||
| header('Content-type: text/plain'); | |||
| /** | |||
| * 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; | |||
| } | |||
| ?> | |||
+ 0
- 54
examples/graph3d/datasource_csv.php
View File
| @ -1,54 +0,0 @@ | |||
| <?php | |||
| header('Content-type: text/plain'); | |||
| // retrieve current time | |||
| $time = time(); | |||
| $hour = date('h', $time) * 1; | |||
| $min = date('i', $time) * 1; | |||
| $sec = date('s', $time) * 1; | |||
| $secAngle = $sec / 60.0 * 2.0*pi(); | |||
| $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi(); | |||
| $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi(); | |||
| // create labels | |||
| echo '"x", "y", "z", "' . date('H:i:s', $time) . '"' . "\n"; | |||
| // create circle as clock | |||
| for ($h = 0; $h < 12; $h += 1) { | |||
| $r = $h / 12 * 2 * pi(); | |||
| echo | |||
| round(sin($r), 2) . ', ' . | |||
| round(cos($r), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 0 . "\n"; | |||
| } | |||
| echo "0, 0, 0, 0\n"; | |||
| // create hour, minute, second pointers | |||
| for ($r = 0.1; $r < 0.4; $r += 0.1) { | |||
| echo | |||
| round($r * sin($hourAngle), 2) . ', ' . | |||
| round($r * cos($hourAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 2.5 . "\n"; | |||
| } | |||
| for ($r = 0.1; $r < 0.7; $r += 0.1) { | |||
| echo | |||
| round($r * sin($minAngle), 2) . ', ' . | |||
| round($r * cos($minAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 1.5 . "\n"; | |||
| } | |||
| for ($r = 0.1; $r < 0.9; $r += 0.1) { | |||
| echo | |||
| round($r * sin($secAngle), 2) . ', ' . | |||
| round($r * cos($secAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 3 . "\n"; | |||
| } | |||
| ?> | |||
+ 0
- 113
examples/graph3d/datasource_csv_to_json.php
View File
| @ -1,113 +0,0 @@ | |||
| <?php | |||
| /** | |||
| This file can read data from an external csv source and output the same | |||
| data in Google DataTable JSON format | |||
| Note that it supposes that each data column contains numbers | |||
| */ | |||
| header('Content-type: text/plain'); | |||
| // datasource url. This can be an external source | |||
| //$datasourceUrl = "http://demo.almende.com/links/graph3d/js/examples/datasource_csv.php"; | |||
| $path = dirname("http://" . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"]) . '/'; | |||
| $dataSourceUrl = $path . "datasource_csv.php"; | |||
| $reqId = getReqId(); | |||
| $data = file_get_contents($dataSourceUrl); | |||
| $rows = split("\n", $data); | |||
| // output the header part of the response | |||
| echo "google.visualization.Query.setResponse({ | |||
| version:'0.6', | |||
| reqId:'$reqId', | |||
| status:'ok', | |||
| table:{ | |||
| cols:[ | |||
| "; | |||
| // output the column names | |||
| $cols = split(",", $rows[0]); | |||
| $colCount = count($cols); | |||
| $colFirst = true; | |||
| foreach($cols as $col) { | |||
| if ($colFirst == true) | |||
| $colFirst = false; | |||
| else | |||
| echo ",\n"; // end of previous label | |||
| $colStr = trim(str_replace('"', '', $col)); // TODO: bad way to remove enclosing quotes | |||
| echo " {id:'$colStr', label:'$colStr', type:'number'}"; | |||
| } | |||
| unset($rows[0]); // remove the first row with headers from the array | |||
| // output the part between cols and rows | |||
| echo " | |||
| ], | |||
| rows:[ | |||
| "; | |||
| // output the data | |||
| $firstRow = true; | |||
| foreach ($rows as $row) { | |||
| $cols = split(",", $row); | |||
| if (count($cols) == $colCount) { | |||
| if ($firstRow == true) | |||
| $firstRow = false; | |||
| else | |||
| echo ",\n"; // end of previous line | |||
| echo " {c:["; // start of the row | |||
| $firstCol = true; | |||
| foreach ($cols as $col) { | |||
| if ($firstCol == true) | |||
| $firstCol = false; | |||
| else | |||
| echo ", "; // end of previous value | |||
| echo "{v:" . $col . "}"; | |||
| } | |||
| echo "]}"; // end of the row | |||
| } | |||
| } | |||
| // 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; | |||
| } | |||
| ?> | |||
+ 0
- 79
examples/graph3d/datastream_csv.php
View File
| @ -1,79 +0,0 @@ | |||
| <?php | |||
| header('Content-type: text/plain'); | |||
| // initialize flushing without buffer | |||
| @apache_setenv('no-gzip', 1); | |||
| @ini_set('zlib.output_compression', 0); | |||
| @ini_set('implicit_flush', 1); | |||
| for ($i = 0; $i < ob_get_level(); $i++) { ob_end_flush(); } | |||
| ob_implicit_flush(1); | |||
| ob_start(); | |||
| // create labels once? | |||
| //echo '"id", "x", "y", "z", "Color"' . "\n"; | |||
| while (true) { | |||
| // retrieve current time | |||
| $time = time(); | |||
| $hour = date('h', $time) * 1; | |||
| $min = date('i', $time) * 1; | |||
| $sec = date('s', $time) * 1; | |||
| $secAngle = $sec / 60.0 * 2.0*pi(); | |||
| $minAngle = ($min + $sec/60.0) / 60.0 * 2.0*pi(); | |||
| $hourAngle = ($hour + $min / 60.0 + $sec/60.0/60.0) / 12.0 * 2.0*pi(); | |||
| $id = 0; | |||
| // create circle as clock | |||
| for ($h = 0; $h < 12; $h += 1) { | |||
| $r = $h / 12 * 2 * pi(); | |||
| echo | |||
| $id . ', ' . | |||
| round(sin($r), 2) . ', ' . | |||
| round(cos($r), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 0 . "\n"; | |||
| $id++; | |||
| } | |||
| echo "$id, 0, 0, 0, 0\n"; | |||
| $id++; | |||
| // create hour, minute, second pointers | |||
| for ($r = 0.1; $r < 0.4; $r += 0.1) { | |||
| echo | |||
| $id . ', ' . | |||
| round($r * sin($hourAngle), 2) . ', ' . | |||
| round($r * cos($hourAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 2.5 . "\n"; | |||
| $id++; | |||
| } | |||
| for ($r = 0.1; $r < 0.7; $r += 0.1) { | |||
| echo | |||
| $id . ', ' . | |||
| round($r * sin($minAngle), 2) . ', ' . | |||
| round($r * cos($minAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 1.5 . "\n"; | |||
| $id++; | |||
| } | |||
| for ($r = 0.1; $r < 0.9; $r += 0.1) { | |||
| echo | |||
| $id . ', ' . | |||
| round($r * sin($secAngle), 2) . ', ' . | |||
| round($r * cos($secAngle), 2) . ', ' . | |||
| 0 . ', ' . | |||
| 3 . "\n"; | |||
| $id++; | |||
| } | |||
| // flush, send the new output to the client now | |||
| ob_flush(); | |||
| flush(); | |||
| sleep(1); | |||
| } | |||
| ?> | |||