Browse Source

Updated examples a little

css_transitions
jos 10 years ago
parent
commit
e6cd80ad6f
19 changed files with 1144 additions and 1143 deletions
  1. +2
    -2
      HISTORY.md
  2. +1
    -1
      Jakefile.js
  3. +59
    -56
      docs/graph3d.html
  4. +43
    -43
      examples/graph3d/default.css
  5. +49
    -49
      examples/graph3d/example01_basis.html
  6. +84
    -85
      examples/graph3d/example02_camera.html
  7. +46
    -48
      examples/graph3d/example03_filter.html
  8. +53
    -53
      examples/graph3d/example04_animate.html
  9. +50
    -50
      examples/graph3d/example05_line.html
  10. +58
    -58
      examples/graph3d/example06_moving_dots.html
  11. +47
    -47
      examples/graph3d/example07_dot_cloud_colors.html
  12. +48
    -48
      examples/graph3d/example08_dot_cloud_size.html
  13. +60
    -60
      examples/graph3d/example09_mobile.html
  14. +96
    -96
      examples/graph3d/example10_styles.html
  15. +83
    -83
      examples/graph3d/example11_tooltips.html
  16. +13
    -13
      examples/graph3d/index.html
  17. +1
    -0
      examples/graph3d/playground/index.html
  18. +20
    -20
      examples/graph3d/playground/playground.css
  19. +331
    -331
      examples/graph3d/playground/playground.js

+ 2
- 2
HISTORY.md View File

@ -2,7 +2,7 @@
http://visjs.org http://visjs.org
## not yet released, version 1.0.3
## not yet released, version 1.1.0
### Timeline ### Timeline
@ -18,7 +18,7 @@ http://visjs.org
### Graph3D ### Graph3D
- Ported Graph3D from Chap Links.
- Ported Graph3D from Chap Links Library.
## 2014-05-28, version 1.0.2 ## 2014-05-28, version 1.0.2

+ 1
- 1
Jakefile.js View File

@ -98,7 +98,7 @@ task('build', {async: true}, function () {
'./src/graph/graphMixins/MixinLoader.js', './src/graph/graphMixins/MixinLoader.js',
'./src/graph/Graph.js', './src/graph/Graph.js',
'./src/graph3d/graph3d.js',
'./src/graph3d/Graph3d.js',
'./src/module/exports.js' './src/module/exports.js'
], ],

+ 59
- 56
docs/graph3d.html View File

@ -43,67 +43,70 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <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);
<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 = [];
// 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.push({
x: x,
y: y,
z: value,
style: value
});
}
} }
// 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
};
// Instantiate our graph object.
graph3d = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph3d.draw(data, options);
// subscribe to event
graph3d.on("camerapositionchange", function(event) {console.log(event);});
}
</script>
</head>
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
graph3d = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph3d.draw(data, options);
// subscribe to event
graph3d.on("camerapositionchange", function(event) {console.log(event);});
}
</script>
</head>
<body onload="drawVisualization();"> <body onload="drawVisualization();">
<div id="mygraph"></div>
<div id="mygraph"></div>
<div id="info"></div>
<div id="info"></div>
</body> </body>
</html> </html>

+ 43
- 43
examples/graph3d/default.css View File

