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.

103 lines
3.2 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
  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 tooltips</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 withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
  19. // Create and populate a data table.
  20. data = new vis.DataSet();
  21. // create some nice looking data with sin/cos
  22. var steps = 5; // number of datapoints will be steps*steps
  23. var axisMax = 10;
  24. var axisStep = axisMax / steps;
  25. for (var x = 0; x <= axisMax; x+=axisStep) {
  26. for (var y = 0; y <= axisMax; y+=axisStep) {
  27. var z = custom(x,y);
  28. if (withValue) {
  29. var value = (y - x);
  30. data.add({x:x, y:y, z: z, style:value});
  31. }
  32. else {
  33. data.add({x:x, y:y, z: z});
  34. }
  35. }
  36. }
  37. // specify options
  38. var options = {
  39. width: '600px',
  40. height: '600px',
  41. style: style,
  42. showPerspective: true,
  43. showGrid: true,
  44. showShadow: false,
  45. // Option tooltip can be true, false, or a function returning a string with HTML contents
  46. //tooltip: true,
  47. tooltip: function (point) {
  48. // parameter point contains properties x, y, z
  49. return 'value: <b>' + point.z + '</b>';
  50. },
  51. keepAspectRatio: true,
  52. verticalRatio: 0.5
  53. };
  54. var camera = graph ? graph.getCameraPosition() : null;
  55. // create our graph
  56. var container = document.getElementById('mygraph');
  57. graph = new vis.Graph3d(container, data, options);
  58. if (camera) graph.setCameraPosition(camera); // restore camera position
  59. document.getElementById('style').onchange = drawVisualization;
  60. }
  61. </script>
  62. <script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-61231638-1', 'auto');ga('send', 'pageview');</script></head>
  63. <body onload="drawVisualization()">
  64. <p>
  65. <label for="style"> Style:
  66. <select id="style">
  67. <option value="bar">bar</option>
  68. <option value="bar-color">bar-color</option>
  69. <option value="bar-size">bar-size</option>
  70. <option value="dot">dot</option>
  71. <option value="dot-line">dot-line</option>
  72. <option value="dot-color">dot-color</option>
  73. <option value="dot-size">dot-size</option>
  74. <option value="grid">grid</option>
  75. <option value="line">line</option>
  76. <option value="surface">surface</option>
  77. </select>
  78. </label>
  79. </p>
  80. <div id="mygraph"></div>
  81. <div id="info"></div>
  82. </body>
  83. </html>