jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Updated examples a little

css_transitions
jos 10 years ago
parent
5977b5bf8a
commit
e6cd80ad6f
19 changed files with 1144 additions and 1143 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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);
} }

Write Preview
Loading…
Cancel
Save