@ -1,87 +1,87 @@
html, body { html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
} }
body, td, th { body, td, th {
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
font-family: arial, sans-serif;
font-size: 11pt;
color: #4D4D4D;
line-height: 1.7em;
} }
#container { #container {
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
margin: 0 auto;
padding-bottom: 50px;
width: 900px;
} }
h1 { h1 {
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
font-size: 180%;
font-weight: bold;
padding: 0;
margin: 1em 0 1em 0;
} }
h2 { h2 {
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
padding-top: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a0c0f0;
color: #2B7CE9;
} }
h3 { h3 {
font-size: 140%;
font-size: 140%;
} }
a { a {
color: #2B7CE9;
text-decoration: none;
color: #2B7CE9;
text-decoration: none;
} }
a:visited { a:visited {
color: #2E60A4;
color: #2E60A4;
} }
a:hover { a:hover {
color: red;
text-decoration: underline;
color: red;
text-decoration: underline;
} }
hr { hr {
border: none 0;
border-top: 1px solid #abc;
height: 1px;
border: none 0;
border-top: 1px solid #abc;
height: 1px;
} }
pre { pre {
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
display: block;
font-size: 10pt;
line-height: 1.5em;
font-family: monospace;
} }
pre, code { pre, code {
background-color: #f5f5f5;
background-color: #f5f5f5;
} }
table table
{ {
border-collapse: collapse;
border-collapse: collapse;
} }
th { th {
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
font-weight: bold;
border: 1px solid lightgray;
background-color: #E5E5E5;
text-align: left;
vertical-align: top;
padding: 5px;
} }
td { td {
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
border: 1px solid lightgray;
padding: 5px;
vertical-align: top;
} }

+ 49
- 49
examples/graph3d/example01_basis.html View File

@ -1,56 +1,56 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <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 = [];
// 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.push({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
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
<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 = [];
// 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.push({x:x,y:y,z:value,style:value});
} }
</script>
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization();"> <body onload="drawVisualization();">

+ 84
- 85
examples/graph3d/example02_camera.html View File

@ -1,107 +1,106 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D camera position</title>
<title>Graph 3D camera position</title>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<style>
body {font: 10pt arial;}
td {font: 10pt arial}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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);
}
// callback function, called when the camera position has changed
function oncamerapositionchange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
function custom(x, y) {
return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
}
// set the camera position
function setcameraposition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
"horizontal": horizontal,
"vertical":vertical,
"distance":distance};
graph.setCameraPosition(pos);
// callback function, called when the camera position has changed
function oncamerapositionchange() {
// adjust the values of startDate and endDate
var pos = graph.getCameraPosition();
document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
}
// retrieve the camera position again, to get the applied values
oncamerapositionchange();
}
// set the camera position
function setcameraposition() {
var horizontal = parseFloat(document.getElementById('horizontal').value);
var vertical = parseFloat(document.getElementById('vertical').value);
var distance = parseFloat(document.getElementById('distance').value);
var pos = {
"horizontal": horizontal,
"vertical":vertical,
"distance":distance};
graph.setCameraPosition(pos);
// 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,t:0,style:value}
]);
}
}
// retrieve the camera position again, to get the applied values
oncamerapositionchange();
}
// 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,t:0,style:value}
]);
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.on("camerapositionchange", oncamerapositionchange);
//graph.redraw();
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
graph.on("camerapositionchange", oncamerapositionchange);
//graph.redraw();
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">
<h1>Graph 3d camera position</h1> <h1>Graph 3d camera position</h1>
<table> <table>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setcameraposition();"></td>
</tr>
<tr>
<td>Horizontal angle (0 to 2*pi)</td>
<td><input type="text" id="horizontal" value="1.0"></td>
</tr>
<tr>
<td>Vertical angle (0 to 0.5*pi)</td>
<td><input type="text" id="vertical" value="0.5"></td>
</tr>
<tr>
<td>Distance (0.71 to 5.0)</td>
<td><input type="text" id="distance" value="1.7"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Set" onclick="setcameraposition();"></td>
</tr>
</table> </table>
<div id="mygraph"></div> <div id="mygraph"></div>

+ 46
- 48
examples/graph3d/example03_filter.html View File

@ -1,62 +1,60 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D demo</title>
<title>Graph 3D demo</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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;
}
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);
var valueRange = (value > 67) ? "67-100" :
(value < 33) ? "0-33" :
"33-67";
data.add([
{x:x,y:y,z:value,filter:valueRange,style:value}
]);
}
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
var data = [];
// 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);
var valueRange = (value > 67) ? "67-100" :
(value < 33) ? "0-33" :
"33-67";
data.push({x:x,y:y,z:value,filter:valueRange,style:value});
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: "values"
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: false,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
filterLabel: "values"
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">

+ 53
- 53
examples/graph3d/example04_animate.html View File

