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.4 KiB

  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. <style type="text/css">
  7. body, html {
  8. font-family: sans-serif;
  9. }
  10. .customStyle1 {
  11. fill: #f2ea00;
  12. fill-opacity:0;
  13. stroke-width:2px;
  14. stroke: #b3ab00;
  15. }
  16. .customStyle2 {
  17. fill: #00a0f2;
  18. fill-opacity:0;
  19. stroke-width:2px;
  20. stroke: #050092;
  21. }
  22. .customStyle3 {
  23. fill: #00f201;
  24. fill-opacity:0;
  25. stroke-width:2px;
  26. stroke: #029200;
  27. }
  28. path.customStyle3.fill {
  29. fill-opacity:0.5 !important;
  30. stroke: none;
  31. }
  32. </style>
  33. <script src="../../dist/vis.js"></script>
  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. <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: 'customStyle1',
  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: 'customStyle2',
  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: 'customStyle3',
  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>