|
|
@ -1,118 +1,118 @@ |
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
|
|
<html> |
|
|
|
<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> |
|
|
|
|
|
|
|
<body onload="drawVisualization()"> |
|
|
|
|
|
|
|
<p> |
|
|
|
<label for="style"> Style: |
|
|
|
<label for="style"> 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> |
|
|
|
</label> |
|
|
|
</label> |
|
|
|
</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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
|
|
|
|
<div id="mygraph"></div> |
|
|
|