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.

136 lines
4.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Both Axis Example</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. stroke-width:2px;
  20. stroke: #050092;
  21. }
  22. .custom-style3 {
  23. fill: #00f201;
  24. fill-opacity:0;
  25. stroke-width:2px;
  26. stroke: #029200;
  27. }
  28. path.custom-style3.vis-fill {
  29. fill-opacity:0.5 !important;
  30. stroke: none;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <h2>Graph2d | Both Axis Example</h2>
  36. <div style="width:700px; font-size:14px; text-align: justify;">
  37. This example shows the some of the graphs outlined on the right side using the <code>yAxisOrientation</code> option within the groups.
  38. We also show a few more custom styles for the graphs. Finally, the legend is manually positioned. Both the left and right axis
  39. have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
  40. in a <code>left</code> and a <code>right</code> segment. The default position of the left axis has been changed.
  41. </div>
  42. <br />
  43. <div id="visualization"></div>
  44. <script type="text/javascript">
  45. // create a dataSet with groups
  46. var names = ['SquareShaded', 'Bargraph', 'Blank', 'CircleShaded'];
  47. var groups = new vis.DataSet();
  48. groups.add({
  49. id: 0,
  50. content: names[0],
  51. className: 'custom-style1',
  52. options: {
  53. drawPoints: {
  54. style: 'square' // square, circle
  55. },
  56. shaded: {
  57. orientation: 'bottom' // top, bottom
  58. }
  59. }});
  60. groups.add({
  61. id: 1,
  62. content: names[1],
  63. className: 'custom-style2',
  64. options: {
  65. style:'bar',
  66. drawPoints: {style: 'circle',
  67. size: 10
  68. }
  69. }});
  70. groups.add({
  71. id: 2,
  72. content: names[2],
  73. options: {
  74. yAxisOrientation: 'right', // right, left
  75. drawPoints: false
  76. }
  77. });
  78. groups.add({
  79. id: 3,
  80. content: names[3],
  81. className: 'custom-style3',
  82. options: {
  83. yAxisOrientation: 'right', // right, left
  84. drawPoints: {
  85. style: 'circle' // square, circle
  86. },
  87. shaded: {
  88. orientation: 'top' // top, bottom
  89. }
  90. }});
  91. var container = document.getElementById('visualization');
  92. var items = [
  93. {x: '2014-06-12', y: 0 , group: 0},
  94. {x: '2014-06-13', y: 30, group: 0},
  95. {x: '2014-06-14', y: 10, group: 0},
  96. {x: '2014-06-15', y: 15, group: 1},
  97. {x: '2014-06-16', y: 30, group: 1},
  98. {x: '2014-06-17', y: 10, group: 1},
  99. {x: '2014-06-18', y: 15, group: 1},
  100. {x: '2014-06-19', y: 52, group: 1},
  101. {x: '2014-06-20', y: 10, group: 1},
  102. {x: '2014-06-21', y: 20, group: 2},
  103. {x: '2014-06-22', y: 600, group: 2},
  104. {x: '2014-06-23', y: 100, group: 2},
  105. {x: '2014-06-24', y: 250, group: 2},
  106. {x: '2014-06-25', y: 300, group: 2},
  107. {x: '2014-06-26', y: 200, group: 3},
  108. {x: '2014-06-27', y: 600, group: 3},
  109. {x: '2014-06-28', y: 1000, group: 3},
  110. {x: '2014-06-29', y: 250, group: 3},
  111. {x: '2014-06-30', y: 300, group: 3}
  112. ];
  113. var dataset = new vis.DataSet(items);
  114. var options = {
  115. dataAxis: {showMinorLabels: false},
  116. legend: {left:{position:"bottom-left"}},
  117. start: '2014-06-09',
  118. end: '2014-07-03'
  119. };
  120. var graph2d = new vis.Graph2d(container, dataset, groups, options);
  121. </script>
  122. </body>
  123. </html>