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.

91 lines
2.8 KiB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>Graph2d | Bar Graph Example</title>
  5. <style type="text/css">
  6. body, html {
  7. font-family: sans-serif;
  8. }
  9. </style>
  10. <script src="../../dist/vis.js"></script>
  11. <link href="../../dist/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  12. </head>
  13. <body>
  14. <h2>Graph2d | Custom axis range</h2>
  15. <div style="width:700px; font-size:14px; text-align: justify;">
  16. You can define a custom range for the Y axis. Since there are two Y axis, you can define both of them. You can also
  17. only define the min or max values. Since one of the Y axis is slaved to the other one (the right one is slaved to the left one),
  18. you cannot absolutely define the range of the slaved axis because it has to use the same lines. The values you supply are used as guidelines however.
  19. If the zero-lines have to be aligned, you can use the option alignZeros. It is enabled by default.
  20. <pre class="prettyprint lang-js">
  21. var options = {
  22. dataAxis: {
  23. left: {
  24. range: {min:-5, max:30}
  25. },
  26. right: {
  27. range: {min:-5}
  28. }
  29. }
  30. };
  31. </pre>
  32. </div>
  33. <br />
  34. <div id="visualization"></div>
  35. <script type="text/javascript">
  36. var container = document.getElementById('visualization');
  37. var groups = new vis.DataSet();
  38. groups.add({id: 0, content: "group0"})
  39. groups.add({id: 1, content: "group1"})
  40. groups.add({id: 2, content: "group2",options:{ yAxisOrientation:'right'}})
  41. var items = [
  42. {x: '2014-06-11', y: 10, group:0},
  43. {x: '2014-06-12', y: 25, group:0},
  44. {x: '2014-06-13', y: 30, group:0},
  45. {x: '2014-06-14', y: 10, group:0},
  46. {x: '2014-06-15', y: 15, group:0},
  47. {x: '2014-06-16', y: 30, group:0},
  48. {x: '2014-06-11', y: 12, group:1},
  49. {x: '2014-06-12', y: 15, group:1},
  50. {x: '2014-06-13', y: 34, group:1},
  51. {x: '2014-06-14', y: 24, group:1},
  52. {x: '2014-06-15', y: 5, group:1},
  53. {x: '2014-06-16', y: 12, group:1},
  54. {x: '2014-06-11', y: 22, group:2},
  55. {x: '2014-06-12', y: 14, group:2},
  56. {x: '2014-06-13', y: 24, group:2},
  57. {x: '2014-06-14', y: 21, group:2},
  58. {x: '2014-06-15', y: 30, group:2},
  59. {x: '2014-06-16', y: 18, group:2}
  60. ];
  61. var dataset = new vis.DataSet(items);
  62. var options = {
  63. style:'bar',
  64. barChart: {width:50, align:'center', sideBySide:true}, // align: left, center, right
  65. drawPoints: true,
  66. dataAxis: {
  67. left: {
  68. range: {min:-5, max:30}
  69. },
  70. right: {
  71. range: {min:-5}
  72. },
  73. icons:true
  74. },
  75. orientation:'top',
  76. start: '2014-06-10',
  77. end: '2014-06-18'
  78. };
  79. var graph2d = new vis.Graph2d(container, items, groups, options);
  80. </script>
  81. </body>
  82. </html>