| x: | ' + dataPoint.point.x + ' |
| y: | ' + dataPoint.point.y + ' |
| z: | ' + dataPoint.point.z + ' |
| Options: | ||
| Options: | ||
| x: | "+t.point.x+" |
| y: | "+t.point.y+" |
| z: | "+t.point.z+" |
+var nodes = new vis.DataSet();
+nodes.add([
+ {id: '1', label: 'Node 1'},
+ {id: '2', label: 'Node 2'},
+ {id: '3', label: 'Node 3'},
+ {id: '4', label: 'Node 4'},
+ // ... more nodes
+]);
+
+When using a DataSet, the graph is automatically updating to changes in the DataSet.
Nodes support the following properties: @@ -291,6 +302,20 @@ var nodes = [
+var edges = new vis.DataSet();
+edges.add([
+ {from: '1', to: '2'},
+ {from: '1', to: '3'},
+ {from: '2', to: '4'},
+ {from: '2', to: '5'},
+ // ... more edges
+]);
+
+When using a DataSet, the graph is automatically updating to changes in the DataSet.
Edges support the following properties: @@ -517,6 +554,19 @@ var edges = [
value, if a value is
specified too.
node: an object with the id of the hovered node.node: an object with the id of the hovered node.+ Graph3d is an interactive visualization chart to draw data in a three dimensional + graph. You can freely move and zoom in the graph by dragging and scrolling in the + window. + Graph3d also supports animation of a graph. +
+ ++ The following code shows how to create a Graph3d and provide it with data. + More examples can be found in the examples directory. +
+ +
+<!DOCTYPE HTML>
+<html>
+<head>
+ <title>Graph 3D demo</title>
+
+ <style>
+ body {font: 10pt arial;}
+ </style>
+
+ <script type="text/javascript" src="../../dist/vis.js"></script>
+
+ <script type="text/javascript">
+ var data = null;
+ var graph = null;
+
+ function custom(x, y) {
+ return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
+ }
+
+ // Called when the Visualization API is loaded.
+ function drawVisualization() {
+ // Create and populate a data table.
+ var data = new vis.DataSet();
+ // create some nice looking data with sin/cos
+ var steps = 50; // number of datapoints will be steps*steps
+ 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 = custom(x, y);
+ data.add({
+ x: x,
+ y: y,
+ z: value,
+ style: value
+ });
+ }
+ }
+
+ // specify options
+ var options = {
+ width: '600px',
+ height: '600px',
+ style: 'surface',
+ showPerspective: true,
+ showGrid: true,
+ showShadow: false,
+ keepAspectRatio: true,
+ verticalRatio: 0.5
+ };
+
+ // create a graph3d
+ var container = document.getElementById('mygraph');
+ graph3d = new vis.Graph3d(container, data, options);
+ }
+ </script>
+</head>
+
+<body onload="drawVisualization();">
+ <div id="mygraph"></div>
+</body>
+</html>
+
+
+
+
+
+ The class name of the Graph3d is vis.Graph3d.
+ When constructing a Graph3d, an HTML DOM container must be provided to attach
+ the graph to. Optionally, data an options can be provided.
+ Data is a vis DataSet or an Array, described in
+ section Data Format.
+ Options is a name-value map in the JSON format. The available options
+ are described in section Configuration Options.
+
var graph = new vis.Graph3d(container [, data] [, options]);+ +
+ Data and options can be set or changed later on using the functions
+ Graph3d.setData(data) and Graph3d.setOptions(options).
+
+ Graph3d can load data from an Array, a DataSet or a DataView.
+ JSON objects are added to this DataSet by using the add() function.
+ Data points must have properties x, y, and z,
+ and can optionally have a property style and filter.
+
+
+ The DataSet JSON objects are defined as: +
+ +| Name | +Type | +Required | +Description | +
|---|---|---|---|
| x | +number | +yes | +Location on the x-axis. | +
| y | +number | +yes | +Location on the y-axis. | +
| z | +number | +yes | +Location on the z-axis. | +
| style | +number | +no | +The data value, required for graph styles dot-color and
+ dot-size.
+ |
+
| filter | +* | +no | +Filter values used for the animation. + This column may have any type, such as a number, string, or Date. | +
+ Options can be used to customize the graph. Options are defined as a JSON object. + All options are optional. +
+ +
+var options = {
+ width: '100%',
+ height: '400px',
+ style: 'surface'
+};
+
+
++ The following options are available. +
+ +| Name | +Type | +Default | +Description | +
|---|---|---|---|
| animationInterval | +number | +1000 | +The animation interval in milliseconds. This determines how fast + the animation runs. | +
| animationPreload | +boolean | +false | +If false, the animation frames are loaded as soon as they are requested.
+ if animationPreload is true, the graph will automatically load
+ all frames in the background, resulting in a smoother animation as soon as
+ all frames are loaded. The load progress is shown on screen. |
+
| animationAutoStart | +boolean | +false | +If true, the animation starts playing automatically after the graph + is created. | +
| backgroundColor | +string or Object | +'white' | +The background color for the main area of the chart. + Can be either a simple HTML color string, for example: 'red' or '#00cc00', + or an object with the following properties. | +
| backgroundColor.stroke | +string | +'gray' | +The color of the chart border, as an HTML color string. | +
| backgroundColor.strokeWidth | +number | +1 | +The border width, in pixels. | +
| backgroundColor.fill | +string | +'white' | +The chart fill color, as an HTML color string. | +
| cameraPosition | +Object | +{horizontal: 1.0, vertical: 0.5, distance: 1.7} | +Set the initial rotation and position of the camera.
+ The object cameraPosition contains three parameters:
+ horizontal, vertical, and distance.
+ Parameter horizontal is a value in radians and can have any
+ value (but normally in the range of 0 and 2*Pi).
+ Parameter vertical is a value in radians between 0 and 0.5*Pi.
+ Parameter distance is the (normalized) distance from the
+ camera to the center of the graph, in the range of 0.71 to 5.0. A
+ larger distance puts the graph further away, making it smaller.
+ All parameters are optional.
+ |
| height | +string | +'400px' | +The height of the graph in pixels or as a percentage. | +
| keepAspectRatio | +boolean | +true | +If keepAspectRatio is true, the x-axis and the y-axis
+ keep their aspect ratio. If false, the axes are scaled such that they
+ both have the same, maximum with. |
+
| showAnimationControls | +boolean | +true | +If true, animation controls are created at the bottom of the Graph. + The animation controls consists of buttons previous, start/stop, next, + and a slider showing the current frame. + Only applicable when the provided data contains an animation. | +
| showGrid | +boolean | +true | +If true, grid lines are draw in the x-y surface (the bottom of the 3d + graph). | +
| showPerspective | +boolean | +true | +If true, the graph is drawn in perspective: points and lines which + are further away are drawn smaller. + Note that the graph currently does not support a gray colored bottom side + when drawn in perspective. + | +
| showShadow | +boolean | +false | +Show shadow on the graph. | +
| style | +string | +'dot' | +The style of the 3d graph. Available styles:
+ bar,
+ bar-color,
+ bar-size,
+ dot,
+ dot-line,
+ dot-color,
+ dot-size,
+ line,
+ grid,
+ or surface |
+
| tooltip | +boolean | function | +false | +Show a tooltip showing the values of the hovered data point.
+ The contents of the tooltip can be customized by providing a callback
+ function as tooltip. In this case the function is called
+ with an object containing parameters x,
+ y, and z argument,
+ and must return a string which may contain HTML.
+ |
+
| valueMax | +number | +none | +The maximum value for the value-axis. Only available in combination
+ with the styles dot-color and dot-size. |
+
| valueMin | +number | +none | +The minimum value for the value-axis. Only available in combination
+ with the styles dot-color and dot-size. |
+
| verticalRatio | +number | +0.5 | +A value between 0.1 and 1.0. This scales the vertical size of the graph + When keepAspectRatio is set to false, and verticalRatio is set to 1.0, + the graph will be a cube. | +
| width | +string | +'400px' | +The width of the graph in pixels or as a percentage. | +
| xBarWidth | +number | +none | +The width of bars in x direction. By default, the width is equal to the distance
+ between the data points, such that bars adjoin each other.
+ Only applicable for styles 'bar' and 'bar-color'. |
+
| xCenter | +string | +'55%' | +The horizontal center position of the graph, as a percentage or in + pixels. | +
| xMax | +number | +none | +The maximum value for the x-axis. | +
| xMin | +number | +none | +The minimum value for the x-axis. | +
| xStep | +number | +none | +Step size for the grid on the x-axis. | +
| yBarWidth | +number | +none | +The width of bars in y direction. By default, the width is equal to the distance
+ between the data points, such that bars adjoin each other.
+ Only applicable for styles 'bar' and 'bar-color'. |
+
| yCenter | +string | +'45%' | +The vertical center position of the graph, as a percentage or in + pixels. | +
| yMax | +number | +none | +The maximum value for the y-axis. | +
| yMin | +number | +none | +The minimum value for the y-axis. | +
| yStep | +number | +none | +Step size for the grid on the y-axis. | +
| zMin | +number | +none | +The minimum value for the z-axis. | +
| zMax | +number | +none | +The maximum value for the z-axis. | +
| zStep | +number | +none | +Step size for the grid on the z-axis. | +
| xLabel | +String | +x | +Label on the X axis. | +
| yLabel | +String | +y | +Label on the Y axis. | +
| zLabel | +String | +z | +Label on the Z axis. | +
| filterLabel | +String | +time | +Label for the filter column. | +
| legendLabel | +String | +value | +Label for the style description. | +
+ Graph3d supports the following methods. +
+ +| Method | +Return Type | +Description | +
|---|---|---|
| animationStart() | +none | +Start playing the animation. + Only applicable when animation data is available. | +
| animationStop() | +none | +Stop playing the animation. + Only applicable when animation data is available. | +
| getCameraPosition() | +An object with parameters horizontal,
+ vertical and distance |
+ Returns an object with parameters horizontal,
+ vertical and distance,
+ which each one of them is a number, representing the rotation and position
+ of the camera. |
+
| redraw() | +none | +Redraw the graph. Useful after the camera position is changed externally, + when data is changed, or when the layout of the webpage changed. | +
| setData(data) | +none | +Replace the data in the Graph3d. | +
| setOptions(options) | +none | +Update options of Graph3d. + The provided options will be merged with current options. | +
| setSize(width, height) | +none | +Parameters width and height are strings,
+ containing a new size for the graph. Size can be provided in pixels
+ or in percentages. |
+
| setCameraPosition (pos) | +{horizontal: 1.0, vertical: 0.5, distance: 1.7} | +Set the rotation and position of the camera. Parameter pos
+ is an object which contains three parameters: horizontal,
+ vertical, and distance.
+ Parameter horizontal is a value in radians and can have any
+ value (but normally in the range of 0 and 2*Pi).
+ Parameter vertical is a value in radians between 0 and 0.5*Pi.
+ Parameter distance is the (normalized) distance from the
+ camera to the center of the graph, in the range of 0.71 to 5.0. A
+ larger distance puts the graph further away, making it smaller.
+ All parameters are optional.
+ |
+
+ Graph3d fires events after the camera position has been changed.
+ The event can be catched by creating a listener.
+ Here an example on how to catch a cameraPositionChange event.
+
+function onCameraPositionChange(event) {
+ alert('The camera position changed to:\n' +
+ 'Horizontal: ' + event.horizontal + '\n' +
+ 'Vertical: ' + event.vertical + '\n' +
+ 'Distance: ' + event.distance);
+}
+// assuming var graph3d = new vis.Graph3d(document.getElementById('mygraph'));
+graph3d.on('cameraPositionChange', onCameraPositionChange);
+
+
++ The following events are available. +
+ +| name | +Description | +Properties | +
|---|---|---|
| cameraPositionChange | +The camera position changed. Fired after the user modified the camera position
+ by moving (dragging) the graph, or by zooming (scrolling),
+ but not after a call to setCameraPosition method.
+ The new camera position can be retrieved by calling the method
+ getCameraPosition. |
+
+
|
+
+ All code and data are processed and rendered in the browser. No data is sent to any server. +
+ +setSelectionis executed.
| Horizontal angle (0 to 2*pi) | ++ |
| Vertical angle (0 to 0.5*pi) | ++ |
| Distance (0.71 to 5.0) | ++ |
| + | + |
+ +
+ ++ +
+ ++ +
++ +
+ + + + + + diff --git a/examples/graph3d/example11_tooltips.html b/examples/graph3d/example11_tooltips.html new file mode 100644 index 00000000..e4244387 --- /dev/null +++ b/examples/graph3d/example11_tooltips.html @@ -0,0 +1,103 @@ + + + ++ +
+ + + + + + diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html new file mode 100644 index 00000000..3af5edbe --- /dev/null +++ b/examples/graph3d/index.html @@ -0,0 +1,27 @@ + + + + + + + + diff --git a/examples/graph3d/playground/csv2array.js b/examples/graph3d/playground/csv2array.js new file mode 100644 index 00000000..95d0c4a6 --- /dev/null +++ b/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/examples/graph3d/playground/csv2datatable.html b/examples/graph3d/playground/csv2datatable.html new file mode 100644 index 00000000..35dc9bd0 --- /dev/null +++ b/examples/graph3d/playground/csv2datatable.html @@ -0,0 +1,80 @@ + + + +
+<?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/examples/graph3d/playground/datasource.php b/examples/graph3d/playground/datasource.php
new file mode 100644
index 00000000..9c265cb9
--- /dev/null
+++ b/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/examples/graph3d/playground/index.html b/examples/graph3d/playground/index.html
new file mode 100644
index 00000000..d9a7ed3a
--- /dev/null
+++ b/examples/graph3d/playground/index.html
@@ -0,0 +1,179 @@
+
+
+
+
+
+ Data+
+ Graph 3D expects a data table with first three to five columns:
+ colums
+ |
+
+ Graph++ + + + + |
+|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
+ Options+ +
|
+