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.

70 lines
2.1 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 line demo</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. // Called when the Visualization API is loaded.
  17. function drawVisualization() {
  18. // Create and populate a data table.
  19. data = new google.visualization.DataTable();
  20. data.addColumn('number', 'x');
  21. data.addColumn('number', 'y');
  22. data.addColumn('number', 'value');
  23. // create some nice looking data with sin/cos
  24. var steps = 500;
  25. var axisMax = 314;
  26. var tmax = 4 * 2 * Math.PI;
  27. var axisStep = axisMax / steps;
  28. for (var t = 0; t < tmax; t += tmax / steps) {
  29. var r = 1;
  30. var x = r * Math.sin(t);
  31. var y = r * Math.cos(t);
  32. var z = t / tmax;
  33. data.addRow([x, y, z]);
  34. }
  35. // specify options
  36. var options = {
  37. width: "600px",
  38. height: "600px",
  39. style: "line",
  40. showPerspective: false,
  41. showGrid: true,
  42. keepAspectRatio: true,
  43. verticalRatio: 1.0
  44. };
  45. // Instantiate our graph object.
  46. graph = new links.Graph3d(document.getElementById('mygraph'));
  47. // Draw our graph with the created data and options
  48. graph.draw(data, options);
  49. graph.setCameraPosition(0.4, undefined, undefined);
  50. }
  51. </script>
  52. </head>
  53. <body>
  54. <div id="mygraph"></div>
  55. <div id="info"></div>
  56. </body>
  57. </html>