| Current File : /home/jvzmxxx/wiki/extensions/InteractiveTimeline/chap-links-library/js/src/graph3d/tests/test.html |
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<title>Graph 3D animation demo</title>
<style>
body {font: 10pt arial;}
</style>
<!-- For running IE9 mode, define the meta X-UA-Compatible, and specify DOCTYPE -->
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="../graph3d.js"></script>
<link rel="stylesheet" type="text/css" href="../graph3d.css">
<script type="text/javascript">
var data = null;
var graph = null;
google.load("visualization", "1");
// Set callback to run when API is loaded
google.setOnLoadCallback(drawVisualization);
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 google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn('number', 'value');
data.addColumn('number', 'Time');
// create some nice looking data with sin/cos
// number of datapoints will be steps*steps*tMax
var steps = 25;
var axisMax = 314;
var tMax = 31;
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.addRow([x, y, value, t]);
}
}
}
// specify options
options = {width: "99%",
height: "99%",
style: "surface",
showPerspective: true,
showGrid: true,
showShadow: false,
keepAspectRatio: true,
yCenter: "45%",
xCenter: "55%",
verticalRatio: 0.5,
animationInterval: 100, // milliseconds
animationPreload: true
};
// Instantiate our graph object.
graph = new links.Graph3d(document.getElementById('mygraph'));
// Draw our graph with the created data and options
graph.draw(data, options);
}
</script>
</head>
<body onresize="graph.redraw();">
<div id="mygraph"></div>
<div id="info"></div>
</body>
</html>