@ -1,68 +1,68 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D animation demo</title>
<title>Graph 3D animation demo</title>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<style type="text/css">
body {
font: 10pt arial;
}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
function custom(x, y, t) {
return Math.sin(x/50 + t/10) * Math.cos(y/50 + t/10) * 50 + 50;
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 25;
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 = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// Called when the Visualization API is loaded.
function drawVisualization() {
// Create and populate a data table.
data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 25;
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 = custom(x, y, t);
data.add([
{x:x,y:y,z:value,filter:t,style:value}
]);
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: "time"
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
// showAnimationControls: false,
keepAspectRatio: true,
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true,
filterValue: "time"
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization();"> <body onload="drawVisualization();">

+ 50
- 50
examples/graph3d/example05_line.html View File

@ -1,56 +1,56 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D line 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;
// 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 = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var 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 / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "line",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
<title>Graph 3D line 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;
// 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 = 500;
var axisMax = 314;
var tmax = 4 * 2 * Math.PI;
var axisStep = axisMax / steps;
for (var 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 / tmax;
data.add({x:x,y:y,z:z});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "line",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
graph.setCameraPosition(0.4, undefined, undefined);
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">

+ 58
- 58
examples/graph3d/example06_moving_dots.html View File

@ -1,75 +1,75 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D animation moving dots</title>
<title>Graph 3D animation moving dots</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sin = Math.sin;
var cos = Math.cos;
var pi = Math.PI;
// 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;
// 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
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// a dot in the center
data.add( {x:0,y:0,z:0,filter:tgroup,style:value});
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// one or multiple dots moving around the center
for (var dot = 0; dot < dotCount; dot++) {
var tdot = t + 2*pi * dot / dotCount;
data.add( {x:sin(tdot),y:cos(tdot),z:sin(tdot),filter:tgroup,style:value});
data.add( {x:sin(tdot),y:-cos(tdot),z:sin(tdot + tmax*1/2),filter:tgroup,style:value});
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: "color value",
cameraPosition:
{
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
animationInterval: 35, // milliseconds
animationPreload: false,
animationAutoStart: true,
legendLabel: "color value",
cameraPosition:
{
horizontal: 2.7,
vertical: 0.0,
distance: 1.65
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization();"> <body onload="drawVisualization();">

+ 47
- 47
examples/graph3d/example07_dot_cloud_colors.html View File

@ -1,63 +1,63 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D cloud with colored dots</title>
<title>Graph 3D cloud with colored dots</title>
<style>
body {font: 10pt arial;}
</style>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
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));
// create the animation data
var imax = 100;
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));
data.add({x:x,y:y,z:z,style:dist});
}
data.add({x:x,y:y,z:z,style:dist});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: "distance",
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-color",
showPerspective: true,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 1.0,
legendLabel: "distance",
cameraPosition: {
horizontal: -0.35,
vertical: 0.22,
distance: 1.8
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">

+ 48
- 48
examples/graph3d/example08_dot_cloud_size.html View File

@ -1,64 +1,64 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D cloud with sized dots</title>
<title>Graph 3D cloud with sized dots</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="../../dist/vis.js"></script>
<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;
<script type="text/javascript">
var data = null;
var graph = null;
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet({});
// Called when the Visualization API is loaded.
function drawVisualization() {
// create the data table.
var data = new vis.DataSet();
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create some shortcuts to math functions
var sqrt = Math.sqrt;
var pow = Math.pow;
var random = Math.random;
// create the animation data
var imax = 100;
for (var i = 0; i < imax; i++) {
var x = pow(random(), 2);
var y = pow(random(), 2);
var z = pow(random(), 2);
// create the animation data
var imax = 100;
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;
var dist = sqrt(pow(x, 2) + pow(y, 2) + pow(z, 2));
var range = sqrt(2) - dist;
data.add({x:x,y:y,z:z,style:range});
}
data.add({x:x,y:y,z:z,style:range});
}
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-size",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:"value",
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// specify options
var options = {
width: "600px",
height: "600px",
style: "dot-size",
showPerspective: false,
showGrid: true,
keepAspectRatio: true,
legendLabel:"value",
verticalRatio: 1.0,
cameraPosition: {
horizontal: -0.54,
vertical: 0.5,
distance: 1.6
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">

+ 60
- 60
examples/graph3d/example09_mobile.html View File

@ -1,77 +1,77 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D demo</title>
<title>Graph 3D demo</title>
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
<style>
html, body {
font: 10pt arial;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
#mygraph {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<!-- for mobile devices like android and iphone -->
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript" src="../../dist/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
<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);
}
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({});
// 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 = 10; // 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}
]);
}
}
// create some nice looking data with sin/cos
var steps = 10; // 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}
]);
}
}
// specify options
var options = {
width: "100%",
height: "100%",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// specify options
var options = {
width: "100%",
height: "100%",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5,
backgroundColor: {
strokeWidth: 0
}
};
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head> </head>
<body onresize="graph.redraw();" onload="drawVisualization()"> <body onresize="graph.redraw();" onload="drawVisualization()">

+ 96
- 96
examples/graph3d/example10_styles.html View File

@ -1,118 +1,118 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D styles</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var showPerspective = document.getElementById("perspective").checked;
var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
xBarWidth: xBarWidth,
yBarWidth: yBarWidth,
showPerspective: showPerspective,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
<title>Graph 3D styles</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var showPerspective = document.getElementById("perspective").checked;
var xBarWidth = parseFloat(document.getElementById("xBarWidth").value) || undefined;
var yBarWidth = parseFloat(document.getElementById("yBarWidth").value) || undefined;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
} }
</script>
}
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
xBarWidth: xBarWidth,
yBarWidth: yBarWidth,
showPerspective: showPerspective,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById("style").onchange = drawVisualization;
document.getElementById("perspective").onchange = drawVisualization;
document.getElementById("xBarWidth").onchange = drawVisualization;
document.getElementById("yBarWidth").onchange = drawVisualization;
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">
<p> <p>
<label for="style"> Style:
<label for="style"> Style:
<select id="style"> <select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select> </select>
</label>
</label>
</p> </p>
<p> <p>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
<label for="perspective">
<input type="checkbox" id="perspective" checked> Show perspective
</label>
</p> </p>
<p> <p>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
<label for="xBarWidth"> Bar width X:
<input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p> </p>
<p> <p>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
<label for="yBarWidth"> Bar width Y:
<input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
</label>
</p> </p>
<div id="mygraph"></div> <div id="mygraph"></div>

