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.

125 lines
4.0 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Right Axis Example</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. .customStyle1 {
  10. fill: #0df200;
  11. fill-opacity:0;
  12. stroke-width:2px;
  13. stroke: #0df200;
  14. }
  15. .customStyle2 {
  16. fill: #f23303;
  17. fill-opacity:0;
  18. stroke-width:2px;
  19. stroke: #ff0004;
  20. }
  21. </style>
  22. <script src="../../dist/vis.js"></script>
  23. <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
  24. <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>
  25. <body>
  26. <h2>Graph2d | Right Axis Example</h2>
  27. <div style="width:700px; font-size:14px; text-align: justify;">
  28. This example shows the all of the graphs outlined on the right side using the <code>yAxisOrientation</code> option.
  29. We also show a few custom styles for the graph and show icons on the axis, which are adhering to the custom styling.
  30. Finally, the legend is manually positioned. Both the left and right axis
  31. have their own legend. If one of the axis is unused, the legend is not shown. The options for the legend have been split
  32. in a <code>left</code> and a <code>right</code> segment. Since this example shows the right axis, the right legend is configured.
  33. </div>
  34. <br />
  35. <div id="visualization"></div>
  36. <script type="text/javascript">
  37. // create a dataSet with groups
  38. var names = ['Custom1', 'Custom2', 'Blank', 'CircleShaded'];
  39. var groups = new vis.DataSet();
  40. groups.add({
  41. id: 0,
  42. content: names[0],
  43. className: 'customStyle1',
  44. options: {
  45. drawPoints: {
  46. style: 'square' // square, circle
  47. },
  48. shaded: {
  49. orientation: 'bottom' // top, bottom
  50. }
  51. }});
  52. groups.add({
  53. id: 1,
  54. content: names[1],
  55. className: 'customStyle2',
  56. options: {
  57. style:'bar',
  58. drawPoints: {style: 'circle',
  59. size: 10
  60. }
  61. }});
  62. groups.add({
  63. id: 2,
  64. content: names[2],
  65. options: {
  66. drawPoints: false
  67. }
  68. });
  69. groups.add({
  70. id: 3,
  71. content: names[3],
  72. options: {
  73. drawPoints: {
  74. style: 'circle' // square, circle
  75. },
  76. shaded: {
  77. orientation: 'top' // top, bottom
  78. }
  79. }});
  80. var container = document.getElementById('visualization');
  81. var items = [
  82. {x: '2014-06-13', y: 30, group: 0},
  83. {x: '2014-06-14', y: 10, group: 0},
  84. {x: '2014-06-15', y: 15, group: 1},
  85. {x: '2014-06-16', y: 30, group: 1},
  86. {x: '2014-06-17', y: 10, group: 1},
  87. {x: '2014-06-18', y: 15, group: 1},
  88. {x: '2014-06-19', y: 52, group: 1},
  89. {x: '2014-06-20', y: 10, group: 1},
  90. {x: '2014-06-21', y: 20, group: 2},
  91. {x: '2014-06-22', y: 60, group: 2},
  92. {x: '2014-06-23', y: 10, group: 2},
  93. {x: '2014-06-24', y: 50, group: 2},
  94. {x: '2014-06-25', y: 30, group: 2},
  95. {x: '2014-06-26', y: 20, group: 3},
  96. {x: '2014-06-27', y: 60, group: 3},
  97. {x: '2014-06-28', y: 10, group: 3},
  98. {x: '2014-06-29', y: 85, group: 3},
  99. {x: '2014-06-30', y: 30, group: 3}
  100. ];
  101. var dataset = new vis.DataSet(items);
  102. var options = {
  103. legend: {right: {position: 'top-left'}},
  104. yAxisOrientation: 'right', // right, left
  105. dataAxis: {icons: true},
  106. start: '2014-06-10',
  107. end: '2014-07-04',
  108. movable: false
  109. };
  110. var graph2d = new vis.Graph2d(container, dataset, groups, options);
  111. </script>
  112. </body>
  113. </html>