diff --git a/HISTORY.md b/HISTORY.md index 2a7859ef..4cf60751 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -2,7 +2,7 @@ http://visjs.org -## not yet released, version 1.0.3 +## not yet released, version 1.1.0 ### Timeline @@ -18,7 +18,7 @@ http://visjs.org ### Graph3D -- Ported Graph3D from Chap Links. +- Ported Graph3D from Chap Links Library. ## 2014-05-28, version 1.0.2 diff --git a/Jakefile.js b/Jakefile.js index 66611f04..376f2a3d 100644 --- a/Jakefile.js +++ b/Jakefile.js @@ -98,7 +98,7 @@ task('build', {async: true}, function () { './src/graph/graphMixins/MixinLoader.js', './src/graph/Graph.js', - './src/graph3d/graph3d.js', + './src/graph3d/Graph3d.js', './src/module/exports.js' ], diff --git a/docs/graph3d.html b/docs/graph3d.html index d5b3cacf..ddd3fc00 100644 --- a/docs/graph3d.html +++ b/docs/graph3d.html @@ -43,67 +43,70 @@ <!DOCTYPE HTML> <html> <head> - <title>Graph 3D demo</title> - - <style> - body {font: 10pt arial;} - </style> - - <script type="text/javascript" src="../../dist/vis.js"></script> - - <script type="text/javascript"> - var data = null; - var graph = null; - - function custom(x, y) { - return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50); + <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();"> -<div id="mygraph"></div> + <div id="mygraph"></div> - <div id="info"></div> + <div id="info"></div> </body> </html> diff --git a/examples/graph3d/default.css b/examples/graph3d/default.css index f0c251df..f7afb828 100644 --- a/examples/graph3d/default.css +++ b/examples/graph3d/default.css @@ -1,87 +1,87 @@ html, body { - width: 100%; - height: 100%; - padding: 0; - margin: 0; + width: 100%; + height: 100%; + padding: 0; + margin: 0; } body, td, th { - font-family: arial, sans-serif; - font-size: 11pt; - color: #4D4D4D; - line-height: 1.7em; + font-family: arial, sans-serif; + font-size: 11pt; + color: #4D4D4D; + line-height: 1.7em; } #container { - margin: 0 auto; - padding-bottom: 50px; - width: 900px; + margin: 0 auto; + padding-bottom: 50px; + width: 900px; } 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 { - 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 { - font-size: 140%; + font-size: 140%; } a { - color: #2B7CE9; - text-decoration: none; + color: #2B7CE9; + text-decoration: none; } a:visited { - color: #2E60A4; + color: #2E60A4; } a:hover { - color: red; - text-decoration: underline; + color: red; + text-decoration: underline; } hr { - border: none 0; - border-top: 1px solid #abc; - height: 1px; + border: none 0; + border-top: 1px solid #abc; + height: 1px; } 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 { - background-color: #f5f5f5; + background-color: #f5f5f5; } table { - border-collapse: collapse; + border-collapse: collapse; } 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 { - border: 1px solid lightgray; - padding: 5px; - vertical-align: top; + border: 1px solid lightgray; + padding: 5px; + vertical-align: top; } diff --git a/examples/graph3d/example01_basis.html b/examples/graph3d/example01_basis.html index 7816718c..d3c18e57 100644 --- a/examples/graph3d/example01_basis.html +++ b/examples/graph3d/example01_basis.html @@ -1,56 +1,56 @@ - Graph 3D demo - - - - - - + + + } + + // 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); + } + diff --git a/examples/graph3d/example02_camera.html b/examples/graph3d/example02_camera.html index 2cfe0fa0..771e4f49 100644 --- a/examples/graph3d/example02_camera.html +++ b/examples/graph3d/example02_camera.html @@ -1,107 +1,106 @@ - Graph 3D camera position + Graph 3D camera position - + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + graph.on("camerapositionchange", oncamerapositionchange); + //graph.redraw(); + } +

Graph 3d camera position

- - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + +
Horizontal angle (0 to 2*pi)
Vertical angle (0 to 0.5*pi)
Distance (0.71 to 5.0)
Horizontal angle (0 to 2*pi)
Vertical angle (0 to 0.5*pi)
Distance (0.71 to 5.0)
diff --git a/examples/graph3d/example03_filter.html b/examples/graph3d/example03_filter.html index 2074a49e..cd7819cc 100644 --- a/examples/graph3d/example03_filter.html +++ b/examples/graph3d/example03_filter.html @@ -1,62 +1,60 @@ - Graph 3D demo + Graph 3D demo - + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example04_animate.html b/examples/graph3d/example04_animate.html index 5876a2f6..19cbef7a 100644 --- a/examples/graph3d/example04_animate.html +++ b/examples/graph3d/example04_animate.html @@ -1,68 +1,68 @@ - Graph 3D animation demo + Graph 3D animation demo - + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example05_line.html b/examples/graph3d/example05_line.html index 86432f76..74d0313f 100644 --- a/examples/graph3d/example05_line.html +++ b/examples/graph3d/example05_line.html @@ -1,56 +1,56 @@ - Graph 3D line demo - - - - - - + Graph 3D line demo + + + + + + diff --git a/examples/graph3d/example06_moving_dots.html b/examples/graph3d/example06_moving_dots.html index 29762157..c21e86f9 100644 --- a/examples/graph3d/example06_moving_dots.html +++ b/examples/graph3d/example06_moving_dots.html @@ -1,75 +1,75 @@ - Graph 3D animation moving dots + Graph 3D animation moving dots - + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example07_dot_cloud_colors.html b/examples/graph3d/example07_dot_cloud_colors.html index 23dfa042..c89949ec 100644 --- a/examples/graph3d/example07_dot_cloud_colors.html +++ b/examples/graph3d/example07_dot_cloud_colors.html @@ -1,63 +1,63 @@ - Graph 3D cloud with colored dots + Graph 3D cloud with colored dots - + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example08_dot_cloud_size.html b/examples/graph3d/example08_dot_cloud_size.html index 2be3830f..49615760 100644 --- a/examples/graph3d/example08_dot_cloud_size.html +++ b/examples/graph3d/example08_dot_cloud_size.html @@ -1,64 +1,64 @@ - Graph 3D cloud with sized dots + Graph 3D cloud with sized dots - - + + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example09_mobile.html b/examples/graph3d/example09_mobile.html index 0ca57902..0901584a 100644 --- a/examples/graph3d/example09_mobile.html +++ b/examples/graph3d/example09_mobile.html @@ -1,77 +1,77 @@ - Graph 3D demo + Graph 3D demo - + #mygraph { + position: absolute; + width: 100%; + height: 100%; + } + - - + + - + - + // Draw our graph with the created data and options + graph.draw(data, options); + } + diff --git a/examples/graph3d/example10_styles.html b/examples/graph3d/example10_styles.html index 27356a98..2d1886b3 100644 --- a/examples/graph3d/example10_styles.html +++ b/examples/graph3d/example10_styles.html @@ -1,118 +1,118 @@ - Graph 3D styles - - - - - - + + + } + + // 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; + } +

-

- +

- +

- +

diff --git a/examples/graph3d/example11_tooltips.html b/examples/graph3d/example11_tooltips.html index d212c77c..05bbd0ec 100644 --- a/examples/graph3d/example11_tooltips.html +++ b/examples/graph3d/example11_tooltips.html @@ -1,101 +1,101 @@ - Graph 3D tooltips + Graph 3D tooltips + + + + + + + // 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: ' + point.z + ''; + }, - + // 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; + } +

-

diff --git a/examples/graph3d/index.html b/examples/graph3d/index.html index b4edf86b..3af5edbe 100644 --- a/examples/graph3d/index.html +++ b/examples/graph3d/index.html @@ -1,23 +1,23 @@ - +
-

Examples

+

Examples

-

example01_basis.html

-

example02_camera.html

-

example03_filter.html

-

example04_animate.html

-

example05_line.html

-

example06_moving_dots.html

-

example07_dot_cloud_colors.html

-

example08_dot_cloud_size.html

-

example09_mobile.html

-

example10_styles.html

-

example11_tooltips.html

+

example01_basis.html

+