+ 83
- 83
examples/graph3d/example11_tooltips.html View File

@ -1,101 +1,101 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <html>
<head> <head>
<title>Graph 3D tooltips</title>
<title>Graph 3D tooltips</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/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet();
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
<style>
body {font: 10pt arial;}
</style>
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
<script type="text/javascript" src="../../dist/vis.js"></script>
// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
},
<script type="text/javascript">
var data = null;
var graph = null;
keepAspectRatio: true,
verticalRatio: 0.5
};
function custom(x, y) {
return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
}
var camera = graph ? graph.getCameraPosition() : null;
// Called when the Visualization API is loaded.
function drawVisualization() {
var style = document.getElementById("style").value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet({});
// create some nice looking data with sin/cos
var steps = 5; // number of datapoints will be steps*steps
var axisMax = 10;
var axisStep = axisMax / steps;
for (var x = 0; x <= axisMax; x+=axisStep) {
for (var y = 0; y <= axisMax; y+=axisStep) {
var z = custom(x,y);
if (withValue) {
var value = (y - x);
data.add({x:x, y:y, z: z, style:value});
}
else {
data.add({x:x, y:y, z: z});
}
}
}
// specify options
var options = {
width: "600px",
height: "600px",
style: style,
showPerspective: true,
showGrid: true,
showShadow: false,
// Option tooltip can be true, false, or a function returning a string with HTML contents
//tooltip: true,
tooltip: function (point) {
// parameter point contains properties x, y, z
return 'value: <b>' + point.z + '</b>';
},
keepAspectRatio: true,
verticalRatio: 0.5
};
var camera = graph ? graph.getCameraPosition() : null;
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById("style").onchange = drawVisualization;
}
</script>
// Instantiate our graph object.
graph = new vis.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
if (camera) graph.setCameraPosition(camera); // restore camera position
document.getElementById("style").onchange = drawVisualization;
}
</script>
</head> </head>
<body onload="drawVisualization()"> <body onload="drawVisualization()">
<p> <p>
<label for="style"> Style:
<label for="style"> Style:
<select id="style"> <select id="style">
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
<option value="bar">bar</option>
<option value="bar-color">bar-color</option>
<option value="bar-size">bar-size</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
<option value="dot-color">dot-color</option>
<option value="dot-size">dot-size</option>
<option value="grid">grid</option>
<option value="line">line</option>
<option value="surface">surface</option>
</select> </select>
</label>
</label>
</p> </p>
<div id="mygraph"></div> <div id="mygraph"></div>

