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.

214 lines
6.8 KiB

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. <title>Graph2d | Axis Titles and Styling</title>
  5. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  6. <script src="../../dist/vis.js"></script>
  7. <style type="text/css">
  8. body, html {
  9. font-family: sans-serif;
  10. }
  11. .custom-style1 {
  12. fill: #f2ea00;
  13. fill-opacity:0;
  14. stroke-width:2px;
  15. stroke: #b3ab00;
  16. }
  17. .custom-style2 {
  18. fill: #00a0f2;
  19. fill-opacity:0;
  20. stroke-width:2px;
  21. stroke: #050092;
  22. }
  23. .custom-style3 {
  24. fill: #00f201;
  25. fill-opacity:0;
  26. stroke-width:2px;
  27. stroke: #029200;
  28. }
  29. path.custom-style3.vis-fill {
  30. fill-opacity:0.5 !important;
  31. stroke: none;
  32. }
  33. </style>
  34. <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>
  35. <body>
  36. <h2>Graph2d | Axis Titles and Styling</h2>
  37. <div style="width:800px; font-size:14px; text-align: justify;">
  38. <table>
  39. <tr>
  40. <td>
  41. This example shows setting a title for the left and right axis. Optionally the example allows the user
  42. to show icons and labels on the left and right axis.
  43. </td>
  44. <td>
  45. <table>
  46. <tr>
  47. <td><input type="button" onclick="showIcons(true)" value="Show Icons" /></td>
  48. <td><input type="button" onclick="showIcons(false)" value="Hide Icons" /></td>
  49. </tr>
  50. <tr>
  51. <td><input type="button" onclick="showTitle('left', true)" value="Show Left Title" /></td>
  52. <td><input type="button" onclick="showTitle('left', false)" value="Hide Left Title" /></td>
  53. </tr>
  54. <tr>
  55. <td><input type="button" onclick="showTitle('right', true)" value="Show Right Title" /></td>
  56. <td><input type="button" onclick="showTitle('right', false)" value="Hide Right Title" /></td>
  57. </tr>
  58. <tr>
  59. <td><input type="button" onclick="styleTitle('left')" value="Color Left Title" /></td>
  60. <td><input type="button" onclick="styleTitle('right')" value="Color Right Title" /></td>
  61. </tr>
  62. <tr>
  63. <td>Left decimals</td>
  64. <td><select id="decimals" onchange="styleDecimals()">
  65. <option value="0">0</option>
  66. <option value="1">1</option>
  67. <option value="2">2</option>
  68. </select>
  69. </td>
  70. </tr>
  71. </table>
  72. </td>
  73. </tr>
  74. </table>
  75. </div>
  76. <br />
  77. <div id="visualization"></div>
  78. <script type="text/javascript">
  79. // create a dataSet with groups
  80. var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  81. var groups = new vis.DataSet();
  82. groups.add({
  83. id: 0,
  84. content: names[0],
  85. className: 'custom-style1',
  86. options: {
  87. drawPoints: {
  88. style: 'square' // square, circle
  89. },
  90. shaded: {
  91. orientation: 'bottom' // top, bottom
  92. }
  93. }});
  94. groups.add({
  95. id: 1,
  96. content: names[1],
  97. className: 'custom-style2',
  98. options: {
  99. style:'bar',
  100. drawPoints: {style: 'circle',
  101. size: 10
  102. }
  103. }});
  104. groups.add({
  105. id: 2,
  106. content: names[2],
  107. options: {
  108. yAxisOrientation: 'right', // right, left
  109. drawPoints: false
  110. }
  111. });
  112. groups.add({
  113. id: 3,
  114. content: names[3],
  115. className: 'custom-style3',
  116. options: {
  117. yAxisOrientation: 'right', // right, left
  118. drawPoints: {
  119. style: 'circle' // square, circle
  120. },
  121. shaded: {
  122. orientation: 'top' // top, bottom
  123. }
  124. }});
  125. var container = document.getElementById('visualization');
  126. var items = [
  127. {x: '2014-06-12', y: 0 , group: 0},
  128. {x: '2014-06-13', y: 30, group: 0},
  129. {x: '2014-06-14', y: 10, group: 0},
  130. {x: '2014-06-15', y: 15, group: 1},
  131. {x: '2014-06-16', y: 30, group: 1},
  132. {x: '2014-06-17', y: 10, group: 1},
  133. {x: '2014-06-18', y: 15, group: 1},
  134. {x: '2014-06-19', y: 52, group: 1},
  135. {x: '2014-06-20', y: 10, group: 1},
  136. {x: '2014-06-21', y: 20, group: 2},
  137. {x: '2014-06-22', y: 600, group: 2},
  138. {x: '2014-06-23', y: 100, group: 2},
  139. {x: '2014-06-24', y: 250, group: 2},
  140. {x: '2014-06-25', y: 300, group: 2},
  141. {x: '2014-06-26', y: 200, group: 3},
  142. {x: '2014-06-27', y: 600, group: 3},
  143. {x: '2014-06-28', y: 1000, group: 3},
  144. {x: '2014-06-29', y: 250, group: 3},
  145. {x: '2014-06-30', y: 300, group: 3}
  146. ];
  147. var dataset = new vis.DataSet(items);
  148. var options = {
  149. dataAxis: {
  150. showMinorLabels: false,
  151. title: {
  152. right: {
  153. text: 'Title (right axis)'
  154. }
  155. }
  156. },
  157. legend: {left:{position:"bottom-left"}},
  158. start: '2014-06-09',
  159. end: '2014-07-03'
  160. };
  161. var graph2d = new vis.Graph2d(container, items, groups, options);
  162. function showIcons(show) {
  163. graph2d.setOptions({dataAxis: {icons: show}});
  164. }
  165. function showTitle(axis, show) {
  166. var title;
  167. if(show == true) {
  168. title = {text: "Title (" + axis + " axis)"};
  169. }
  170. else {
  171. title = undefined;
  172. }
  173. if(axis == 'left') {
  174. graph2d.setOptions({dataAxis: {title: {left: title}}});
  175. }
  176. else {
  177. graph2d.setOptions({dataAxis: {title: {right: title}}});
  178. }
  179. }
  180. var colors=['red','green','blue','black','yellow','purple','pink'];
  181. function styleTitle(axis) {
  182. var title;
  183. title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
  184. if(axis == 'left') {
  185. graph2d.setOptions({dataAxis: {title: {left: title}}});
  186. }
  187. else {
  188. graph2d.setOptions({dataAxis: {title: {right: title}}});
  189. }
  190. }
  191. function styleDecimals() {
  192. var x = document.getElementById("decimals");
  193. graph2d.setOptions({dataAxis: {format: {left: {decimals: Number(x.value)}}}});
  194. }
  195. </script>
  196. </body>
  197. </html>