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.

179 lines
7.2 KiB

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 - Playground</title>
  5. <script type="text/javascript" src="../../../dist/vis.js"></script>
  6. <script type="text/javascript" src="playground.js"></script>
  7. <script type="text/javascript" src="csv2array.js"></script>
  8. <link rel='stylesheet' href='playground.css' type='text/css'>
  9. <script type="text/javascript">
  10. // Called when the Visualization API is loaded.
  11. function drawVisualization() {
  12. // TODO
  13. }
  14. </script>
  15. <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>
  16. <body onload="load();">
  17. <h1>Graph 3D - Playground</h1>
  18. <table style="width:100%;">
  19. <col width="50%">
  20. <col width="50%">
  21. <tr>
  22. <td>
  23. <h2>Data</h2>
  24. <p>
  25. Graph 3D expects a data table with first three to five columns:
  26. colums <code>x</code>, <code>y</code>, <code>z</code> (optional),
  27. <code>style</code>, <code>filter</code> (optional).
  28. </p>
  29. <table>
  30. <tr>
  31. <td style="white-space: nowrap">
  32. <input type="radio" name="datatype" id="datatypeCsv" onclick="selectDataType();" checked value="csv">Csv
  33. </td>
  34. <td>
  35. <div id="csv">
  36. <textarea id="csvTextarea"></textarea>
  37. <p>
  38. <a href="javascript: loadCsvExample();" title="Load an example">Simple example</a>
  39. <a href="javascript: loadCsvLineExample();" title="Load an example">Line example</a>
  40. <a href="javascript: loadCsvAnimationExample();" title="Load an example">Animation example</a>
  41. <a href="javascript: loadCsvMovingDotsExample();" title="Load an example">Moving dots example</a>
  42. <a href="javascript: loadCsvColoredDotsExample();" title="Load an example">Colored dots example</a>
  43. <a href="javascript: loadCsvSizedDotsExample();" title="Load an example">Sized dots example</a>
  44. </p>
  45. </div>
  46. </td>
  47. </tr>
  48. <!-- TODO: add JSON examples -->
  49. </table>
  50. <br>
  51. </td>
  52. <td rowspan=2>
  53. <h2>Graph</h2>
  54. <p>
  55. <input type="button" value="Draw graph" onclick="draw();" id="draw">
  56. </p>
  57. <div id="graph"></div>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td>
  62. <h2>Options</h2>
  63. <table>
  64. <tr>
  65. <th>Option</th>
  66. <th>Value</th>
  67. </tr>
  68. <tr>
  69. <td>width</td>
  70. <td><input type="text" id="width" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
  71. </tr>
  72. <tr>
  73. <td>height</td>
  74. <td><input type="text" id="height" value="100%" /> <span class="info">for example "500px" or "100%"</span></td>
  75. </tr>
  76. <tr>
  77. <td>style</td>
  78. <td>
  79. <select id="style">
  80. <option value="bar" >bar
  81. <option value="bar-color" >bar-color
  82. <option value="bar-size" >bar-size
  83. <option value="dot" >dot
  84. <option value="dot-color" >dot-color
  85. <option value="dot-size" >dot-size
  86. <option value="dot-line" >dot-line
  87. <option value="line" >line
  88. <option value="grid" >grid
  89. <option value="surface" selected>surface
  90. </select>
  91. </tr>
  92. <tr>
  93. <td>showAnimationControls</td>
  94. <td><input type="checkbox" id="showAnimationControls" checked /></td>
  95. </tr>
  96. <tr>
  97. <td>showGrid</td>
  98. <td><input type="checkbox" id="showGrid" checked /></td>
  99. </tr>
  100. <tr>
  101. <td>showPerspective</td>
  102. <td><input type="checkbox" id="showPerspective" checked /></td>
  103. </tr>
  104. <tr>
  105. <td>showShadow</td>
  106. <td><input type="checkbox" id="showShadow" /></td>
  107. </tr>
  108. <tr>
  109. <td>keepAspectRatio</td>
  110. <td><input type="checkbox" id="keepAspectRatio" checked /></td>
  111. </tr>
  112. <tr>
  113. <td>verticalRatio</td>
  114. <td><input type="text" id="verticalRatio" value="0.5" /> <span class="info">a value between 0.1 and 1.0</span></td>
  115. </tr>
  116. <tr>
  117. <td>animationInterval</td>
  118. <td><input type="text" id="animationInterval" value="1000" /> <span class="info">in milliseconds</span></td>
  119. </tr>
  120. <tr>
  121. <td>animationPreload</td>
  122. <td><input type="checkbox" id="animationPreload" /></td>
  123. </tr>
  124. <tr>
  125. <td>animationAutoStart</td>
  126. <td><input type="checkbox" id="animationAutoStart" /></td>
  127. </tr>
  128. <tr><td>xCenter</td><td><input type="text" id="xCenter" value="55%" /></td></tr>
  129. <tr><td>yCenter</td><td><input type="text" id="yCenter" value="45%" /></td></tr>
  130. <tr><td>xMin</td><td><input type="text" id="xMin" /></td></tr>
  131. <tr><td>xMax</td><td><input type="text" id="xMax" /></td></tr>
  132. <tr><td>xStep</td><td><input type="text" id="xStep" /></td></tr>
  133. <tr><td>yMin</td><td><input type="text" id="yMin" /></td></tr>
  134. <tr><td>yMax</td><td><input type="text" id="yMax" /></td></tr>
  135. <tr><td>yStep</td><td><input type="text" id="yStep" /></td></tr>
  136. <tr><td>zMin</td><td><input type="text" id="zMin" /></td></tr>
  137. <tr><td>zMax</td><td><input type="text" id="zMax" /></td></tr>
  138. <tr><td>zStep</td><td><input type="text" id="zStep" /></td></tr>
  139. <tr><td>valueMin</td><td><input type="text" id="valueMin" /></td></tr>
  140. <tr><td>valueMax</td><td><input type="text" id="valueMax" /></td></tr>
  141. <tr><td>xBarWidth</td><td><input type="text" id="xBarWidth" /></td></tr>
  142. <tr><td>yBarWidth</td><td><input type="text" id="yBarWidth" /></td></tr>
  143. <tr><td>xLabel</td><td><input type="text" id="xLabel" value="x"/></td></tr>
  144. <tr><td>yLabel</td><td><input type="text" id="yLabel" value="y"/></td></tr>
  145. <tr><td>zLabel</td><td><input type="text" id="zLabel" value="z"/></td></tr>
  146. <tr><td>filterLabel</td><td><input type="text" id="filterLabel" value="time"/></td></tr>
  147. <tr><td>legendLabel</td><td><input type="text" id="legendLabel" value="value"/></td></tr>
  148. </table>
  149. </td>
  150. </tr>
  151. </table>
  152. </body>