+ 13
- 13
examples/graph3d/index.html View File

@ -1,23 +1,23 @@
<html> <html>
<head> <head>
<link rel='stylesheet' href='default.css' type='text/css'>
<link rel='stylesheet' href='default.css' type='text/css'>
</head> </head>
<body> <body>
<div id="container"> <div id="container">
<h1>Examples</h1>
<h1>Examples</h1>
<p><a href="example01_basis.html">example01_basis.html</a></p>
<p><a href="example02_camera.html">example02_camera.html</a></p>
<p><a href="example03_filter.html">example03_filter.html</a></p>
<p><a href="example04_animate.html">example04_animate.html</a></p>
<p><a href="example05_line.html">example05_line.html</a></p>
<p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
<p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
<p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
<p><a href="example09_mobile.html">example09_mobile.html</a></p>
<p><a href="example10_styles.html">example10_styles.html</a></p>
<p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
<p><a href="example01_basis.html">example01_basis.html</a></p>
<p><a href="example02_camera.html">example02_camera.html</a></p>
<p><a href="example03_filter.html">example03_filter.html</a></p>
<p><a href="example04_animate.html">example04_animate.html</a></p>
<p><a href="example05_line.html">example05_line.html</a></p>
<p><a href="example06_moving_dots.html">example06_moving_dots.html</a></p>
<p><a href="example07_dot_cloud_colors.html">example07_dot_cloud_colors.html</a></p>
<p><a href="example08_dot_cloud_size.html">example08_dot_cloud_size.html</a></p>
<p><a href="example09_mobile.html">example09_mobile.html</a></p>
<p><a href="example10_styles.html">example10_styles.html</a></p>
<p><a href="example11_tooltips.html">example11_tooltips.html</a></p>
<h1>Playground</h1> <h1>Playground</h1>
<p><a href="playground">Open the playground</a></p> <p><a href="playground">Open the playground</a></p>

+ 1
- 0
examples/graph3d/playground/index.html View File

@ -55,6 +55,7 @@
</div> </div>
</td> </td>
</tr> </tr>
<!-- TODO: add JSON examples -->
</table> </table>
<br> <br>

+ 20
- 20
examples/graph3d/playground/playground.css View File

