vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

79 lines
1.9 KiB

10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <title>Graph 3D demo</title>
  5. <style>
  6. html, body {
  7. font: 10pt arial;
  8. padding: 0;
  9. margin: 0;
  10. width: 100%;
  11. height: 100%;
  12. }
  13. #mygraph {
  14. position: absolute;
  15. width: 100%;
  16. height: 100%;
  17. }
  18. </style>
  19. <!-- for mobile devices like android and iphone -->
  20. <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
  21. <script type="text/javascript" src="../../dist/vis.js"></script>
  22. <script type="text/javascript">
  23. var data = null;
  24. var graph = null;
  25. function custom(x, y) {
  26. return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
  27. }
  28. // Called when the Visualization API is loaded.
  29. function drawVisualization() {
  30. // Create and populate a data table.
  31. data = new vis.DataSet();
  32. // create some nice looking data with sin/cos
  33. var steps = 10; // number of datapoints will be steps*steps
  34. var axisMax = 314;
  35. var axisStep = axisMax / steps;
  36. for (var x = 0; x < axisMax; x+=axisStep) {
  37. for (var y = 0; y < axisMax; y+=axisStep) {
  38. var value = custom(x,y);
  39. data.add([
  40. {x:x,y:y,z:value}
  41. ]);
  42. }
  43. }
  44. // specify options
  45. var options = {
  46. width: '100%',
  47. height: '100%',
  48. style: 'surface',
  49. showPerspective: true,
  50. showGrid: true,
  51. showShadow: false,
  52. keepAspectRatio: true,
  53. verticalRatio: 0.5,
  54. backgroundColor: {
  55. strokeWidth: 0
  56. }
  57. };
  58. // create our graph
  59. var container = document.getElementById('mygraph');
  60. graph = new vis.Graph3d(container, data, options);
  61. }
  62. </script>
  63. </head>
  64. <body onresize="graph.redraw();" onload="drawVisualization()">
  65. <div id="mygraph"></div>
  66. </body>
  67. </html>