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.

200 lines
5.9 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Axis Titles and Styling</title>
  5. <link href="../../dist/vis-timeline-graph2d.min.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. </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. </table>
  63. </td>
  64. </tr>
  65. </table>
  66. </div>
  67. <br />
  68. <div id="visualization"></div>
  69. <script type="text/javascript">
  70. // create a dataSet with groups
  71. var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  72. var groups = new vis.DataSet();
  73. groups.add({
  74. id: 0,
  75. content: names[0],
  76. className: 'custom-style1',
  77. options: {
  78. drawPoints: {
  79. style: 'square' // square, circle
  80. },
  81. shaded: {
  82. orientation: 'bottom' // top, bottom
  83. }
  84. }});
  85. groups.add({
  86. id: 1,
  87. content: names[1],
  88. className: 'custom-style2',
  89. options: {
  90. style:'bar',
  91. drawPoints: {style: 'circle',
  92. size: 10
  93. }
  94. }});
  95. groups.add({
  96. id: 2,
  97. content: names[2],
  98. options: {
  99. yAxisOrientation: 'right', // right, left
  100. drawPoints: false
  101. }
  102. });
  103. groups.add({
  104. id: 3,
  105. content: names[3],
  106. className: 'custom-style3',
  107. options: {
  108. yAxisOrientation: 'right', // right, left
  109. drawPoints: {
  110. style: 'circle' // square, circle
  111. },
  112. shaded: {
  113. orientation: 'top' // top, bottom
  114. }
  115. }});
  116. var container = document.getElementById('visualization');
  117. var items = [
  118. {x: '2014-06-12', y: 0 , group: 0},
  119. {x: '2014-06-13', y: 30, group: 0},
  120. {x: '2014-06-14', y: 10, group: 0},
  121. {x: '2014-06-15', y: 15, group: 1},
  122. {x: '2014-06-16', y: 30, group: 1},
  123. {x: '2014-06-17', y: 10, group: 1},
  124. {x: '2014-06-18', y: 15, group: 1},
  125. {x: '2014-06-19', y: 52, group: 1},
  126. {x: '2014-06-20', y: 10, group: 1},
  127. {x: '2014-06-21', y: 20, group: 2},
  128. {x: '2014-06-22', y: 600, group: 2},
  129. {x: '2014-06-23', y: 100, group: 2},
  130. {x: '2014-06-24', y: 250, group: 2},
  131. {x: '2014-06-25', y: 300, group: 2},
  132. {x: '2014-06-26', y: 200, group: 3},
  133. {x: '2014-06-27', y: 600, group: 3},
  134. {x: '2014-06-28', y: 1000, group: 3},
  135. {x: '2014-06-29', y: 250, group: 3},
  136. {x: '2014-06-30', y: 300, group: 3}
  137. ];
  138. var dataset = new vis.DataSet(items);
  139. var options = {
  140. dataAxis: {
  141. showMinorLabels: false,
  142. right: {
  143. title: {
  144. text: 'Title (right axis)'
  145. }
  146. }
  147. },
  148. legend: {left:{position:"bottom-left"}},
  149. start: '2014-06-09',
  150. end: '2014-07-03'
  151. };
  152. var graph2d = new vis.Graph2d(container, items, groups, options);
  153. function showIcons(show) {
  154. graph2d.setOptions({dataAxis: {icons: show}});
  155. }
  156. function showTitle(axis, show) {
  157. var title;
  158. if(show == true) {
  159. title = {text: "Title (" + axis + " axis)"};
  160. }
  161. else {
  162. title = undefined;
  163. }
  164. if(axis == 'left') {
  165. graph2d.setOptions({dataAxis: {left: {title: title}}});
  166. }
  167. else {
  168. graph2d.setOptions({dataAxis: {right: {title: title}}});
  169. }
  170. }
  171. var colors=['red','green','blue','black','yellow','purple','pink'];
  172. function styleTitle(axis) {
  173. var title;
  174. title = {style: "color: " + colors[Math.floor(Math.random() * colors.length) + 1]};
  175. if(axis == 'left') {
  176. graph2d.setOptions({dataAxis: {left: {title: title}}});
  177. }
  178. else {
  179. graph2d.setOptions({dataAxis: {right: {title: title}}});
  180. }
  181. }
  182. </script>
  183. </body>
  184. </html>