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.

120 lines
3.5 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
  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 styles</title>
  5. <style>
  6. body {font: 10pt arial;}
  7. </style>
  8. <script type="text/javascript" src="../../dist/vis.js"></script>
  9. <script type="text/javascript">
  10. var data = null;
  11. var graph = null;
  12. function custom(x, y) {
  13. return (-Math.sin(x/Math.PI) * Math.cos(y/Math.PI) * 10 + 10);
  14. }
  15. // Called when the Visualization API is loaded.
  16. function drawVisualization() {
  17. var style = document.getElementById('style').value;
  18. var showPerspective = document.getElementById('perspective').checked;
  19. var xBarWidth = parseFloat(document.getElementById('xBarWidth').value) || undefined;
  20. var yBarWidth = parseFloat(document.getElementById('yBarWidth').value) || undefined;
  21. var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
  22. // Create and populate a data table.
  23. data = [];
  24. // create some nice looking data with sin/cos
  25. var steps = 5; // number of datapoints will be steps*steps
  26. var axisMax = 10;
  27. var axisStep = axisMax / steps;
  28. for (var x = 0; x <= axisMax; x+=axisStep) {
  29. for (var y = 0; y <= axisMax; y+=axisStep) {
  30. var z = custom(x,y);
  31. if (withValue) {
  32. var value = (y - x);
  33. data.push({x:x, y:y, z: z, style:value});
  34. }
  35. else {
  36. data.push({x:x, y:y, z: z});
  37. }
  38. }
  39. }
  40. // specify options
  41. var options = {
  42. width: '600px',
  43. height: '600px',
  44. style: style,
  45. xBarWidth: xBarWidth,
  46. yBarWidth: yBarWidth,
  47. showPerspective: showPerspective,
  48. showGrid: true,
  49. showShadow: false,
  50. keepAspectRatio: true,
  51. verticalRatio: 0.5
  52. };
  53. var camera = graph ? graph.getCameraPosition() : null;
  54. // create our graph
  55. var container = document.getElementById('mygraph');
  56. graph = new vis.Graph3d(container, data, options);
  57. if (camera) graph.setCameraPosition(camera); // restore camera position
  58. document.getElementById('style').onchange = drawVisualization;
  59. document.getElementById('perspective').onchange = drawVisualization;
  60. document.getElementById('xBarWidth').onchange = drawVisualization;
  61. document.getElementById('yBarWidth').onchange = drawVisualization;
  62. }
  63. </script>
  64. </head>
  65. <body onload="drawVisualization()">
  66. <p>
  67. <label for="style"> Style:
  68. <select id="style">
  69. <option value="bar">bar</option>
  70. <option value="bar-color">bar-color</option>
  71. <option value="bar-size">bar-size</option>
  72. <option value="dot">dot</option>
  73. <option value="dot-line">dot-line</option>
  74. <option value="dot-color">dot-color</option>
  75. <option value="dot-size">dot-size</option>
  76. <option value="grid">grid</option>
  77. <option value="line">line</option>
  78. <option value="surface">surface</option>
  79. </select>
  80. </label>
  81. </p>
  82. <p>
  83. <label for="perspective">
  84. <input type="checkbox" id="perspective" checked> Show perspective
  85. </label>
  86. </p>
  87. <p>
  88. <label for="xBarWidth"> Bar width X:
  89. <input type="text" id="xBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
  90. </label>
  91. </p>
  92. <p>
  93. <label for="yBarWidth"> Bar width Y:
  94. <input type="text" id="yBarWidth" value="" style="width:50px;"> (only applicable for styles "bar" and "bar-color")
  95. </label>
  96. </p>
  97. <div id="mygraph"></div>
  98. <div id="info"></div>
  99. </body>
  100. </html>