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.

131 lines
4.4 KiB

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