@ -1,41 +1,41 @@
body body
{ {
font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
} }
h1 h1
{ {
font-size: 180%;
font-weight: bold;
font-size: 180%;
font-weight: bold;
margin: 1em 0 1em 0;
margin: 1em 0 1em 0;
} }
h2
{
font-size: 140%;
h2
{
font-size: 140%;
padding: 5px; padding: 5px;
border-bottom: 1px solid #a0c0f0; border-bottom: 1px solid #a0c0f0;
color: #2B7CE9; color: #2B7CE9;
} }
h3 h3
{
font-size: 100%;
{
font-size: 100%;
} }
hr hr
{ {
border: none 0;
border-top: 1px solid #a0c0f0;
height: 1px;
border: none 0;
border-top: 1px solid #a0c0f0;
height: 1px;
} }
pre.code pre.code
{ {
display: block;
padding: 8px;
border: 1px dashed #ccc;
display: block;
padding: 8px;
border: 1px dashed #ccc;
} }
table table
@ -52,7 +52,7 @@ th, td
padding: 3px; padding: 3px;
} }
th
th
{ {
font-weight: bold; font-weight: bold;
} }
@ -69,8 +69,8 @@ input[type=text] {
} }
#datasourceText, #googlespreadsheetText { #datasourceText, #googlespreadsheetText {
width: 500px;
width: 500px;
} }
.info { .info {

+ 331
- 331
examples/graph3d/playground/playground.js View File

@ -3,15 +3,15 @@ var query = null;
function load() { function load() {
selectDataType();
selectDataType();
loadCsvExample();
loadJsonExample();
loadJavascriptExample();
loadGooglespreadsheetExample();
loadDatasourceExample();
loadCsvExample();
loadJsonExample();
loadJavascriptExample();
loadGooglespreadsheetExample();
loadDatasourceExample();
draw();
draw();
} }
@ -24,32 +24,32 @@ function selectDataType() {
function round(value, decimals) { function round(value, decimals) {
return parseFloat(value.toFixed(decimals));
return parseFloat(value.toFixed(decimals));
} }
function loadCsvExample() { function loadCsvExample() {
var csv = "";
var csv = "";
// headers
csv += '"x", "y", "value"\n';
// 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;
// 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';
}
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(value, 2) + '\n';
} }
}
document.getElementById("csvTextarea").innerHTML = csv;
document.getElementById("csvTextarea").innerHTML = csv;
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
// also adjust some settings
document.getElementById("style").value = "surface";
document.getElementById("verticalRatio").value = "0.5";
document.getElementById("xLabel").value = "x"; document.getElementById("xLabel").value = "x";
document.getElementById("yLabel").value = "y"; document.getElementById("yLabel").value = "y";
@ -61,67 +61,67 @@ function loadCsvExample() {
function loadCsvAnimationExample() { 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';
}
}
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;
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;
// 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 = "";
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(); drawCsv();
} }
function loadCsvLineExample() { 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;
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("xLabel").value = "sin(t)";
document.getElementById("yLabel").value = "cos(t)"; document.getElementById("yLabel").value = "cos(t)";
@ -133,57 +133,57 @@ function loadCsvLineExample() {
} }
function loadCsvMovingDotsExample() { 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';
}
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;
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;
// 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("xLabel").value = "x";
document.getElementById("yLabel").value = "y"; document.getElementById("yLabel").value = "y";
@ -195,33 +195,33 @@ function loadCsvMovingDotsExample() {
} }
function loadCsvColoredDotsExample() { function loadCsvColoredDotsExample() {
var csv = "";
var csv = "";
// headers
csv += '"x", "y", "z", "distance"\n';
// 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 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));
// 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';
}
csv += round(x, 2) + ', ' + round(y, 2) + ', ' + round(z, 2) + ', ' + round(dist, 2)+ '\n';
}
document.getElementById("csvTextarea").innerHTML = csv;
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;
// 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("xLabel").value = "x";
document.getElementById("yLabel").value = "y"; document.getElementById("yLabel").value = "y";
@ -233,34 +233,34 @@ function loadCsvColoredDotsExample() {
} }
function loadCsvSizedDotsExample() { 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';
}
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;
document.getElementById("csvTextarea").innerHTML = csv;
// 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;
// also adjust some settings
document.getElementById("style").value = "dot-size";
document.getElementById("verticalRatio").value = "1.0";
document.getElementById("showPerspective").checked = true;
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("xLabel").value = "x";
document.getElementById("yLabel").value = "y"; document.getElementById("yLabel").value = "y";
@ -297,7 +297,7 @@ function loadDatasourceExample() {
* @return {string} datatype * @return {string} datatype
*/ */
function getDataType() { function getDataType() {
return "csv";
return "csv";
} }
@ -307,61 +307,61 @@ function getDataType() {
* @return {vis DataSet} * @return {vis DataSet}
*/ */
function getDataCsv() { function getDataCsv() {
var csv = document.getElementById("csvTextarea").value;
var csv = document.getElementById("csvTextarea").value;
// parse the csv content
var csvArray = csv2array(csv);
// parse the csv content
var csvArray = csv2array(csv);
var data = new vis.DataSet({});
var data = new vis.DataSet();
var skipValue = false;
if (document.getElementById("filterLabel").value != "" && document.getElementById("legendLabel").value == "") {
skipValue = true;
}
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])});
}
// 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;
return data;
} }
/** /**
* remove leading and trailing spaces * remove leading and trailing spaces
*/ */
function trim(text) { function trim(text) {
while (text.length && text.charAt(0) == ' ')
text = text.substr(1);
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);
while (text.length && text.charAt(text.length-1) == ' ')
text = text.substr(0, text.length-1);
return text;
return text;
} }
/** /**
@ -369,10 +369,10 @@ function trim(text) {
* @return {vis Dataset} * @return {vis Dataset}
*/ */
function getDataJson() { function getDataJson() {
var json = document.getElementById("jsonTextarea").value;
var data = new google.visualization.DataTable(json);
var json = document.getElementById("jsonTextarea").value;
var data = new google.visualization.DataTable(json);
return data;
return data;
} }
@ -381,11 +381,11 @@ function getDataJson() {
* @return {vis Dataset} * @return {vis Dataset}
*/ */
function getDataJavascript() { function getDataJavascript() {
var js = document.getElementById("javascriptTextarea").value;
var js = document.getElementById("javascriptTextarea").value;
eval(js);
eval(js);
return data;
return data;
} }
@ -400,160 +400,160 @@ function getDataDatasource() {
* Retrieve a JSON object with all options * Retrieve a JSON object with all options
*/ */
function getOptions() { 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
};
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 * Redraw the graph with the entered data and options
*/ */
function draw() { function draw() {
return drawCsv();
return drawCsv();
} }
function drawCsv() { function drawCsv() {
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// retrieve data and options
var data = getDataCsv();
var options = getOptions();
// retrieve data and options
var data = getDataCsv();
var options = getOptions();
// Draw our graph with the created data and options
graph.draw(data, options);
// Draw our graph with the created data and options
graph.draw(data, options);
} }
function drawJson() { function drawJson() {
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// retrieve data and options
var data = getDataJson();
var options = getOptions();
// retrieve data and options
var data = getDataJson();
var options = getOptions();
// Draw our graph with the created data and options
graph.draw(data, options);
// Draw our graph with the created data and options
graph.draw(data, options);
} }
function drawJavascript() { function drawJavascript() {
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// retrieve data and options
var data = getDataJavascript();
var options = getOptions();
// retrieve data and options
var data = getDataJavascript();
var options = getOptions();
// Draw our graph with the created data and options
graph.draw(data, options);
// Draw our graph with the created data and options
graph.draw(data, options);
} }
function drawGooglespreadsheet() { function drawGooglespreadsheet() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
// Draw our graph with the created data and options
graph.draw(data, options);
}
url = document.getElementById("googlespreadsheetText").value;
document.getElementById("draw").disabled = "disabled";
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);
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
} }
function drawDatasource() { function drawDatasource() {
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// Instantiate our graph object.
drawGraph = function(response) {
document.getElementById("draw").disabled = "";
if (response.isError()) {
error = 'Error: ' + response.getMessage();
document.getElementById('graph').innerHTML =
"<span style='color: red; font-weight: bold;'>" + error + "</span>"; ;
}
// retrieve the data from the query response
data = response.getDataTable();
// retrieve the data from the query response
data = response.getDataTable();
// specify options
options = getOptions();
// specify options
options = getOptions();
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Instantiate our graph object.
var graph = new vis.Graph3d(document.getElementById('graph'));
// Draw our graph with the created data and options
graph.draw(data, options);
};
// Draw our graph with the created data and options
graph.draw(data, options);
};
url = document.getElementById("datasourceText").value;
document.getElementById("draw").disabled = "disabled";
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?");
}
// 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);
// send the request
query && query.abort();
query = new google.visualization.Query(url);
query.send(drawGraph);
} }

Loading…
Cancel
Save