example02_camera.html

+

example03_filter.html

+

example04_animate.html

+

example05_line.html

+

example06_moving_dots.html

+

example07_dot_cloud_colors.html

+

example08_dot_cloud_size.html

+

example09_mobile.html

+

example10_styles.html

+

example11_tooltips.html

Playground

Open the playground

diff --git a/examples/graph3d/playground/index.html b/examples/graph3d/playground/index.html index 2ca7cc9e..d9a7ed3a 100644 --- a/examples/graph3d/playground/index.html +++ b/examples/graph3d/playground/index.html @@ -55,6 +55,7 @@
+
diff --git a/examples/graph3d/playground/playground.css b/examples/graph3d/playground/playground.css index 82c04093..5139d4b5 100644 --- a/examples/graph3d/playground/playground.css +++ b/examples/graph3d/playground/playground.css @@ -1,41 +1,41 @@ body { - font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; + font: 13px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif; } - + 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; border-bottom: 1px solid #a0c0f0; color: #2B7CE9; } h3 -{ - font-size: 100%; +{ + font-size: 100%; } hr { - border: none 0; - border-top: 1px solid #a0c0f0; - height: 1px; + border: none 0; + border-top: 1px solid #a0c0f0; + height: 1px; } - + pre.code { - display: block; - padding: 8px; - border: 1px dashed #ccc; + display: block; + padding: 8px; + border: 1px dashed #ccc; } table @@ -52,7 +52,7 @@ th, td padding: 3px; } -th +th { font-weight: bold; } @@ -69,8 +69,8 @@ input[type=text] { } #datasourceText, #googlespreadsheetText { - width: 500px; - + width: 500px; + } .info { diff --git a/examples/graph3d/playground/playground.js b/examples/graph3d/playground/playground.js index 0284860c..b7d62e5e 100644 --- a/examples/graph3d/playground/playground.js +++ b/examples/graph3d/playground/playground.js @@ -3,15 +3,15 @@ var query = null; 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) { - return parseFloat(value.toFixed(decimals)); + return parseFloat(value.toFixed(decimals)); } 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("yLabel").value = "y"; @@ -61,67 +61,67 @@ function loadCsvExample() { 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(); } 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("yLabel").value = "cos(t)"; @@ -133,57 +133,57 @@ function loadCsvLineExample() { } 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("yLabel").value = "y"; @@ -195,33 +195,33 @@ function loadCsvMovingDotsExample() { } 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("yLabel").value = "y"; @@ -233,34 +233,34 @@ function loadCsvColoredDotsExample() { } 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("yLabel").value = "y"; @@ -297,7 +297,7 @@ function loadDatasourceExample() { * @return {string} datatype */ function getDataType() { - return "csv"; + return "csv"; } @@ -307,61 +307,61 @@ function getDataType() { * @return {vis DataSet} */ 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 */ 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} */ 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} */ 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 */ 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 */ function draw() { - return drawCsv(); + return 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() { - // 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() { - // 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() { - // Instantiate our graph object. - drawGraph = function(response) { - document.getElementById("draw").disabled = ""; - - if (response.isError()) { - error = 'Error: ' + response.getMessage(); - document.getElementById('graph').innerHTML = - "" + error + ""; ; - } + // Instantiate our graph object. + drawGraph = function(response) { + document.getElementById("draw").disabled = ""; + + if (response.isError()) { + error = 'Error: ' + response.getMessage(); + document.getElementById('graph').innerHTML = + "" + error + ""; ; + } - // retrieve the data from the query response - data = response.getDataTable(); + // 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() { - // Instantiate our graph object. - drawGraph = function(response) { - document.getElementById("draw").disabled = ""; - - if (response.isError()) { - error = 'Error: ' + response.getMessage(); - document.getElementById('graph').innerHTML = - "" + error + ""; ; - } + // Instantiate our graph object. + drawGraph = function(response) { + document.getElementById("draw").disabled = ""; + + if (response.isError()) { + error = 'Error: ' + response.getMessage(); + document.getElementById('graph').innerHTML = + "" + error + ""; ; + } - // retrieve the data from the query response - data = response.getDataTable(); + // 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); }