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.

257 lines
11 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
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
10 years ago
10 years ago
10 years ago
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  5. <meta content="utf-8" http-equiv="encoding">
  6. <title>Graph2d | Dynamic Styling</title>
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. }
  11. </style>
  12. <script src="../../dist/vis.js"></script>
  13. <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css"/>
  14. <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>
  15. <body>
  16. <h2>Graph2d | Dynamic Styling Example</h2>
  17. <div style="width:800px; font-size:14px; text-align: justify;">
  18. This example shows how to programmatically change the styling of a group. While this can also
  19. be done in CSS, this must be statically defined, and the programmatic interface allows the
  20. user to define the look of the graph at runtime.
  21. </div>
  22. <br/>
  23. <table>
  24. <col width="600">
  25. <col width="220">
  26. <tr>
  27. <td style="padding-right: 20px; border-right: 1px solid;">
  28. <div id="visualization"></div>
  29. </td>
  30. <td style="padding-left: 5px;">
  31. <table style="font-size: 12px;">
  32. <col width="150">
  33. <col width="50">
  34. <tr>
  35. <td>Line Color</td>
  36. <td>
  37. <select id="color" onchange="updateStyle()">
  38. <option value="stroke:green;">green</option>
  39. <option value="stroke:red;">red</option>
  40. <option value="stroke:blue;" selected="selected">blue</option>
  41. <option value="stroke:black;">black</option>
  42. </select>
  43. </td>
  44. </tr>
  45. <tr>
  46. <td>Line Style</td>
  47. <td>
  48. <select id="line" onchange="updateStyle()">
  49. <option value="stroke-dasharray:1 0;" selected="selected">line</option>
  50. <option value="stroke-dasharray:10 10;">dash</option>
  51. <option value="stroke-dasharray:2 2;">dot</option>
  52. <option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
  53. </select>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td>Line thickness</td>
  58. <td>
  59. <select id="thickness" onchange="updateStyle()">
  60. <option value="stroke-width:0;">0</option>
  61. <option value="stroke-width:1;">1</option>
  62. <option value="stroke-width:2;" selected="selected">2</option>
  63. <option value="stroke-width:3;">3</option>
  64. <option value="stroke-width:4;">4</option>
  65. <option value="stroke-width:5;">5</option>
  66. <option value="stroke-width:6;">6</option>
  67. </select>
  68. </td>
  69. </tr>
  70. <tr>
  71. <td>Fill Position</td>
  72. <td>
  73. <select id="fill" onchange="updateStyle()">
  74. <option value="">none</option>
  75. <option value="top">top</option>
  76. <option value="bottom">bottom</option>
  77. <option value="zero" selected="selected">zero</option>
  78. </select>
  79. </td>
  80. </tr>
  81. <tr>
  82. <td>Fill Color</td>
  83. <td>
  84. <select id="fillcolor" onchange="updateStyle()">
  85. <option value="fill:green;">green</option>
  86. <option value="fill:red;">red</option>
  87. <option value="fill:blue;" selected="selected">blue</option>
  88. <option value="fill:black;">black</option>
  89. </select>
  90. </td>
  91. </tr>
  92. <tr>
  93. <td>Fill Opacity</td>
  94. <td>
  95. <select id="fillopacity" onchange="updateStyle()">
  96. <option value="fill-opacity:0.1;">0.1</option>
  97. <option value="fill-opacity:0.2;">0.2</option>
  98. <option value="fill-opacity:0.3;">0.3</option>
  99. <option value="fill-opacity:0.4;">0.4</option>
  100. <option value="fill-opacity:0.5;">0.5</option>
  101. <option value="fill-opacity:0.6;" selected="selected">0.6</option>
  102. <option value="fill-opacity:0.7;">0.7</option>
  103. <option value="fill-opacity:0.8;">0.8</option>
  104. <option value="fill-opacity:0.9;">0.9</option>
  105. <option value="fill-opacity:1;">1</option>
  106. </select>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td>Points Shape</td>
  111. <td>
  112. <select id="points" onchange="updateStyle()">
  113. <option value="">none</option>
  114. <option value="circle">circle</option>
  115. <option value="square" selected="selected">square</option>
  116. </select>
  117. </td>
  118. </tr>
  119. <tr>
  120. <td>Points Size</td>
  121. <td>
  122. <select id="pointsize" onchange="updateStyle()">
  123. <option value="1">1</option>
  124. <option value="2">2</option>
  125. <option value="3">3</option>
  126. <option value="4">4</option>
  127. <option value="5">5</option>
  128. <option value="6" selected="selected">6</option>
  129. <option value="8">8</option>
  130. <option value="10">10</option>
  131. <option value="15">15</option>
  132. <option value="20">20</option>
  133. </select>
  134. </td>
  135. </tr>
  136. <tr>
  137. <td>Points Color</td>
  138. <td>
  139. <select id="pointcolor" onchange="updateStyle()">
  140. <option value="stroke:green;">green</option>
  141. <option value="stroke:red;">red</option>
  142. <option value="stroke:blue;" selected="selected">blue</option>
  143. <option value="stroke:black;">black</option>
  144. </select>
  145. </td>
  146. </tr>
  147. <tr>
  148. <td>Point Line Thickness</td>
  149. <td>
  150. <select id="pointthickness" onchange="updateStyle()">
  151. <option value="stroke-width:0;">0</option>
  152. <option value="stroke-width:1;">1</option>
  153. <option value="stroke-width:2;" selected="selected">2</option>
  154. <option value="stroke-width:3;">3</option>
  155. <option value="stroke-width:4;">4</option>
  156. <option value="stroke-width:5;">5</option>
  157. <option value="stroke-width:6;">6</option>
  158. </select>
  159. </td>
  160. <tr>
  161. </tr>
  162. <td>Points Fill Color</td>
  163. <td>
  164. <select id="pointfill" onchange="updateStyle()">
  165. <option value="fill:green;">green</option>
  166. <option value="fill:red;">red</option>
  167. <option value="fill:blue;" selected="selected">blue</option>
  168. <option value="fill:black;">black</option>
  169. </select>
  170. </td>
  171. </tr>
  172. </table>
  173. </td>
  174. </tr>
  175. </table>
  176. <script type="text/javascript">
  177. var container = document.getElementById('visualization');
  178. var items = [
  179. {x: '2014-06-11', y: 10, group: 0},
  180. {x: '2014-06-12', y: 25, group: 0},
  181. {x: '2014-06-13', y: 30, group: 0},
  182. {x: '2014-06-14', y: -10, group: 0},
  183. {x: '2014-06-15', y: 15, group: 0},
  184. {x: '2014-06-16', y: 30, group: 0}
  185. ];
  186. var dataset = new vis.DataSet(items);
  187. var options = {
  188. start: '2014-06-10',
  189. end: '2014-06-18',
  190. dataAxis: {
  191. showMinorLabels: false,
  192. icons: true
  193. }
  194. };
  195. var groupData = {
  196. id: 0,
  197. content: "Group Name",
  198. options: {
  199. drawPoints: {
  200. style: 'square' // square, circle
  201. },
  202. shaded: {
  203. orientation: 'zero' // top, bottom
  204. }
  205. }
  206. };
  207. var groups = new vis.DataSet();
  208. groups.add(groupData);
  209. var graph2d = new vis.Graph2d(container, dataset, groups, options);
  210. updateStyle();
  211. function updateStyle() {
  212. groupData.style = "";
  213. groupData.style += document.getElementById("color").value;
  214. groupData.style += document.getElementById("line").value;
  215. groupData.style += document.getElementById("thickness").value;
  216. groupData.options.drawPoints = {};
  217. groupData.options.drawPoints.styles = "";
  218. groupData.options.drawPoints.style = document.getElementById("points").value;
  219. groupData.options.drawPoints.styles += document.getElementById("pointcolor").value;
  220. groupData.options.drawPoints.styles += document.getElementById("pointthickness").value;
  221. groupData.options.drawPoints.styles += document.getElementById("pointfill").value;
  222. groupData.options.drawPoints.size = Number(document.getElementById("pointsize").value);
  223. if (groupData.options.drawPoints.style == "") {
  224. groupData.options.drawPoints = false;
  225. }
  226. groupData.options.shaded = {};
  227. groupData.options.shaded.style = "";
  228. groupData.options.shaded.style += document.getElementById("fillcolor").value;
  229. groupData.options.shaded.style += document.getElementById("fillopacity").value;
  230. groupData.options.shaded.orientation = document.getElementById("fill").value;
  231. if (groupData.options.shaded.orientation == "") {
  232. groupData.options.shaded = false;
  233. }
  234. var groups = new vis.DataSet();
  235. groups.add(groupData);
  236. graph2d.setGroups(groups);
  237. }
  238. </script>
  239. </body>
  240. </html>